CS/모던 자바스크립트 Deep Dive (41) 썸네일형 리스트형 15장 let,const 키워드와 블록 레벨 스코프 2023년 4월 18일 208p~218p 15장 let,const 키워드와 블록 레벨 스코프 15.1 var 키워드로 선언한 변수의 문제점 var 키워드로 선언한 변수는 중복 선언을 허용한다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. 에러는 발생하지 않는다. var y; console.log(x); // 100 console.log(y); // 1 var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정하기 때문에 함수 외부에서 var로 선언한 변.. 14장 전역 변수의 문제점 2023년 4월 18일 200p~207p 14장 전역 변수의 문제점 14.1 변수의 생명 주기 14.1.1 지역 변수의 생명 주기 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. function foo() { var x = 'local'; console.log(x); // local return x; } foo(); console.log(x); // ReferenceError: x is not defined 지역 변수 x는 foo 함수가 호출되기 이전까지는 생성되지 않는다. foo 함수를 호출하지 않으면 함수 내부의 변수 선언문이 실행되지 않기 때문이다.. 13장 스코프 2023년 4월 17일 189p~199p 13장 스코프 13.1 스코프란? var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수 if (true) { var var2 = 2; // 코드 블록 내에서 선언한 변수 if (true) { var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수 } } function foo() { var var4 = 4; // 함수 내에서 선언한 변수 function bar() { var var5 = 5; // 중첩된 함수 내에서 선언한 변수 } } console.log(var1); // 1 console.log(var2); // 2 console.log(var3); // 3 console.log(var4); // ReferenceError: var.. 23장 실행 컨텍스트(2) 2023년 4월 15일 375p~387p 23장 실행 컨텍스트 23.6.4 foo 함수 코드 평가 현재 전역 코드 평가를 통해 전역 실행 컨텍스트가 생성되었고 전역 코드를 실행하고 있다. 현재 foo 함수를 호출하기 직전이다. 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); // ← 호출 직전 foo 함수가 호출되면 전역 코드의 실행이 일시 중단되고 foo 함수 내부로 코드의 제어권이 이동한다. 그리고 함수 코드를 평가하기 시작한다. 1. 함수 실행 컨텍스트 생성 먼저 foo 함수 .. 23장 실행 컨텍스트(1) 2023년 4월 12일 359p~375p 23장 실행 컨텍스트 23.2 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를 평가 -> 실행 과정으로 나누어 처리한다. 소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다. 소스코드 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행되는 런타임이 시작된다. 이때 소스코드 실행에 필요한 정보, 즉 함수나 변수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다. 그리고 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다. 23.3 실행 컨텍스트의 역할 이 예제는 전역 코드와 함수 코드.. 22장 this 2023년 4월 11일 342p~358p 22장 this 22.1 this 키워드 동작을 나타내는 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. this는 자신이 속한 객체 또는 생성할 인스턴스를 가리키는 자기 참조 변수이며, 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며 코드 어디서든 참조 가능하다. 단, this가 가리키는 값 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. // 객체 리터럴 const circle = { radius: 5, getDiam.. 16장 프로퍼티 어트리뷰트 2023년 4월 10일 219p~233p 16장 프로퍼티 어트리뷰트 16.1 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티, 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호 [[...]]로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원친적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않지만, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. 예를 들어 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖고 원칙적으로는 직.. 17장 생성자 함수에 의한 객체 생성 2023년 4월 8일 234p~248p 17장 생성자 함수에 의한 객체 생성 17.1 Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 먼저 빈 객체를 생성하여 반환하고, 프로퍼티 또는 메서드를 추가한다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); // {name: "Lee", sayHello: ƒ} person.sayHello(); // Hi! My name is Lee 생성자 함수란 new 연산자와 함께 호.. 이전 1 2 3 4 5 6 다음
