10장 객체 리터럴

객체란

원시 값을 제외하면 모두 객체.

원시 값	객체
변경 불가능(immutable)	변경 가능(mutable)

// 객체 리터럴에 의한 인스턴스 생성
var person = {
	name: "foo",
	sayHello: function(){ // ES5
		console.log(`Hello. I'm ${this.name}`);
	}
}; // 세미콜론 붙임. 코드블럭과의 차이

객체는 0개 이상의 프로퍼티로 구성된 집합

프로퍼티 = 키 : 값(딕셔너리)

값은 함수가 될 수도 있고 함수인 경우 메소드라도 부름.

결국 객체는 프로퍼티와 메소드로 구성된 집합체

• 프로퍼티는 “상태”를 나타내는 데이터 ex) name
• 메소드는 ‘‘동작” ex) sayHello
  • 메서드 : 객체의 프로퍼티 값이 함수(일반함수와 구분하기 위해) => 객체에 묶여 있는 함수

=> 상태와 동작을 하나의 단위로 구조화할 수 있어 유용

인스턴스 생성

c++, java : 클래스 기반 객체지향 언어 => constructor로 인스턴스 생성

javascript : 프로토타입 기반 객체지향 언어

=> 객체 리터럴로 생성(생성자 함수 등을 통해 생성할수도 있지만 객체 리터럴이 가장 일반적이고 간단)

프로퍼티 키 규칙

식별자 네이밍 규칙을 따르는 프로퍼티 키를 사용하자

var person = {
    firstName : 'World', // 적합
    'last-name' : 'Hello', // 가능하지만 따옴표를 붙여야한다 - 권장 x
	0 : 'zero' // 프로퍼티 키로 숫자를 사용가능하지만 내부적으로 문자열로 자동 변환됨
};	

person[0]; // zero
person['0']; // zero

프로퍼티 CRUD

var person = {
    name: 'Lee'
};

console.log(person.name); // Lee (가능)
console.log(person['name']); // Lee (가능. 따옴표 필요)
console.log(person.age); // undefined(ReferenceError가 발생하지 않으니 주의)
console.log(person[name]); // ReferenceError

person.age = 20; 
// age 프로퍼티가 없으면 20으로 생성
// age 프로퍼티가 있으면 20으로 업데이트

delete person.age;
// age 프로퍼티가 없으면 무시(에러 발생 x)
// age 프로퍼티가 있으면 삭제

ES6 객체 리터럴 확장 기능

1. 프로퍼티 축약 표현

// ES5
var x = 1, y = 2;
var obj = {
    x: x;
    y: y;
};

// ES6
let x = 1, y = 2;
const obj = {x, y}; // 키 이름은 변수 이름으로 자동 생성

2. 객체 리터럴 내부 동적 프로퍼티 계산

// ES5 - 객체 리터럴 "외부"에서 프로퍼티 키 동적 생성해야함
var prefix = 'pre';
var i = 0;
var obj = {};
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

// ES6 - 객체 리터럴 "내부"에서도 프로퍼티 키 동적 생성 가능
const prefix = 'pre';
let i = 0;
const obj = {
    [`$[prefix}-${++i}`] : i,
    [`$[prefix}-${++i}`] : i
};

3. 메서드 축약 표현

// ES5
var obj = {
	sayHi: function(){
        console.log("Hi");
	}
};

// ES6
var obj = {
	sayHi(){
        console.log("Hi");
	}
};

단, 둘의 동작 방식은 서로 다르다. 26.2절에서 후술

심화

var person = {
	'last-name' : 'Lee'	
};
console.log(person.last-name); // (1)

(1)의 결과가 브라우저 환경과 Node.js 환경에서 다르다.

• 브라우저 환경 : NaN
  • person.last와 name의 - 연산으로 생각
  • person.last : undefined
  • name : 브라우저 환경의 전역 객체 window의 프로퍼티 중 하나, 디폴트 값은 ‘‘(빈 문자열)
  • 따라서 undefined - ‘’ = NaN
• Node.js : ReferenceError
  • 브라우저 환경과 달리 name 식별자 존재하지 않음
  • 따라서 ReferenceError

Reference

본 포스트는 이웅모, 모던자바스크립트 Deep Dive의 10장 내용을 요약 및 재구성한 것입니다.