클로저(Closure)란? 정의 1 “A closure is the combination of a function and the lexical environment within which that function was declared” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. [240130] 렉시컬 환경, 렉시컬 스코프 렉시컬 환경(렉시컬 환경 객체) 이란? 코드블록({...}), function, script를 실행하기 앞서 생성되는 특별한 객체 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체 렉시컬 환경 hamo0.tistory.com 함수 makeCounter()를 호출하면 내부 함수 function() { re..
[240126] 실행 컨텍스트 - (1) 실행 컨텍스트(execution context)란? 함수 실행에 대한 세부 정보를 담고 있는 내부 데이터 객체. 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환 hamo0.tistory.com 이전 글에서는 실행 컨텍스트가 무엇인지, 어떻게 구성되는지 알아보았다! 이번에는 실행 컨텍스트의 생성 과정을 살펴보자. 0. 예시 코드 var var1 = "gvar1"; const const1 = "gconst1"; function first() { var var1 = "fvar1"; var var2 = "fvar2" const const1 = "fconst1"; function second() { const const2 =..
this란? this는 자신이 속한 객체, 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this가 왜 필요할까? 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. ➡️ 이를 위해 메서드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 생성자 함수 내부에서는 프로퍼티 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다. 하지만 생성자 함수를 정의하는 시점은 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ➡️ 이를 위해 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. this는 언제 결정되는가 this의 값은 런타임에 결정된다. 동일한 함수라도 다른 객체에서 호출했다면..
렉시컬 환경(렉시컬 환경 객체) 이란? 코드블록({...}), function, script를 실행하기 앞서 생성되는 특별한 객체 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체 렉시컬 환경의 구성요소 1. 환경 레코드(Environment Record) 모든 지역 변수를 프로퍼티로 저장하고 있는 객체 this 값과 같은 기타 정보도 여기에 저장 💡 변수는 특수 내부 객체인 환경 레코드의 프로퍼티일 뿐. 변수를 가져오거나 변경하는 것은 환경 레코드의 프로퍼티를 가져오거나 변경함을 의미 1.1 객체 환경 레코드 (Object Environment Record) 바인딩 하는 것들 전역 객체 -> BindingObject 객체 with문과 같이 식별자를 어떤 특정 객체의 속성으로 취급할 ..
스코프란? 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 스코프는 식별자가 유효한 범위이다. 스코프는 식별자 이름의 충돌을 방지한다. 스코프의 구분 Global Scope (전역 스코프) 코드의 가장 바깥 영역 코드 어디서든지 참조가능 Local Scope (Function-level Scope, 지역 스코프) 함수 몸체 내부 함수 자신의 지역 스코프와 하위 스코프에서만 참조가능 스코프 체인 스코프 체인은 함수의 중첩에 의해 스코프가 계층적으로 연결된 것이다. 변수를 참조할 때 자바스크립트 엔진은 변수를 참조하는 코드의 스코프에서 시작하여 스코프 체인을 통해 상위 스코프 방향으로 이동하며 선언된 변수를..
객체 리터럴, new Object() - 객체 하나 만들 때 // 객체 생성 방법 1: 리터럴 const Person1 = { name: 'Ham', age: 24, }; console.log(Person1.__proto__ === Object.prototype); // true console.log(Person1.__proto__.constructor === Object); // true // 객체 생성 방법 2: Object 생성자 함수 const Person2 = new Object(); Person2.name = 'Ham'; Person2.age = 24; console.log(Person2.__proto__ === Object.prototype); // true console.log(Person..
[[Prototype]] 과 프로토타입 객체 모든 JS 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖는다! [[Prototype]] 이 다른 객체를 참조하고 있을 때 그 참조하는 대상을 프로토타입 객체 라고 한다. __proto__ [[Prototype]] 은 직접 접근이 불가능하다. 프로토타입 체인의 단방향성 때문. [[Prototype]] 의 getter 이자 setter인 __proto__ 로 접근 가능 최근에는 Object.getPrototypeOf / Object.setPrototypeof 를 사용 함수의 prototype 프로퍼티 // 생성자 함수 const Person = function (name, age) { this.name = name; this.age = age; }; ..
실행 컨텍스트(execution context)란? 함수 실행에 대한 세부 정보를 담고 있는 내부 데이터 객체. 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 된다. 실행 컨텍스트는 언제 생성될까? 하나의 실행 컨텍스트를 구성할 수 있는 방법은 다음과 같다. 전역공간 - 자동으로 전역 실행 컨텍스트 생성 함수 - 함수 실행 컨텍스트는 함수의 선언이 아닌 실행될 때 생성된다 eval() 함수 ES6+에서의 블록({}) 실행 컨텍스트와 콜스택 const x = 1; function foo() { const y = 2; function bar() { const z = 3; console.log(x + y + z); } bar(); }..
