용용it

객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하다. 하지만 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 따라서 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다. const circle1 = { redius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle1.getDiameter()); // 10 const circle2 = { radius: 10, getDiameter(){ return 2 * this.radius; } }; console.log(circle2.getDiameter()); // 20 객체는 프로퍼티를 통해 객체 고유의 상태를..

앞에서 객체 리터럴에 의한 객체 생성 방식을 정리했었는데. 객체 리터럴에 의한 객체 생성 방식은 가장 일반적이고 간단한 객체 생성 방식이다. 객체는 객체 리터럴 이외에도 다양한 방법으로 생성할 수 있다, 이번에는 다양한 객체 생성 방식 중에서 생성자 함수를 사용하여 객체를 생성해보자. 그리고 객체 리터럴을 사용하는 객체를 생성하는 방식과 생성자 함수를 사용하여 객체를 생성하는 방식과의 장단점을 알아보자. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.nam..

객체는 변경 가능한 값이므로 재할당 없이 변경할 수 있다. 즉, 프로퍼티를 추가하거나 삭제할 수 있고, 프로퍼티 값을 갱신할 수 있으며 Object.defineProperty 또는 Object.defineproperties 메서드를 사용하여 프로퍼티 어트리뷰트를 재정할 수도 있다. 구분 메서드 프로퍼티 추가 프로퍼티 삭제 프로퍼티 값 읽기 프로퍼티 값 쓰기 프로퍼티 어트리뷰트 재정의 객체 확장 금지 Object.preventExtensions X O O O O 객체 밀봉 Object.seal X X O O X 객체 동결 Object.freeze X X O X X 객체 확장 금지 Object.preventExtensions 메서드는 객체의 확장을 금지한다. 객체 확장 금지란 프로퍼티 추가 금지를 의미한다...

프로퍼티 정의란 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것을 말한다. 예를 들어, 프로퍼티 값을 갱신 가능하도록 할 것인지, 프로퍼티를 열거 가능하도록 할 것인지, 프로퍼티를 재정의 가능하도록 할 것인지 정의할 수 있다. 이를 통해 객체의 프로퍼티가 어떻게 동작해야 하는지를 명확히 정의할 수 있다. Object.dfineProperty 메서드를 사용하면 프로퍼티의 어트리뷰트를 정의할 수 있다. 인수로는 객체의 참조와 데이터 프로퍼티의 키인 문자열, 프로퍼티 디스크립터 객체를 전달한다. const person = {}; // 데이터 프로퍼티 정의 Object.defineProperty(person, 'fistName', { ..

프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다. 데이터 프로퍼티(data property) 키와 값으로 구성된 일반적인 프로퍼티다. 지금까지 살펴본 모든 프로퍼티는 데이터 프로퍼티다. 접근자 프로퍼티(accessor property) 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티다. 데이터 프로퍼티 데이터 프로퍼티는 다음과 같은 프로퍼티 어트리뷰트를 갖는다. 이 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다. 프로퍼티 어트리뷰트 프로퍼티 디스크립터 객체의 프로퍼티 설명 [[Value]] value 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값이다. 프로퍼티 키를 통해 프로..

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 여기서 프로퍼티의 상태란 1. 프로퍼티의 값 (value) 2. 값의 갱신 가능 여부 (writable) 3. 열거 가능 여부 (enumerable) 4. 재정의 가능 여부를 말한다. (configurable) 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부슬롯 [[Value]] , [[Writable]], [[Enumerable]], [[Configurable]]이다. 따라서 프로퍼티 어트리뷰트에 직접 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수 는 있다. const person = { nam: ..

프로퍼티 어트리 뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드의 개념을 알아야한다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAscript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호 ([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 즉, 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는..

const 키워드는 상수를 선언하기 위해 사용한다. 하지만 반드시 상수만을 위해 사용하지 않는다. 이는 나중에 설명하고. const 키워드의 특징은 let 키워드와 대부분 동일하기 때문에 let 키워드와 다른 점을 살펴보자. 선언과 초기화 const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다. const foo = 1; 그렇지 않으면 다음과 같이 문법 에러가 발생한다. const foo; // SyntaxError: Missing initializer in const declaration const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작한다. { // 변수 호이스팅이 발생하지 않는 것처럼 동..

전 글에서 알아본 var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 선언 키워드인 let과 const를 도입했다. var 키워드와의 차이점을 중심으로 let 키워드를 정리해보자. 변수 중복 선언 금지 var 키워드로 이름이 동일한 변수를 중복 선언하면 아무런 에러가 발생하지 않는다. 이때 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저선언된 변수 값이 재할당되어 변경되는 부작용이 발생한다. 하지만 let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다. var foo = 123; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var foo = 4..

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었지만 var 키워드로 선언된 변수에는 다음과 같은 특징이 있다. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화 문이 없는 변수 선언문은 무시된다. console.log(x); // 100 console.log(y); // 1 이처럼 var 키워드로 선언한 변수를 중복 선언하면 초기화문(변수 선언과 동시에 초기값을 할당하는 문) 유무에 따라 다르게 동..