2024. 01. 30 > 2025. 06. 30 블로그 A/S 프로젝트🚧 로 추가한 글입니다.설명을 추가하고, 오개념을 바로잡습니다.렉시컬 환경의 구성요소1. 환경 레코드(Environment Record)모든 지역 변수를 프로퍼티로 저장하고 있는 객체this 값과 같은 기타 정보도 여기에 저장1.1 객체 환경 레코드 (Object Environment Record)BindingObject 를 참조하고 있으며, 이 객체는 전역 객체를 참조한다.💡 전역 객체의 프로퍼티- var로 선언한 전역 변수- 내장 전역 객체들의 바인딩- 전역 스코프에서의 함수 선언문, 비동기 함수, 제너레이터, 비동기 제너레이터ObjectEnvironmentRecord = { [[BindingObject]]: 전역 객체 참조}..
2024. 01. 26 > 2025. 06. 23 블로그 A/S 프로젝트🚧 로 추가한 글입니다.예시를 다듬고, 오개념을 바로잡습니다. 실행 컨텍스트(execution context)란?어떤 소스코드가 실행되는 단위.함수에 있는 정보, 즉 렉시컬 환경(환경 레코드와 외부 렉시컬 환경에 대한 참조)을 참조!** 환경 레코드 - 식별자와 바인딩된 값이 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 된다.실행 컨텍스트는 언제 생성될까?하나의 실행 컨텍스트를 구성할 수 있는 소스코드의 종류는 다음과 같다. 이때 내부 코드는 포함하지 않는다. 그리고 평가 시점에 각각의 컨텍스트가 생성된다.전역함수eval() 함수모듈실행 컨텍스트와 콜스택, 렉시컬 환경var x = 1;cons..
클로저(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..
2024. 01. 30 > 2025. 06. 23 블로그 A/S 프로젝트🚧 로 추가한 글입니다.예시를 다듬고, 다양한 상황에서의 this를 알아봅니다.this란?this는 자신이 속한 객체, 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this가 왜 필요할까?메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. ➡️ 이를 위해 메서드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.생성자 함수 내부에서는 프로퍼티 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다. 하지만 생성자 함수를 정의하는 시점은 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ➡️ 이를 위해 자신이 생성할 ..
스코프란? 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 스코프는 식별자가 유효한 범위이다. 스코프는 식별자 이름의 충돌을 방지한다. 스코프의 구분 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; }; ..
자바스크립트의 원시타입과 참조타입 원시타입 String Number Bigint Boolean null undefined Symbol (ES6) 참조타입 Object Array function 자바스크립트의 작동원리 아래는 JS 엔진을 추상화한 그림이다. 콜스택 - 함수의 호출과 관계되는 지역변수, 매개변수 저장 메모리힙 - 사용자에 의해 직접 동적으로 할당되고 해제 원시타입의 데이터 할당 변수에 할당될 때 let foo = 10; // 변수 foo에는 10이 저장된 콜스택 메모리의 주소값이 저장 변수의 값은 콜스택 영역에 저장 변수에는 해당 콜스택 영역의 주소가 저장 재할당될 때 let foo = 10; foo = 20; 변수의 값은 새로운 콜스택 영역에 저장 변수에는 해당 콜스택 영역의 주소가 저장 ..
