js
[자바스크립트] 배열
배열 자바스크립트에서는 배열이 정말로 중요합니다. 그 이유는 바로 많이 쓰기 때문입니다.(?) 서버에서 만약 자료를 조작할 일이 생긴다면, 배열 안에 객체 리터럴들로 원하는 자료를 삽입하고 이를 배열의 메서드를 통해서 조작합니다. 자바스크립트를 잘 쓰는 사람은 '배열을 잘 쓰는 사람이다' 라는 말을 교수님께 들어본적이 있습니다. 자바스크립트를 잘 쓰기 위해 배열에 대해서 한 번 정리해보도록 하겠습니다. 배열의 특징 객체는 프로퍼티 키의 의미가 있습니다. 즉 순서에 의미가 없다고 볼 수 있습니다. 하지만 배열은 순서에 의미가 있습니다. 객체는 키를 통해서 자료를 가져오는 반면에 배열은 인덱스를 통해 자료를 찾습니다. 이는 순서를 통해서 자료를 찾는다고도 볼 수 있습니다. arr = [1, 2, 3]; o ..
[자바스크립트] 정렬 구현해보기
정렬 구현 버블 정렬 버블 정렬은 두 인접 원소를 검사해 정렬 하는 방법입니다. 아래와 같은 gif 파일 처럼 정렬을 시작하고 구현이 단순하다는 장점이 있습니다. 하지만 시간 복잡도가 평균, 최상, 최악 모두 O(N^2) 으로 굉장히 비효율적인 정렬 알고리즘 입니다. function bubbleSort(array) { // 인덱스와 바로 옆에 있는 인덱스 + 1 값을 비교하기 때문에 i 는 array.length - 1 까지 for (let i = 0; i a..
[자바스크립트] ES6 의 함수
ES6의 함수 ES6 이전까지의 자바스크립트 함수는 다양한 목적으로 사용되었습니다. 일반 함수 호출, new 연산자와 생성자 함수로서 호출, 객체에 바인딩되어 메서드로의 호출이 가능했습니다. 이는 유연하다는 장점이 되는것처럼 보이지만 실수를 유발시킬 수 있고 성능 면에서도 손해인 경우가 많습니다. ES6 이전의 함수는 일반 함수로 호출되는 것들이 생성자 함수로도 호출이 가능합니다. 이는 callable 하면서도 constructor 인 함수의 특징 때문인데, 생성자 함수만이 가져야 할 prototype 프로퍼티를 일반 함수들도 가지고 있다는 점에서 문제가 생깁니다. 이는 불필요한 프로토타입 객체를 생성하기 때문입니다. 이처럼 ES6 이전의 모든 함수는 사용 목적에 따른 명확한 구분이 존재하지 않습니다. ..
[자바스크립트] 클로저
클로저 자바스크립트에 대해 조금이라도 관심을 가진 사람들은 클로저라는 난해한 개념에 대해 들어보셨을 겁니다. 사실 대부분의 사람들은 사전지식없이 클로저를 먼저 공부하고는 합니다. 클로저는 렉시컬 환경과 렉시컬 스코프에 대한 사전 지식이 필요합니다. 먼저 MDN 에서 정의된 클로저의 정의에 대해서 이야기 해보도록 하겠습니다. MDN 에서 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합 이라고 이야기하고 있습니다. 함수는 잘 알고 있지만, 함수가 선언된 렉시컬 환경은 딱 와닿지가 않습니다. 먼저 렉시컬 스코프에 대해서 알아보겠습니다. 렉시컬 스코프 자바스크립트 엔진은 함수의 상위스코프를 결정할 때 호출한 위치가 아닌 함수의 정의 위치에 따라 결정합니다. 이러한 특징을 렉시컬 스코프라고 부릅니다. 아래 ..
[자바스크립트] 실행 컨텍스트 (2)
실행 컨텍스트 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있습니다. 실행 컨텍스트를 바르게 이해하면 스코프 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식, 호이스팅의 이유, 클로저(!!)의 동작 방식등의 동작 방식의 이해가 가능합니다. 이번에는 예제를 통해 어떻게 실행 컨텍스트가 생성되고 식별자를 검색하는지 살펴보겠습니다. 예제를 통해 알아보는 실행 컨텍스트의 생성과 식별자 검색 과정 var x = 1; const y = 2; function foo(a) { var x = 3; const y = 4; function bar(b) { const z = 5; console.log(a + b + x + y + z); } bar(10); } foo(20); // 42 0. 전역 객체 생성 사실 자..
[자바스크립트] 실행 컨텍스트 (1)
실행 컨텍스트 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있습니다. 실행 컨텍스트를 바르게 이해하면 스코프 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식, 호이스팅의 이유, 클로저(!!)의 동작 방식등의 동작 방식의 이해가 가능합니다. 내용이 방대하기 때문에 여러번에 나눠서 시리즈처럼 정리해보도록 하겠습니다. 소스코드 자바스크립트에서 소스코드는 총 4가지 타입으로 구분합니다. 이를 굳이 구별해놓은 이유는 당연히 서로 다르기 때문입니다. 소스코드의 타입에 따라서 실행 컨텍스트를 생성하는 과정이 다르고 관리하는 내용도 달라집니다. 소스코드는 아래와 같이 구분합니다. 타입 내용 전역 코드 전역에 존재하는 코드. 함수, 클래스등의 내부 코드는 포함 x 함수 코드 함수 내부에 존재하는 코드. 중첩된..
[자바스크립트] 자바스크립트에서의 this
자바스크립트에서의 this Java 나 C++ 같은 언어에서의 this는 항상 클래스가 생성할 인스턴스를 가리키게 됩니다. 하지만 자바스크립트에서의 this는 함수 호출 방식에 따라서 this 바인딩이 동적으로 일어나게 됩니다. 이는 this 바인딩에 대해서 제대로 알지 못하면 예기치 않은 결과를 만들어 낼 수 있다는 것을 이야기합니다. 이번 글에서는 자바스크립트의 this 바인딩이 동적으로 일어나는 경우에 대해서 정리해보도록 하겠습니다. this 란? this 는 객체 지향 프로그래밍과 관련이 있습니다. 객체란, 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합 자료구조입니다. 메서드는 객체의 상태인 프로퍼티를 참조, 변경이 가능해야 합니다. 이 경우 메서드의 입장에..
[자바스크립트] 클래스란 무엇일까?
JS 의 클래스 자바스크립트는 프로토타입 기반의 객체지향 언어입니다. 대부분의 사람들은 자바스크립트는 객체지향 프로그래밍이 아닌 함수형 프로그래밍 언어로 알고있지만, 사실 자바스크립트는 프로토타입을 기반으로 한 강력한 객체지향 프로그래밍을 제공하기도 하는 멀티 패러다임 언어입니다. 프로토타입이에요. 사실 대부분의 사람들은 Java, C++ 과 같은 언어에서부터 시작해 클래스 기반 언어에 익숙합니다. 이런 분들은 프로토타입 기반의 프로그래밍 방식에 어려움을 느낄 수 있어 프로토타입은 JS 를 어렵게 느끼게 만드는 수많은(?) 장벽중 하나의 장벽으로 인식되고는 했습니다. 프로토타입 쉬워요 ^^ 한번 해요 ^^ 라고 말하는 JS 의 프로토타입 고수(?)가 아닌, 클래스가 익숙한 프로그래머들의 좀 더 빠른 학습..