모던 자바스크립트 Deep Dive 10장

객체 리터럴

---

1. 객체란?

원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.

원시 타입은 불변하지만, 객체는 변경 가능하다.

객체는 프로퍼티와 메서드로 구성된 집합체이다.

 

 

2. 객체 리터럴에 의한 객체 생성

다른 언어에서 객체를 생성하기 위해선 new를 사용하지만

자바스크립트에서는 new 뿐만 아니라 리터럴 방법으로 객체를 생성할 수 있다.

 

 

3. 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

프로퍼티 키는 식별자 네이밍 규칙을 준수하는 이름은 따옴표를 생략할 수 있다.

반면 네이밍 규칙을 준수하지 않는 이름에는 반드시 따옴표를 사용해야 한다.

var person = {
	firstName: 'hong',
    'last-name': 'Lee'
}

 

 

프로퍼티 키를 동작으로 생성할 수 있다.

var obj = {};
obj['hello'] = 'world'

 

 

프로퍼티 키로 빈 문자열도 가능하다.

var foo = {
	'' : ''
}

 

 

프로퍼티 키로 숫자도 가능하지만 내부적으로 암묵적 타입 변환을 통해 문자열이 된다.

var foo = {
	0 : 1,
}

 

 

var, function과 같은 예약어도 사용 가능하다. 하지만 권장하지 않는다.

var foo = {
  var: '',
  function: ''
};

console.log(foo);

 

 

이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

var foo = {
  name: 'Lee',
  name: 'Kim'
};

console.log(foo); // {name: "Kim"}

 

 

4. 메서드

메서드는 객체에 묶여있는 함수를 메서드라 한다.

 

 

5. 프로퍼티 접근

• 마침표 프로퍼티 접근 연산자. 를 사용하는 마침표 표기법
• 대괄호 프로퍼티 접근 연산자[] 를 사용하는 대괄호 표기법

var person = {
  name: 'Lee'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee

 

대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표를 감싸야 한다.

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

 

즉, 프로퍼티 키가 식별자 네이밍 규칙에 맞지 않는 것은 반드시 대괄호 표기법을 사용해야 한다.

나머지는 마침표 프로퍼티 연산자로 사용해도 무방하다.

 

6. 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 된다.

var person = {
  name: 'Lee'
};

// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';

 

 

7. 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가된다.

대괄호 연산자로도 프로퍼티를 동적으로 추가할 수 있다.

var person = {
  name: 'Lee'
};

person.age = 20;


const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
};

 

 

8. 프로퍼티 삭제

delete 연산자를 활용해 객체의  프로퍼티를 삭제한다.

var person = {
  name: 'Lee'
};

person.age = 20;

delete person.age;