Search

객체 리터럴

10.1 객체란?

JS는 객체 기반의 프로그래밍 언어이며, “모든 것”은 객체다. 원시값은 변경 불가능하지만 객체는 가능하다.
0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 키와 값으로 구성된다.
var person = { name: "Lee" // 프로퍼티 age(key): 20(value) // 프로퍼티 a: function(){} // 값이 함수일 경우 메서드 }
JavaScript
복사

10.2 객체 리터럴에 의한 객체 생성

객체 리터럴 // var a = { … }
Object 생성자 함수
생성자 함수
Object.create 메서드
클래스

10.3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.
프로퍼티 키 : 빈 문자열을 포함한 모든 문자열 또는 심벌 값
프로퍼티 값 : JS에서 사용가능한 모든 값
식별자 네이밍 규칙을 사용하지 않을 시 따옴표를 사용해야 하며, 포현식의 경우에는 대괄호를 사용해야 한다.
또한 프로퍼티 키의 값에 문자열이나 심벌 이외의 값은 암묵적 타입변환이 일어나 문자열이 된다.

10.4 메서드

JS의 함수는 객체이며, 값으로 취급할 수 있어 프로퍼티 값으로 사용 가능하다. 이를 메서드라고 한다.

10.5 프로퍼티 접근

마침표 표기법 // 식별자 네이밍 규칙을 준수할 경우에만 사용 가능
대괄호 표기법

10.6 프로퍼티 값 갱신

이미 존재하는 값에 값을 할당 시 갱신된다

10.7 프로퍼티 동적 생성

없는 값에 할당하면 동적으로 생성된다.

10.8 프로퍼티 삭제

delete연산자를 통해서 삭제할 수 있으며, 존재하지 않을 시 무시된다.

10.9 ES6에서 추가된 객체 리터럴의 확장 기능

10.9.1 프로퍼티 축약 표현

let x = 1, y = 2; const obj = { x, y };
JavaScript
복사

10.9.2 계산된 프로퍼티 이름

연산을 통해 프로퍼티를 호출 할 수도있으며, 동적으로 생성할 수도 있다.
//ES5 var prefix = 'prop'; var i = 0; var obj = {}; obj[prefix + '-' + ++i] = i; // 만약 값을 추가해주지 않는 다면 생성 안된다! obj[prefix + '-' + ++i] = i; obj[prefix + '-' + ++i] = i; console.log(obj) // {prop-1: 1, prop-2: 2, prop-3: 3}
JavaScript
복사
// ES5 var prefix = 'prop'; var i = 0; var obj = {}; obj[prefix + '-' + ++i]; // 만약 값을 추가해주지 않는 다면 생성 안된다! obj[prefix + '-' + ++i]; obj[prefix + '-' + ++i]; console.log(obj) // {}
JavaScript
복사
//ES6 const prefix = 'props'; let i = 0; const obj = { [`${prefix}-${++}`]: i, [`${prefix}-${++}`]: i, [`${prefix}-${++}`]: i }; console.log(obj) // {prop-1: 1, prop-2: 2, prop-3: 3}
JavaScript
복사

10.9.3 메서드 축약 표현

// ES6 const obj = { sayHi() { } };
JavaScript
복사