TIL (92) 썸네일형 리스트형 <모던 자바스크립트 Deep Dive> 25.6~26장 클래스, ES6 함수의 추가 기능 요약 6) 클래스의 인스턴스 생성 과정 1. 인스턴스 생성과 this 바인딩 - 클래스 호출 시 암묵적으로 빈 객체가 생성되는데, 이것이 클래스가 생성한 인스턴스임 - 인스턴스의 프로토타입으로 prototype 프로퍼티가 가리키는 객체가 설정됨 - 인스턴스는 this에 바인딩(constructor 내부의 this는 클래스가 생성한 인스턴스를 가리킴) 2. 인스턴스 초기화 - constructor가 인수로 전달받은 초기값으로 this에 바인딩된 인스턴스의 프로퍼티 값을 초기화 - constructor 생략 시 이 과정도 생략됨 3. 인스턴스 반환 - 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환됨 7) 프로퍼티 1. 인스턴스 프로퍼티 - 인스턴스 프로퍼티는 contructor 내부에서 정의해야 함 - t.. <모던 자바스크립트 Deep Dive> 24~25.5장 클로저, 클래스 요약 24. 클로저 1) 렉시컬 스코프 - 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에서, 함수가 정의된 위치에 의해 결정되는데 이를 렉시컬 스코프라 함 2) 함수 객체의 내부 슬롯 [[Environment]] - 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 상위 스코프의 참조를 저장함 - 함수 객체는 [[Environment]]에 저장한 상위 스코프의 참조를 자신이 존재하는 한 기억 - 외부 렉시컬 환경에 대한 참조에는 이 상위 스코프 참조가 할당됨 3) 클로저와 렉시컬 환경 - 외부 함수보다 중첩 함수가 더 오래 유지될 때, 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조하는 것이 가능한데 이 때의 중첩 함수를 클로저라 함 - 자바스크립트의 모든 함수는 상.. <모던 자바스크립트 Deep Dive> 23장 실행 컨텍스트 요약 23. 실행 컨텍스트 1) 소스코드의 타입 - 소스코드는 4가지 타입으로 구분되는데, 이들은 실행 컨텍스트를 각각 생성함 1. 전역 코드 : 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성 2. 함수 코드 : 지역 스코프를 생성하고, 이를 스코프 체인에 연결 3. eval 코드 : strict mode에서 독자적인 스코프 생성 4. 모듈 코드 : 모듈별로 독립적인 모듈 스코프 생성 2) 소스코드의 평가와 실행 - 소스코드는 소스코드의 평가, 소스코드의 실행 2가지 과정으로 나뉘어 처리됨 - 소스코드의 평가 과정에서는 실행 컨텍스트를 생성하고 생성된 변수나 함수 식별자를 키로써 스코프에 등록 - 소스코드의 실행 과정에서는 선언문을 제외한 소스코드를 순차적으로 실행하며, 실행에 필요한 정보를 .. <모던 자바스크립트 Deep Dive> 20장~22장 strict mode, 빌트인 객체, this 요약 20. strict mode 1) strict mode란? - 선언하지 않은 변수일 때, 자바스크립트 엔진이 이를 전연 객체의 프로퍼티로 생성하는 것을 암묵적 전역이라 함 - 암묵적 전역은 오류를 발생시키는 원인이 되므로, var/let/const 키워드를 사용하여 변수를 선언한 후에 사용할 것 - 위와 같은 상황이더라도 잠재적인 오류는 존재하므로, 이를 방지하기 위한 근본적인 해결책이 ES5부터 추가된 strict mode(엄격 모드) - ESLint와 같은 도구는 strict mode와 유사하면서도, 부가 기능으로 더욱 강력한 효과를 낼 수 있으므로 사용 선호됨 function foo() { x = 10; // 선언하지 않는 변수이나 자바스크립트 엔진에 의해 암묵적 전역 실행됨 } 2) strict .. <모던 자바스크립트 Deep Dive> 19장 프로토타입 요약 19. 프로토타입 1) 객체지향 프로그래밍 - 자바스크립트는 거의 모든 것이 객체로 이루어진 프로토타입 기반의 객체 기반의 프로그래밍 언어 - 객체지향 프로그래밍은 객체의 집합으로 프로그램을 표현하는 것 - 실체 = 객체, 속성 = 객체가 갖는 특징 - 실체가 가진 여러 속성 중 필요한 속성만을 나타내는 것이 추상화 - 객체는 다시 객체의 상태를 나타내는 데이터인 프로퍼티와, 동작을 나타내는 메서드로 표현됨 - 객체 : 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조 2) 상속과 프로토타입 - 상속 : 어떤 객체의 프로퍼티나 메서드를 다른 객체가 상속받아 그대로 사용하는 것 - 상속이 갖는 의의는 기존의 코드를 재사용함으로써 중복을 줄인다는 것임 - 자바스크립트는 프로토타입을 기반으로.. <모던 자바스크립트 Deep Dive> 17~18장 생성자 함수에 의한 객체 생성, 함수와 일급 객체 요약 17. 생성자 함수에 의한 객체 생성 1) Object 생성자 함수 - new 연산자 + Object();으로 빈 객체(인스턴스) 생성 - Object 이외에도 String, Boolean, Function, Array, Date, RegExp, Promise 등 빌트인 생성자 함수 제공 2) 생성자 함수 1. 객체 리터럴에 의한 객체 생성 방식의 문제점 - 하나의 객체만 생성이 가능하여 비효율적(메서드가 동일한데 매 번 같은 객체 생성해야 함 2. 생성자 함수에 의한 객체 생성 방식의 단점 - 프로퍼티 구조가 동일한 객체를 여러개 생성 가능 - 사용자 정의 가능(new 연산자만 붙이면 됨) *this : 자기참조변수로, 함수 호출 방식에 따라 this가 가리키는 값이 달라짐 함수 호출 방식 this가 .. <모던 자바스크립트 Deep Dive> 16장 프로퍼티 어트리뷰트 요약 16. 프로퍼티 어트리뷰트 1) 내부 슬롯과 내부 메서드 - 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript에서 사양에서 사용하는 의사 프로퍼티와 의사 메서드를 내부 슬롯, 내부 메서드라 칭함('[[..]]'로 감싼 이름들) - 기본적으로 직접 접근 불가 - 내부 슬롯 중 일부는 간접적으로 접근이 가능 ex. [[Prototype]]은 __proto__로 접근 가능 const o = {}; o.__proto__ // Object.prototype 2) 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 - 프로퍼티 생성 시 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의 - 프로퍼티 어트리뷰트란 프로퍼티 값, 값 갱신 가능여부, 열거 가능여부, 재정의 가능여부 나타냄.. <모던 자바스크립트 Deep Dive> 15장 let, const 키워드와 블록 레벨 스코프 요약 (2) 3) const 키워드 - 상수 선언을 위해 사용 - let 키워드와 그 특징이 대부분 동일 - let 키워드와 구별되는 부분 1. 선언과 초기화 - const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화 필요 // 변수 선언과 동시에 초기화 const foo = 1; // 초기화는 이루어지지 않음 -> 문법 에러 const foo2; // SyntaxError: Missing initializer in const declaration - let 키워드와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작 2. 재할당 금지 - var, let 키워드와 달리 const 키워드로 선언한 변수는 재할당 금지됨 const foo = 1; foo = 2; // TypeErro.. <모던 자바스크립트 Deep Dive> 15장 let, const 키워드와 블록 레벨 스코프 요약 (1) 15. let, const 키워드와 블록 레벨 스코프 1) var 키워드로 선언한 변수의 문제점 1. 변수 중복 선언 허용 - var 키워드로 선언한 변수는 같은 스코프 내에서 중복 선언이 가능 - 초기화문(변수 선언과 도시에 초기값을 할당하는 문) 유무에 따라 다르게 동작하는데, 초기화문이 있으면 자바스크립트 엔진이 var 키워드가 없는 것처럼 동작하며 초기화문이 없으면 자바스크립트 엔진이 변수 선언문을 무시함(에러 발생X) - 변수 중복 선언 허용의 문제 : 의도와 달리 먼저 선언된 변수 값이 변경되는 부작용 발생 var x = 1; var y = 1; // 초기화문 있음 : var 키워드가 없는 것처럼 동작 var x = 100; // 초기화문 없음 : 무시됨 var y; console.log(x).. <모던 자바스크립트 Deep Dive> 14장 전역 변수의 문제점 요약 14. 전역 변수의 문제점 1) 변수의 생명 주기 - 변수는 생성, 소멸되는 생명 주기(Life cycle)를 가짐 - "자신이 선언된 위치"에서 생성, 소멸되는데 따라서 전역 변수는 애플리케이션 생명 주기를 갖고, 지역 변수는 함수 생명 주기를 가짐 function foo() { var x = 'local'; console.log(x); // local return x; } foo(); console.log(x); // ReferenceError: x is not defined //지역 변수 x는 foo 함수가 호출되어 실행되는 동안에만 유효함 - 단, 지역 변수의 경우 해당 함수 스코프가 어딘가에서 계속 참조 중이라면 사라지지 않음 - 호이스팅이란 변수 선언이 스코프의 선두에 이루어지는 것을 뜻하며,.. 이전 1 2 3 4 ··· 10 다음