객체 리터럴

객체 리터럴

객체란

• 0개 이상의 프로퍼티로 구성된 집합. 프로퍼티는 키와 값으로 구성됨
• js는 객체 기반의 프로그래밍 언어, 원시 값을 제외한 나머지 값들은 모두 객체
• 원시 타입 :
  • 하나의 값을 가짐
  • 변경 불가능한 값(immutable value)
• 객체 :
  • 다양한 타입의 값을 가짐
  • 변경 가능한 값(mutable value)
• 모든 값은 프로퍼티 값이 될 수 있음
• js의 함수는 값으로 취급할 수 있는 일급 객체임
• 프로퍼티 값으로 함수가 올 경우 일반 함수와 구분하기 위해 메서드라고 부름

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

• 클래스 기반 객체지향 언어(C++, java) :
  • 클래스를 사전에 정의, 필요한 시점에 new 연산자와 함께 생성자(constructor)를 호출하여 인스턴스를 생성하는 방식으로 객체 생성
  • 인스턴스 : 클래스에 의해 생성되어 메모리에 저장된 실체. 객체는 인스턴스와 클래스를 포함하는 개념
• 프로토타입 기반 객체지향 언어 :
  • 다양한 객체 생성 방법 지원 - 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6)
  • 일반적으로 객체 리터럴을 사용
• 객체 리터럴의 중괄호는 코드 블록을 의미하지 않으므로 자체 종결성이 없는, 값으로 평가되는 표현식이기 때문에 끝에 세미콜론을 붙여줘야 함

프로퍼티

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
  • 일반적으로 문자열을 사용
  • 식별자 네이밍규칙을 따르는 문자열은 따옴표로 묶지 않아도 됨
  • 문자열이나 심벌 값 외의 값 사용 시 문자열로 암묵적 타입 변환 됨
  • 키를 동적으로 생성할 경우 키로 사용할 표현식을 대괄호로 묶어서 사용
  • 키를 중복 선언 시 에러가 발생하지 않고 덮어 쓰여짐에 주의
• 프로퍼티 값 : js에서 사용할 수 있는 모든 값

프로퍼티 접근

• 마침표 표기법 혹은 대괄호 표기법
• 대괄호 표기법 사용 시 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 함. 그 외에는 식별자로 해석함
• 객체에 존재하지 않는 프로퍼티에 접근 시 에러가 아닌 undefined를 반환함에 주의

const person = {
    'last-name' : 'Lee'
};

person.last-name;
// 브라우저 환경: NaN (person.last까지 undefined로 평가, 마이너스와 name을 평가 후 계산)
// Node.js환경: ReferenceError: name is not defined

person[last-name];
// 브라우저 환경: Uncaught ReferenceError: last is not defined
// Node.js환경: ReferenceError: name is not defined

person['last-name']; // 'Lee'

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

• 갱신 : 이미 존재하는 프로퍼티에 값을 할당
• 동적 생성 : 존재하지 않는 프로퍼티에 값을 할당
• 삭제 : delete 연산자 → 존재하지 않는 프로퍼티를 삭제하면 에러 없이 무시됨

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

• 프로퍼티 축약 표현 : 프로퍼티 값으로 변수를 사용할 때, 변수명과 키가 동일할 때 프로퍼티 키를 생략할 수 있음. 이때 키는 변수명으로 자동 생성

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

• 계산된 프로퍼티 이름 : 표현식을 사용해 키를 동적으로 생성할 수 있음. 이 때 표현식은 대괄호로 묶어야 함

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

const ES5 = {};
ES5[prefix + '-' + ++i] = i;
ES5[prefix + '-' + ++i] = i;
ES5[prefix + '-' + ++i] = i;

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

• 메서드 축약 표현 : 메서드 정의 시 function 키워드를 생략한 축약 표현 사용 가능
  • 이렇게 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작함. 추후에 배울 것

const es5 = {
    sayHi: function() {
        console.log("hi");
    }
}

const es6 = {
    sayHi() {
        console.log("hi");
    }
}