kay log

자바스크립트는 프로토타입 기반 언어라서 '상속' 개념이 존재하지 않는다. 이는 클래스 기반의 다른 언어에 익숙한 많은 개발자들을 혼란스럽게 했다. 따라서 클래스와 비슷하게 동작하게끔 흉내내는 여러 기법들이 탄생했으며, 결국 ES6에는 클래스 문법이 추가됐다. 다만, ES6의 클래스에서도 일정부분 프로토 타입을 활용하고 있기 때문에 ES5의 클래스를 흉내내기 위한 구현 방식을 학습하는 것 또한 여전히 큰 의미가 있다. 클래스와 인스턴스의 개념 이해 자바스크립트의 클래스 클래스 상속 ES6의 클래스 및 클래스 상속 1. 클래스와 인스턴스의 개념 이해 '음식'이라는 범주 안에는 고기, 채소, 과일 등 다양한 것들이 들어갈 수 있다. 과일 범주 아래에는 배, 사과, 바나나, 감, 오렌지 등이 포함될 수 있다. ..

자바스크립트는 프로토타입(prototype) 기반 언어다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고, 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 프로토타입의 개념 이해 프로토타입 체인 1. 프로토타입의 개념 이해 constructor, prototype, instance var instance = new Constructor() 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면, Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성된다. 이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데, 이 프로퍼티는 Constructor의 pr..

클로저의 의미 및 원리 이해 클로저와 메모리 관리 클로저 활용 사례 1. 클로저의 의미 및 원리 이해 클로저(Closure)는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이다. "A closure is the combination of a function and the lexical environment within which that function was declared." - MDN(Mozilla Developer Network) 클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 상호관계에 따른 현상이다. 어떤 함수에서 선언한 변수를 참조하는 내부 함수에서만 발생하는 현상이다. [외부 함수의 변수를 참조하는 내부 함수] var outer = function (..

콜백함수란? 제어권 콜백 함수는 함수다 콜백 함수 내부의 this에 다른 값 바인딩하기 콜백 지옥과 비동기 제어 1. 콜백함수란? 콜백 함수(callback function)는 다른 코드의 인자로 넘겨주는 함수. callback은 '되돌아 호출해달라'는 명령으로, 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보내는 것이다. 이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출한다. 즉, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것이다. 2. 제어권 호출 시..

대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 클래스에서만 사용할 수 있기 때문에 혼란의 여지가 없거나 많지 한다. 그러나 자바스크립트에서의 this는 어디서든 사용할 수 있고, 상황에 따라 this가 바라보는 대상이 달라진다. this는 함수와 객체(메서드)의 구분이 느슨한 자바스크립트에서 실질적으로 이 둘을 구분하는 거의 유일한 기능이다. 상황별로 this가 어떻게 달라지는지, 왜 그렇게 되는지, 예상과 다른 대상을 바라보고 있을 경우 그 원인을 효과적으로 추적하는 방법에 대해 살펴보자. 상황에 따라 달라지는 this 명시적으로 this를 바인딩 하는 방법 1. 상황에 따라 달라지는 this this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. = this..

실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이자, 가장 중요한 핵심 개념 중 하나이다. 실행 컨텍스트란? VariableEnvironment LexicalEnvironment this 1. 실행 컨텍스트란? 스택(stack)과 큐(queue) 이미지 출처 스택은 출입구가 하나뿐이 깊은 우물 같은 데이터 구조. 저장한 순서의 반대로 꺼낼 수 밖에 없다. 큐는 양쪽이 모두 열려있는 파이프 같은 구조. 보통은 한쪽은 입력만, 다른 한쪽은 출력만을 담당하는 구조. 저장한 순서대로 꺼낼 수 밖에 없다. 실행 컨텍스트 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보를 모아 ..

자바스크립트가 데이터를 처리하는 과정을 살펴봄으로써 기본형 타입과 참조형 타입이 서로 다르게 동작하는 이유를 이해하고, 이를 적절히 활용할 수 있게 되는 것을 목표로 한다. 데이터 타입의 종류 데이터 타입에 관한 배경지식 변수 선언과 데이터 할당 기본형 데이터와 참조형 데이터 불변 객체 (immutable object) undefined와 null 1. 데이터 타입의 종류 자바스크립트의 데이터 타입은 크게 기본형(원시형, primitive type)과 참조형(reference type)으로 나눌 수 있다. 2. 데이터 타입에 관한 배경지식 메모리와 데이터 0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트(bit)라고 한다. 메모리는 매우 많은 비트들로 구성되어 있는데, 각 비트는 고유한 식별자를 ..