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

 

1. 객체와 객체 리터럴

객체란 중괄호({})로 감싸져있으며 그 안에 '프로퍼티 키: 프로퍼티 값' 으로 구성되는 프로퍼티의 집합.

변경 불가능한, 단 하나의 값만 나타내는 원시형과는 달리 객체는 변경 가능하며 다양한 타입의 값을 담을 수 있다.

 

리터럴이란 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 의미한다.

따라서 객체 리터럴이란 객체를 생성하기 위한 표기법을 의미한다.

 

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

// 1. 객체 리터럴 문법 
let user = {};

// 2. 참고로, 객체 생성자(new)를 이용해서 객체를 만드는 방법도 있다.
let user = new Object();

 

2. 프로퍼티 키

(프로퍼티)키 === (프로퍼티)이름 === 식별자

 

프로퍼티 키에는 빈 문자열을 포함하는 모든 문자열 혹은 심벌만 가능하다.

단, 식별자 네이밍 규칙을 따르지 않는 프로퍼티 키의 경우 따옴표로 감싸주어야한다.

const person = {
    firstName: 'Gyu-ri', // 식별자 규칙을 준수하여 따옴표 생략 가능
    'last-name': 'Lee' // 식별자 규칙을 준수하지않아 따옴표 필수
}

 

만약 식별자 규칙을 준수하지 않고 + 따옴표도 사용하지않으면 문법 에러를 발생시킨다.

const person = {
    firstName: 'Gyu-ri',
    last-name: 'Kim' // SyntaxError: Unexpected token ...
}

 

프로퍼티 키에 문자열이나 심벌 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.

const numbers = {
    0: 1, 
    1: 2,
    2: 3
};

console.log(numbers); // {0: 1, 1: 2, 2: 3} 따옴표는 붙지않지만 내부적으로 문자열로 변환됨

 

빈 문자열 혹은 var, function과 같은 예약어는 프로퍼티 키로 사용해도 에러는 발생하지 않지만,

예상치 못한 에러가 발생할 확률이 있으므로 비추천

 

3. 프로퍼티 값

(프로퍼티)값 === value

프로퍼티 값에는 모든 자료형이 허용된다.

프로퍼티 값으로 함수가 할당되는 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

let user = {
    name: '반원재', // 프로퍼티(키: 'name', 값: '반원재') 
    age: 30,
    sayHi: function() { // 메소드
	    console.log('원재야 안녕');
    }
}

 

4. 프로퍼티 접근 방법

프로퍼티에 접근하는 방법은 마침표 표기법(.)과 대괄호 표기법([])이 있다. 

대괄호 표기법을 사용하는 경우, 대괄호 안에 들어가는 프로퍼티 키는 반드시 따옴표로 감싸진 문자열이어야 한다.

단, 프로퍼티 키가 숫자로 이루어진 문자열인 경우에는 따옴표 생략이 가능하다.

 

프로퍼티 키가 네이밍 규칙을 준수하는 경우에는 두 가지 표기법을 사용할 수 있지만,

네이밍 규칙을 준수하지 않는 경우에는 대괄호 표기법만 사용 가능하다.

만약, 네이밍 규칙을 준수하지 않는 프로퍼티 키를 따옴표로 감싸주지 않으면

자바스크립트 엔진은 식별자로 해석하여 ReferenceError를 발생시킨다.

const user = {
    'last-name': '반',
    1: 30
}

user.'last-name'; // (X) SyntaxError: Unexpected string
user.last-name; // (X) NaN 혹은 ReferenceError: name is not defined

user[last-name]; // (X) ReferenceError: last is not defined
user['last-name']; // (O) 반

// 프로퍼티 키가 숫자로 이뤄진 문자열의 경우 따옴표 생략 가능
user.1; // (X) SyntaxError: Unexpected number
user.'1'; // (X) SyntaxError: Unexpected string
user[1]; // (O) 30
user['1']; // (O) 30

 

5. 프로퍼티 생성/값 갱신/삭제

const person = {
	name: '이',
}

/*
const로 선언된 객체는 수정될 수 있다.
const는 객체(person)를 고정하는 것 뿐, 그 내용은 고정하지 않는다.
*/

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

console.log(person.name); // 반

// 객체 person에 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성된다.
person.age = 30;
person['last-name'] = '원재';

console.log(person); // {name: '반', age: 30, 'last-name': '원재}

// delete 연산자로 객체의 프로퍼티 삭제 가능
delete person['last-name'];

// 존재하지 않는 프로퍼티에 접근하는 경우 에러 없이 무시된다.
delete person.adress; 

console.log(person); // {name: '반', age: 30}

 

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

1) 프로퍼티의 축약 표현

ES6에서는 프로퍼티 키와 변수명이 동일할 경우 프로퍼티 키를 생략가능하다. 

let x = 1, y = 2;

// ES5
let obj = {
    x: x,
    y: y
};

console.log(obj); // {x: 1, y: 2}

// ES6
const obj2 = {
    x,
    y  // y: y와 동일
}

console.log(obj2); // {x: 1, y: 2}


// 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능
const obj3 = {
  x,  // x: x와 동일
  y: 30
};

console.log(obj3); // {x: 1, y: 30}

 

2) 메소드의 축약 표현

ES5에서는 프로퍼티 값으로 함수를 할당했다면, ES6에서는 function 키워드를 생략한 축약 표현 사용 가능하다.

단, 이렇게 축약 표현으로 정의한 메소드는 프로퍼티에 할당한 함수와는 다르게 작동한다.(super의 사용가능 여부 등)

let obj = {
    name: 'Lee',
    sayHello: function() {
    	console.log('안녕 원재야');
    },
    // ES6에서는 메서드 정의 시, function키워드 생략 가능
    sayHello() {
    	console.log('축약해서 사용가능');
    }
};

obj.sayHello(); // '안녕 원재야'

obj.implied(); // '축약해서 사용가능'

 

3) 계산된 프로퍼티 이름

ES5에서도 변수 등을 이용해서 프로퍼티 키를 좀 더 동적으로 생성이 가능했다.

단, 객체 리터럴의 외부에서 대괄호 표기법을 사용해야 했다.

let prefix = 'prop';
let i = 0;

let obj = {};

// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
obj[prefix + '-' + ++i] = i;

console.log(obj); // {prop-1: 1}

 

 

ES6부턴 객체 리터럴의 내부에서 바로 프로퍼티 키의 동적 생성이 가능하다.

const prefix = 'prop';
let i = 0;

// 객체 리터럴 내부에서 바로 프로퍼티 키의 동적 생성 가능
const obj = {
    [`${prefix}=${++i}`] = i,
    [`${prefix}=${++i}`] = i,
};

console.log(obj); // {prop-1: 1, prop-2: 2}

  

 

Ref.

https://ko.javascript.info/object

객체