var x = 1;const y = 2;function foo (a) { var x = 3; const y = 4; function bar (b) { const z = 5; console.log(a + b + x + y + z); } bar(10);}foo(20); // 42위 예제를 통해 실행 컨텍스트의 생성 과정, 코드 실행 결과가 관리되는 과정, 실행 컨텍스트를 통해 식별자를 검색하는 과정을 알아보자! 1. 전역 객체 생성전역 객체는 전역 코드가 평가되기 이전에 생성된다. 이때 전역 객체에는 빌트인 전역 프로퍼티와 빌트인 전역 함수, 그리고 표준 빌트인 객체가 추가되며 환경에 따라 클라이언트 사이드 Web API 또는 특정 환경을 위한 호스트 객체를 포함한다. 전역 객체도 O..

렉시컬 환경이란?실행 컨텍스트를 구성하는 컴포넌트인 렉시컬 환경은 식별자, 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조다. 실행 컨텍스트 스택은 코드의 실행 순서를 관리하고, 렉시컬 환경은 식별자와 스코프를 관리한다. 렉시컬 환경은 키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록 스코프)를생성하여 식별자를 키로 등록하고, 식별자에 바인딩된 값을 관리한다. 즉, 렉시컬 환경은 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 하는 렉시컬 스코프의 실체다. 실행 컨텍스트와 렉시컬 환경실행 컨텍스트는 LexicalEnvironment(렉시컬 환경) 컴포넌트와 VariableEnvironment(변수 환경) 컴포넌트로 구성된다. 실행 컨텍스트 생성 초기에는 Lexical..

실행 컨텍스트를 이해하면..실행 컨텍스트(execution context)는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식, 호이스팅이 발생하는 이유, 클로저의 동작 방식, 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 소스코드의 타입ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 이 4가지 타입의 소스코드가 실행 컨텍스트를 생성한다. 소스 코드를 4가지 타입으로 구분하는 이유는 이러한 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다.전역 코드전역 코드란 전역에 존재하는 소스코드를 말한다. 전역에 정의된..

this  키워드객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태인 프로퍼티를 수정할 수 있어야 한다. 따라서 메서드가 자신이 속한 객체의 프로퍼티를 참조하기 위해, 자신이 속한 객체의 식별자를 참조할 수 있어야 한다. 이를 위해 자바스크립트는 this라는 특수한 식별자를 제공한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내..

strict modestrict mode란?ES5부터 추가된 모드로, 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.ESLint와 같은 린트 도구를 사용해서 strict mode와 유사한 효과를 얻을 수 있다. 린트 도구는 정적 분석 기능을 통해 소스코드를 실행하기 전에 소스코드를 스캔하여 문법적 오류 뿐 아니라 잠재적인 오류를 찾아내고, 오류의 원인을 리포팅해준다.strict mode의 적용전역의 맨 윗줄 또는 함수 몸체의 맨 위에 'use strict';를 추가한다. 전역의 첫줄에 추가하면 스크립트 전체에 strict mode가 적용된다.function foo() { ..

프로퍼티 존재 확인in 연산자in 연산자는 객체 내에 특정 프로퍼티가 존재하는지 여부를 확인한다./* * key: 프로퍼티 키를 나타내는 문자열 * object: 객체로 평가되는 표현식 */ key in objectconst Person = { name: 'Jung', address: 'Daegu'};console.log('name' in Person); // trueconsole.log('address' in Person); // trueconsole.log('Daegu' in Person); // falsein 연산자는 확인 대상 객체의 프로퍼티뿐만 아니라 확인 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인하므로 주의가 필요하다. 즉, in 연산자는 객체가 속한 프로토타입 체인 상에 존재..

정적 프로퍼티/메서드정적 프로퍼티/메서드는 생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드를 말한다.function Person(name) { this.name = name;}Person.prototype.sayHello = function() { console.log(`Hi! My name is ${this.name}`);};// 정적 프로퍼티Person.staticProp = 'static prop';// 정적 메서드Person.staticMethod = function () { console.log('staticMethod');};const me = new Person('Jung');// 생성자 함수에 추가한 정적 프로퍼티/메서드는 생성자 함수로 참조/호출Pers..

직접 상속Object.create에 의한 직접 상속Object.create 메서드는 명시적으로 프로토타입을 지정하여 새로운 객체를 생성한다. Object.create 메서드도 다른 객체 생성 방식과 마찬가지로 추상 연산 OrdinaryObjectCreate를 호출한다.Object.create 메서드의 첫 번째 매개변수에는 생성할 객체의 프로토타입으로 지정할 객체를 전달하고, 두 번째 매개변수에는 생성할 객체의 프로퍼티 키와 프로퍼티 디스크립터 객체로 이뤄진 객체를 전달한다. 이 객체의 형식은 Object.defineProperties 메서드의 두 번째 인수(옵션이므로 생략 가능)와 동일하다./* * 지정된 프로토타입 및 프로퍼티를 갖는 새로운 객체를 생성하여 반환 * @param {Object} prot..

프로토타입의 교체부모 객체인 프로토타입은 동적으로 변경할 수 있어, 객체 간의 상속 관계를 동적으로 변경할 수 있다. 프로토타입은 생성자 함수 또는 인스턴스에 의해 교체가 가능하다.생성자 함수에 의한 프로토타입의 교체const Person = (function () { function Person(name) { this.name = name; } // ① 생성자 함수의 prototype 프로퍼티를 통해 프로토타입 교체 Person.prototype = { sayHello() { console.log(`Hi! My name is ${this.name}`); } }; return Person;}());const me = new Person('Jung');①에서 Pe..

프로토타입 체인function Person(name) { this.name = name;}Person.prototype.sayHello = function () { console.log(`Hi! My name is ${this.name}`);};const me = new Person('Jung');console.log(me.hasOwnProperty('name')); // true사용자 정의 생성자 함수인 Person과 더불어 생성된 프로토타입 Person.prototype의 프로퍼티에는 constructor 뿐이다. 그러나 위 예제에서 Person 생성자 함수에 의해 생성된 me 객체는 Object.prototype의 메서드인 hasOwnProperty를 호출할 수 있다. 이것은 me 객체가 Per..