모던 자바스크립트 Deep Dive
-
18장 함수와 일급 객체 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 18. 13:49
일급 객체 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. - 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. - 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. - 함수의 매개변수에 전달할 수 있다. - 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체다. // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에서 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --nu..
-
17장 생성자 함수에 의한 객체 생성 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 16. 19:56
Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; console.log(person); // {name: "Lee"} 생성자 함수(constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다. 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다. 반드시 Object ..
-
16장 프로퍼티 어트리뷰트 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 14. 21:41
프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태란 프로퍼티의 값(value), 값의 갱신 가능 여부(wrtable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)를 말한다. 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]] 이다. 따라서 프로퍼티 어트리뷰트에 직접 접근 할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수는 있다. const person ..
-
15장 let, const 키워드와 블록 레벨 스코프 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 12. 11:44
var 키워드로 선언한 변수의 문제점 ES5까지 변수를 선언할 수 있는 유일한 방법은 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장 전역 변수의 문제점 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 10. 18:55
변수의 생명 주기 지역 변수의 생명 주기 var x = 'global'; function foo() { console.log(x); // undefined var x= 'local'; } foo(); console.log(x); // global 위 예제의 foo 함수를 호출하면 함수 몸체의 다른 문들이 순차적으로 실행되기 이전에 x 변수의 선언문이 자바스크립트 엔진에 의해 가장 먼저 실행되어 x 변수가 선언되고 undefined로 초기화된다. 그 후, 함수 몸체를 구성하는 문들이 순차적으로 실행되기 시작하고 변수 할당문이 실행되면 x 변수에 값이 할당된다. 그리고 함수가 종료되면 x 변수도 소멸되어 생명 주기가 종료된다. 즉, 지역 변수의 생명 주기는 함수의 생명주기와 일치한다. 이처럼 호이스팅은 스코..
-
13장 스코프 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 8. 17:58
스코프란? 모든 식별자 (변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다. 이를 스코프라고 한다. 우리는 컴퓨터를 사용할 때 하나의 파일 이름만 사용하지 않는다. 식별자인 파일 이름을 중복해서 사용할 수 있는 이유는 폴더(디렉터리)라는 개념이 있기 때문이다. 만약 폴더가 없다면 파일 이름은 유일해야 한다. 이와 마찬가지로 프로그래밍 언어에서는 스코프(유효 범위)를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 한다. 스코프 내에서는 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다. 스코프의 종류 구분 설명 스코프 변수 전역 코드의 가장 바깥 영역 전역 스코프..
-
12장 함수 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 6. 13:46
함수 리터럴 자바스크립트의 함수는 객체 타입의 값이다. 따라서 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수는 객체다. // 변수에 함수 리터럴을 할당 var f = function add (x, y) { return x + y; } 함수 리터럴의 구성 요소는 다음과 같다. 구성 요소 설명 함수 이름 - 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다. - 함수 이름은 생략할 수 있다. 이름이 있는 함수를 기명 함수, 이름이 없는 함수를 무명/익명 함수라 한다. 매개변수 목록 - 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당된다. 즉, 매개변수 목록은 순서에 의미가 있다. - 매개변수는 함수 몸체 내에서 변수와..
-
11장 원시 값과 객체의 비교 | 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 2023. 11. 4. 14:30
자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입)은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다. - 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값(mutable value)이다. - 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. - 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값..