객체 리터럴

객체 리터럴

객체(Object)

• 객체(object)란, 0개 이상의 프로퍼티(property) 및 메서드(method)로 구성된 집합임.
  • 프로퍼티 => 키(key)와 값(value)으로 구성됨.
    • 프로퍼티는 객체의 상태를 나타내는 값(data)임.
    • 보통은 데이터 구조와 연관된 속성을 나타냄.
    • 프로퍼티 키로는 문자열과 심벌 값만 사용할 수 있는 반면, 프로퍼티 값으로는 모든 값이 올 수 있음.
  • 메서드
    • 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부름.
    • 메서드는 프로퍼티(=상태 데이터)를 참조하고 조작할 수 있는 동작임.
• 객체는 이처럼 상태와 동작을 하나의 단위로 구조화할 수 있어 유용함.
• 객체들의 집합으로 프로그래밍하려는 프로그래밍 패러다임을 객체 지향 프로그래밍이라고 함.

---

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

• 자바스크립트에서 객체를 만드는 방법에는 여러가지가 있음.
  • 객체 리터럴 => 가장 일반적
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메서드
  • 클래스(ES6 도입)
• 객체 리터럴로 객체를 생성하는 방법
  • 중괄호 {} 내에 0개 이상의 프로퍼티를 정의
    • 이때 중괄호는 코드 블록이 아님. => 즉, 스코프를 형성하지 않음!
  • 변수에 할당이 이루어지는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성함.

---

프로퍼티 접근

• 객체의 프로퍼티에 접근하는 방법은 두 가지가 있음.
  1. 마침표 표기법(dot notation)
     • 마침표 프로퍼티 접근 연산자 . 사용
     • 표현식.식별자
  2. 대괄호 표기법(bracket notation)
     • 대괄호 프로퍼티 접근 연산자 [] 사용
     • 표현식[표현식]
• 표현식을 이용하여 프로퍼티에 접근하려고 하는 경우, 마침표 표기법은 사용할 수 없지만 대괄호 표기법은 사용할 수 있음.
  • 대괄호 표기법을 사용하면 대괄호 내의 표현식을 먼저 평가하게 됨.
  • 이때 표현식은 문자열로 타입 변환할 수 있는 값으로 평가되어야 함!
• 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환함.
  • 즉, RefenceError는 발생하지 않음.

---

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

• 존재하지 않는 프로퍼티에 값을 할당하면, 해당 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당됨.
• delete 연산자를 사용하여 객체의 프로퍼티를 삭제할 수 있는데, 이때 만약 존재하지 않는 프로퍼티를 삭제하려고 하면 아무런 에러 없이 그냥 무시됨.
  • 사용 방법

const cafe = {
  name: 'Starbucks',
  city: 'Seoul'
};

delete cafe.city;
console.log(cafe);
// { name: 'Starbucks' }

// 존재하지 않는 프로퍼티 삭제 → 에러 없이 무시됨.
delete cafe.age;
console.log(cafe);
// { name: 'Starbucks' }

---

객체 리터럴 확장 기능(ES6)

프로퍼티 축약 표현(property shorthand)

• ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티가 동일한 이름을 갖는다면 프로퍼티 키를 생략할 수 있음.
• 이때 프로퍼티 키는 변수 이름과 동일한 이름으로 자동 생성됨.

계산된 프로퍼티 이름(computed property name)

• 문자열 또는 표현식을 사용하여 프로퍼티 키를 동적으로 생성할 수도 있는데, 만약 표현식으로 생성하려는 경우에는 반드시 대괄호[]로 묶어줘야 함. => "계산된 프로퍼티 이름(computed property name)"
• ES5 vs ES6

const cafe1 = {
  name: 'Starbucks',
  city: 'Seoul'
};

// ES5
cafe1['i' + 'd'] = 1;

console.log(cafe1);
// { name: 'Starbucks', city: 'Seoul', id: 1 }

// ES6
const cafe2 = {
  name: 'Tim Hortons',
  city: 'Toronto',
  ['i' + 'd']: 2
};

console.log(cafe2);
// { name: 'Tim Hortons', city: 'Toronto', id: 2 }

• ES5 => 객체 리터럴 외부에서만 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성 가능
• ES6 => 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성 가능

메서드 축약 표현

// ES5
const cafe1 = {
  name: 'Starbucks',
  city: 'Seoul',
  drink: function() {
    return `"I love ${this.name} coffee."`;
  }
};

console.log(cafe1.drink());
// "I love Starbucks coffee."

// ES6
const cafe2 = {
  name: 'Tim Hortons',
  city: 'Toronto',
  drink() {
    return `"I love ${this.name} coffee."`;
  }
};

console.log(cafe2.drink());
// "I love Tim Hortons coffee."

• ES6에서는 메서드를 정의할 때, function 키워드를 생략한 축약 표현을 사용할 수 있음.
  • 메서드 축약 표현은 ① 객체 리터럴이나 ② 클래스 안에서만 사용 가능
• 이렇게 메서드 축약 표현으로 정의한 메서드(이하 ES6 메서드)는 프로퍼티에 할당한 함수와 다르게 동작함.
  • 둘의 차이점에 대해 대략적으로 정리해보면 아래와 같음. (자세한 내용은 추후 정리할 예정)
    1. ES6 메서드는 내부 슬롯 [[HomeObject]]를 갖는다.
       • 이 때문에 super 키워드를 ES6 메서드 내에서만 사용할 수 있는 것임.
       • 내부 슬롯 [[HomeObject]]는 자신을 바인딩한 객체를 가리킴.
    2. ES6 메서드는 non-constructor이다.
       • 따라서 ES6 메서드는 인스턴스를 생성할 수 없음.
       • 표준 빌트인 객체가 제공하는 프로토타입 메서드와 정적 메서드도 모두 non-constructor임.

 

---

참고문헌

이웅모 (2020). 모던 자바스크립트 Deep Dive. 위키북스