코어자바스크립트(6)
-
[JS] 클래스
클래스 자바스크립트에는 '상속'이라는 개념이 존재하지 않습니다. 특히 프로토타입 기반과 클래스 기반의 언어는 서로 다른 구조를 갖고 있기 때문에 이를 클래스처럼 동작하려는 시도가 있었고 결국 ES6에는 클래스 문법이 추가가 되었습니다. 클래스의 개념 사물의 공통 속성을 모아 놓은 집단을 클래스라는 추상적인 개념으로 나타냅니다. 그리고 그 클래스 간 포함 관계를 가지며 분류되며 상위 클래스, 하위 클래스로 표현이 됩니다. 하지만 이들은 추상적인 개념이고 이를 바탕으로 구체화, 실존하는 개체를 인스턴스라고 합니다. "사람"을 떠올리면 두 발, 두 손, 얼굴 등등 여러 요소를 갖고 있는 모습을 연상할 수 있습니다. 하지만 그저 사람이라고 생각하면 정확하지 않고 모호합니다. 여기서 실존 인물인 "톰 크루..
2022.08.11 -
[JS] 프로토타입
프로토타입 자바스크립트는 프로토타입 기반 언어입니다. 클래스 기반 언어는 '상속'을 사용하지만 프로토타입 기반 언어는 어떤 객체를 원형을 삼고 이를 복제함으로써 상속과 비슷한 효과를 냅니다. var instance = new Constructor(); new연산자와 생성자 함수를 호출하면 생성자 함수(Constructor)에 정의된 내용을 바탕으로 인스턴스가 생성됩니다. 인스턴스에는 __proto__라는 프로퍼티가 자동으로 부여됩니다. __proto__는 생성자 함수(Constructor)의 prototype()이라는 프로퍼티를 참조합니다. __proto__ 와 prototype 은 프로토타입의 핵심 개념입니다. prototype 객체 내부에는 인스턴스가 사용할 메서드를 저장하며 인스턴스가 __pro..
2022.08.08 -
[JS] 클로저
클로저 MDN에서는 클로저를 "함수와 그 함수가 선언될 당시의 Lexical environment의 상호관계에 따른 현상"으로 말하고 있습니다. Lexical environment에 대해서 복습하자면 LexicalEnvironment는 "환경레코드", "outerEnvironmentReference"로 이루어져 있으며 outerEnvironmentReference는 함수가 선언될 당시의 LexicalEnvironment를 참조하면서 스코프 체인이 일어나게 되고 식별자의 유효 범위가 늘어납니다. 예로 들면 함수 A와 A의 내부함수 B가 있다면, 내부함수 B의 outerEnvironmentReference 에는 함수 A의 LexicalEnvironment에 접근을 하는 겁니다. 그렇다면 함수 A에서 ..
2022.08.07 -
[JS] 콜백함수
콜백함수 다른 코드의 인자로 넘겨주는 함수를 말하며, 인자로 넘겨주면서 제어권도 위임을 진행합니다. 이를 통해서 함수가 실행되는 시점을 조절할 수 있습니다. 콜백함수의 제어권 var count = 0; var cbFunc = function () { console.log(count); if (count++ > 4) clearInterval(timer); }; var timer = setInterval(cbFunc, 300); cbFunc()는 사용자가 호출하고 제어하지만 timer에서 cbFunc()는 setInterval에 의해서 호출되고 제어되고 있습니다. 콜백함수의 this Array.prototype.map(callback[, thisArg]) map의 경우 첫 번째 인자를 콜백함수를 받으..
2022.08.07 -
[JS] this
this this는 실행 컨텍스트가 생성될 때 결정이 됩니다. 그 뜻은 함수를 호출할 때 결정된다고 할 수 있습니다. this를 구분하는 방법은 대표적으로 함수와 메서드 입니다. 전역공간의 this 전역공간의 this는 전역 객체를 가리킵니다. 브라우저 환경: window Node.js 환경: global 전역 변수 전역 변수를 선언하면 JS엔진은 이를 전역객체의 프로퍼티로 할당합니다. 좀더 개념을 확장하면 JS의 모든 변수는 특정객체(LexicalEnvironment)의 프로퍼티로 동작함 그렇다면 var로 선언한 전역변수와 전역객체의 프로퍼티의 차이는 무엇일까요? 호이스팅 configutration 의 True, False window.a = 1; var b =2; delete window.a;..
2022.08.06 -
[JS] 실행 컨텍스트
실행 컨텍스트 실행한 코드에 제공하기 위한 환경 정보를 모아놓은 객체입니다. 자바스크립트 엔진은 코드를 실행하기 전 모든 코드를 훑어서 환경정보를 수집합니다. 콜스텍에 전역 컨텍스트가 담기고 그 위로 실행 컨텍스트가 쌓아 올라갑니다. 실행컨텍스트를 구성할 수 있는 방법은 함수를 실행하는 것입니다. 위에 있는 컨텍스트를 콜스텍에서 꺼내면서 컨텍스트와 관련된 코드들을 실행하며 코드의 환경과 순서를 보장합니다. 가장 먼저 전역 컨텍스트를 콜스텍에 담으며 함수를 만나게 되면 그 함수의 컨텍스트를 생성하고 콜스택에 담습니다. 이후 맨 위의 컨텍스트에 해당하는 코드들을 순차적으로 실행합니다. 실행컨텍스트에 담기는 정보 VariableEnvironment: 환경레코드 (snapshot) outerEnvironment..
2022.07.31