목록2024/12/23 (7)
nhyunzi
25.1 클래스는 프로토타입의 문법적 설탕인가?자바스크립트는 프로토타입 기반 객체지향 언어이다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. 하지만 클래스 기반 언어에 익숙한 프로그래머들은 프로토타입 기반 프로그래밍 방식에 혼란을 느낄 수 있으며, 자바스크립트를 어렵게 느끼게 하는 하나의 장벽처럼 인식되었다. ES6에서 새롭게 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 ..
클로저는 난해하기로 유명한 개념 중 하나로 앞서 살펴본 실행 컨텍스트에 대한 사전 지식이 있으면 이해하기 어려운 개념은 아니다.클로저는 자바스크립트 고유 개념은 아니기 때문에 ECMAScript 사양에 등장하지 않는다.MDN에서는 클로저를 다음과 같이 정의하고 있다. '' 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다" 24.1 렉시컬 스코프렉시컬 스코프를 실행 컨텍스트의 관점에서 살펴본다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다.const x = 1;function foo(){ const x = 10; bar();} function bar(){ console.log(x);}..
실행 컨텍스트는 자바스크립트의 동작 원리를 담고있는데, 바르게 이해한다면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 23.1 소스코드의 타입소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다른다.전역 코드전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야한다. 그리고 var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 한다. 이를 위해 전역 코드가 평가되면 전역 실행 컨텍스트가 생성..
function Circle(radious){ //this는 생성자 함수가 생성할 인스턴스를 가리킨다. this.radius = radious; } Circle.prototype.getDiameter = function(){ //this는 생성자 함수가 생성할 인스턴스를 가리킨다. return 2*this.radius; } const circle = new Circle(5);22.1 this 키워드19장 "객체지향 프로그래밍"에서 살펴보았듯 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한..
21.1 자바스크립트 객체의 분류자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다.표준 빌트인 객체ECMAScript 사양에 정의된 객체로, 애플리케이션 전역의 공통 기능 제공자바스크립트 실행 환경(node.js, 브라우저)와 관계없이 언제나 사용 가능표준 빌트인 객체는 전역 객체의 프로퍼티로 제공되어 별도의 선언 없이 전역 변수처럼 언제나 참조 가능호스트 객체ECMAScipt 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체.브라우저 환경에서는 DOM,BOM,Canvas,XMLHttpRequest,fetch,SVG,WebStorage 등 클라이언트 사이드 Web API를 호스트 객체로 제공하고, Node.js 환경에서는 고유의 API를 호스트 객체로 제공한다..
function foo(){ x = 10; }foo(); console.log(x);//???foo 함수 내에서 선언하지 않은 변수 x에 10을 할당했다. x 변수를 찾아야만 x에 값을 할당할 수 있기 때문에 자바스크립트 엔진은 x 변수가 어디에서 선언되었는지 스코프 체인을 통해 검색하기 시작한다. 먼저 foo 함수 내에서 x 변수의 선언을 검색, 검색 실패, 상위스코프(이 예제에선 전역)에서 검색 순으로 검색 과정이 진행되는데 마지막 과정에서 전역 스코프에 x가 선언되어 있지 않기 때문에 RefereneceError가 발생할 것 같지만 암묵적으로 x는 전역 객체에 동적 생성되어있으므로 검색에 성공한다. 이러한 과정은 사실 오류를 발생시키는 원인이 될 가능성이 크기 때문에 반드시 var, let, con..