[모던 자바스크립트] 10장. 객체 리터럴

1.  객체란 무엇인가?

: 간단히 말해, 원시 값을 제외한 나머지 값을 말한다.

 

원시 타입의 값은 변경 불가능한 값(immutable value)이지만,
객체 타입의 값은 변경 가능한 값(mutable value)이다.

 

객체는 0개 이상의 프로퍼티(키와 값)로 구성된 집합을 말한다.

이때, 함수도  프로퍼티 값으로 사용할 수 있는데, 일반 함수와 구분하기 위해 메서드(method)라고 부른다.

 

// 2개의 프로퍼티와 1개의 메서드로 구성된 객체 예시.

let person = {
	name: 'garden',	// 키: name, 값: 'garden'
	age: 30		// 키: age, 값: 30	
	increase: function () {
    	this.num++;
    }
};

 

2.  객체를 생성하는 방법

 

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스

 

 가장 간단한 방법인, '객체 리터럴' 을 사용하는 방법부터 알아보자. (함수는 나중에...)

cf)  [ 리터럴(literal): 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법]

 

객체 리터럴 : 중괄호 {...} 내에 0개 이상의 프로퍼티를 정의한다.

 

3. 프로퍼티의 구성 요소

프로퍼티는 '키'와 '값'으로 구성된다.

 

• 프로퍼티 키: 프로퍼티 값에 접근할 수 있는 식별자 역할을 한다.
  빈 문자열을 포함하는 모든 문자열 or 심벌 값을 키 값으로 사용할 수 있다.
  
  이 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
  [ ex) 숫자 리터럴을 사용하면 따옴표가 붙진 않지만, 내부적으로 문자열로 변환된다.]

++

프로퍼티 키를 동적으로도 생성 할 수 있다. 이 때 키의 표현식을 대괄호로 묶으면 된다. 

let obj={}
let key = 'name';

obj[key] = 'garden';

console.log(obj);	// {name: 'garden'}



4. 프로퍼티에 접근하는 방법

1.  마침표 표기법
2.  대괄호 표기법
   - 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야한다.( 그렇지 않으면 식별자로 해석한다.)
   - 프로퍼티 키가 네이밍 규칙을 준수하지 않은 경우 반드시 대괄호 표기법 사용.
   - 프로퍼티 키가 숫자일 경우 따옴표 생략이 가능하다.

let person = {

name: 'garden'

1: 10

}



console.log(person.name) // garden

console.log(person['name']) // garden

console.log(person[1]) // 10

console.log(person['1']) // 10

 

5. 프로퍼티의 값 갱신, 동적 생성, 삭제

 

let person = {
	name: 'garden'
}

// 프로퍼티 값 갱신
person.name = 'Kim'
console.log(person) // {name: 'Kim'}

// 프로퍼티 추가
person.age = 30;
console.log(person) // {name: 'Kim', age: 30}

// 프로퍼티 삭제
delete person.age
console.log(person) //{name:'Kim'}

 

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

 

 6-1.  프로퍼티 축약 표현

: 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키의 이름이 동일 할때, 프로퍼티 키를 생략 할 수 있다.

➡️ 프로퍼티 키는 변수 이름으로 자동 생성된다.

let x = 1, y = 2;
const obj = { x, y }; // 축약 표현

// 아래와 같은 객체로 생성된 것이다.
const obj = {
	x: x,
	y: y
}

 

 6-2.  계산된 프로퍼티 이름

ES5에서는 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 객체 리터럴 외부에서 대괄호 표기법을 사용했다면,

ES6에서는 객체 리터럴 내부에서도 키를 동적 생성 할 수 있다.

const class = 'class'
let i = 0;

const classObj = {
    [`${class}-${++i}`]: i,
    [`${class}-${++i}`]: i,
    [`${class}-${++i}`]: i,
}

console.log(classObj) // {class-1:1,class-2:2,class-3:3}

 

 6-3.  메서드 축약 표현

ES6에서는 function 키워드를 생략한 축약 표현을 사용할 수 있다.

하지만 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다. (이것은 아직 공부를 안함...26장에서 살펴볼 예정)

 

// ES5
let person = {
	name: 'garden',
	increase: function () {
    this.num++;
    }
};

// ES6
let person = {
	name: 'garden',
	increase() {
    	this.num++;
    }
};

 

 

출처: 모던 자바 스크립트