Closure

Closure 상위 함수 보다 하위 함수가 더 오래 살아있는 경우를 closure라고 한다. A closure is the combination of a function and the lexical environment within wiich that function was declared. 클로저는 어떤 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다. function getNumber(){ var number = 5; function innerGetNumber(){ return number; } return innerGetNumber;// 함수를 실행하지 않고 함수 자체를 반환 } const runner = getNumber();// getNumber()를 호출 console.log(runner);..

2024.01.02

Execution Context

Execution Context 실행 컨텍스트는 실행 문맥이라고도 한다. 실행 컨텍스트(Execution Context)는 실행 할 코드에 제공할 환경 정보들을 모아놓은 객체다. 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 자바스크립트 코드의 실행 흐름과 코드에 대한 정보가 Execution Context로 관리된다. 자바스크립트는 코드를 실행하며 필요한 환경 정보들을 모아 이를 이용해 실행 컨텍스트를 만들고, 이를 콜 스택 (LIFO: Last In, First Out)에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장할 수 있게 된다. ..

2023.12.27

this

this 자바스크립트에서 this는 조금 특별하다. 자바스크립트는 Lexical Scope를 사용하기 때문에 함수의 상위 스코프가 정의 시점에 평가된다. 하지만 this 키워드는 바인딩이 객체가 생성되는 시점에 결정된다. this 키워드 일반 함수 호출할 땐 this가 최상위 객체 (global 또는 window)를 가리킨다. 메서드로 호출할 땐 호출된 객체를 가리킨다. new 키워드를 사용해서 객체를 생성했을 땐 객체를 가리킨다. 일반 함수에서의 this 일반 함수는 함수를 실행했을 때 this 키워드가 global object에 매핑이 된다. global object는 web에서는 window 객체다. const testFunction = function(){ return this; } console..

2023.12.27

Scope

Scope scope란 '범위'라는 뜻을 가지고 있습니다. 즉, 스코프란 '변수에 접근할 수 있는 범위'를 말합니다. 자바스크립트는 Lexical Scope다. Lexical Scope : 선언된 위치가 상위 스코프를 정한다. Dynamic Scope : 실행 위치가 상위 스코프를 정한다. Lexical Scope 선언된 위치가 상위 스코프를 정한다. 자바스크립트는 Lexical Scope다. 아래 코드에서 functionTwo의 선언 위치 때문에 functionTwo의 numberOne은 3이 된다. var numberThree = 3; function functionOne(){ var numberThree = 100; console.log(`functionOne numberThree : ${numbe..

2023.12.26

Prototype, Prototype Chain

Prototype, Prototype Chain JavaScript는 프로토타입 기반 언어라고 불립니다. JavaScript 개발을 하면 빠질 수 없는 것이 prototype입니다. prototype이 거의 JavaScript 그 자체이기 때문에 이해하는 것이 어렵고 개념도 복잡합니다. JavaScript도 객체지향 언어입니다. 하지만 자바스크립트에는 class라는 개념이 없습니다. (ES6 에서 class 문법이 추가되었습니다.) 대신 prototype이라는 것이 존재합니다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유입니다. 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근 시 객체 자신의 것 뿐 아니라 proto가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나..

2023.12.23

Constructor Function 생성자 함수

Using function to create objects 생성자 함수로 객체 만들기 this 키워드를 통해서 property를 세팅할 수 있다. 생성자 함수로 객체를 만들 때는 꼭 'new' 키워드를 사용해야 한다. function IdolModel(name, year){ this.name = name; this.year = year; this.dance = function(){ return `${this.name}이 춤을 춥니다.`; } } // new 키워드로 호출 const yuJin = new IdolModel('안유진', 2003); console.log(yuJin); // IdolModel { name: '안유진', year: 2003 } console.log(yuJin.dance()); /..

2023.12.23