ki7348

[27.8] 배열 메서드 배열 메서드는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요하다. 배열에는 원본 배열(배열 메서드)를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체)을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다. const arr = [1]; // push 메서드는 원본 배열(arr)을 직접 변경한다. arr.push(2); console.log(arr); // [1,2] // concat 메서드는 원본 배열(arr)을 직접 변경하지 않고 새로운 배열을 생성하여 반환한다. const result = arr.concat(3); console.log(arr); // [1,2] console.log(result..

[27.1] 배열이란? const arr = ['apple', 'banana', 'orange']; 배열이 가지고 있는 값을 요소라고 부른다. 자바스크립트의 모든 값은 요소가 될 수 잇다. 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다. 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다. arr.length // ->3 배열은 인덱스와 length 프로퍼티를 갖기 때문에 for 문을 통해 순차적으로 요소에 접근할 수 있다. // 배열의 순회 for ( let i = 0; i < arr.length; i++) { console.lo..

[26.1] 함수의 구분 ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다. var foo = function ( ) { return 1; }; // 일반적인 함수로서 호출 foo( ); // ->1 // 생성자 함수로서 호출 new foo ( ); // -> foo { } // 메서드로서 호출 var obj = { foo: foo }; obj.foo( ); // -> 1 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 다시 말해, ES6 이전의 모든 함수는 callable이면서 constructor다. ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분했다. ES6 함수의 구분 constructor prototype ..

[25.8] 상속에 의한 클래스 확장 클래스 상속과 생성자 함수 상속 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념이지만 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다. 클래스는 상속을 통해 기존 클래스를 확장할 수 있는 문법이 기본적으로 제공되지만 생성자 함수는 그렇지 않다. 상속에 의한 클래스 확장은 코드 재사용 관점에서 매우 유용하다. class Animal { constructor(age, weight) { this.age = age; this.weight = weight; } eat( ) { return 'eat'; } move( ) { return 'move'; } } // 상속을 통해 Animal 클래스를 확장한 ..

[25.6] 클래스의 인스턴스 생성과정 new 연산자와 함께 클래스를 호출하면 생성자 함수와 마찬가지로 클래스의 내부 메서드 [[Construct]]가 호출된다. 인스턴스는 다음의 과정을 거쳐 생성된다. 인스턴스 생성과 this 바인딩 new 연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 암묵적으로 빈 객체가 생성된다. 이 빈 객체가 바로 (아직 완성되지는 않았지만) 클래스가 생성한 인스턴스다. 이때 클래스가 생성한 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. 따라서 constructor 내부의 this 클래스가 생성한 인스턴스를 가리킨다. 인스턴스 ..

[25.1] 클래스는 프로토타입의 문법적 설탕인가? 클래스는 생성자 함수보다 엄격하며 생성하 함수에서는 제공하지 않는 기능도 제공한다. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다. 클래스 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다. 하..

[24.4] 클로저의 활용 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 클로저를 사용해서 함수가 호출될 때마다 호출된 횟수를 출력하는 카운터를 만드는 예제 // 카운트 상태 변경 함수 const increase = ( function ( ) { // 카운트 상태 변수 let num = 0; // 클로저 return function ( ) { // 카운트 상태를 1만큼 증가시킨다. return ++num; }; }( )); console.log(increase( )); // 1 console.log(increase( )); // 2 console.log(increas..

[24.1] 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않는다. 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 이것이 바로 렉시컬 스코프다. [24.2] 함수 객체의 내부 슬롯 [[Environment]] 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다. 함수 정의가 평가되어 함수 객체를 생성할 때 자신이 정의된 환경(위치)에 ..

[23.6] 실행 컨텍스트의 생성과 식별자 검색 과정 전역 객체 생성 전역 객체는 전역 코드가 평가되기 이전에 생성된다. 이때 전역 객체에는 빌트인 전역 프로퍼티와 빌트인 전역 함수, 그리고 표준 빌트인 객체가 추가되며 동작 환경(클라이언트 사이드 또는 서버 사이드)에 따라 클라이언트 사이드 Web API 또는 특정 환경을 위한 호스트 객체를 포함한다. 전역 코드 평가 소스코드가 로드되면 자바스크립트 엔진은 전역 코드를 평가한다. 1. 전역 실행 컨텍스트 생성 먼저 비어있는 전역 실행 컨텍스트를 생성하여 실행 컨텍스트 스택에 푸시한다. 2. 전역 렉시컬 환경 생성 전역 렉시컬 환경을 생성하고 전역 실행 컨텍스트에 바인딩한다. 2.1. 전역 환경 레코드 생성 기존의 var 키워드로 선언한 전역 변수와 ES..

[23.1] 소스코드의 타입 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드 함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다. eval 코드 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다. 모듈 코드 모듈 내부에 존재하는 소스코드를 말한다. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다. 소스코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다. [23.2] 소스코드의 평가와 실행 모든..