JS DeepDive 10장 객체 리터럴

한칙촉·2024년 1월 26일

JavaScript

모던 자바스크립트 딥다이브

목록 보기

7/19

객체

자바스크립트를 구성하는 거의 모든 것
원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)
프로퍼티와 메서드로 구성된 집합체
- 프로퍼티 : 객체의 상태를 나타내는 값
- 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작

원시 값 = 변경 불가능한 값
객체 값 = 변경 가능한 값

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

var person = {
  name: 'Lee',
  sayHello: function() {
    console.log(`Hello! My name is ${this.name}.`);
  }
};

console.log(typeof person); // object
console.log(person); // {name: "Lee", sayHello: f}

중괄호 내에 0개 이상의 프로퍼티를 정의 (코드 블록 X)
변수에 할당되는 시점에 객체 리터럴을 해석해 객체 생성
중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성됨

프로퍼티

: 객체는 프로퍼티의 집합, 키와 값으로 구성됨

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
- 식별자 네이밍 규칙을 따르지 않는 이름에는 따옴표 사용
프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

var person = {
  firstName: 'Ung-mo', // 식별자 네이밍 규칙을 준수하는 프로퍼티 키
  'last-name': 'Lee' // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
};

var person = {
  firstName: 'Ung-mo',
  last-name: 'Lee' // SyntaxError: Unexpected token -
};

자바스크립트 엔진은 따옴표를 생략한 last-name을 - 연산자가 있는 표현식으로 해석

var obj = {};
var key = 'hello';

// ES5: 프로퍼티 키 동적 생성
obj[key] = 'world';
// ES6: 계산된 프로퍼티 이름
// var obj = { [key]: 'world' };

console.log(obj); // {hello: "world"}

문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키 동적 생성 가능
→ 프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 함

var foo = {
  0: 1,
  1: 2,
  2: 3
};

console.log(foo); // {0: 1, 1: 2, 2: 3}

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

var foo = {
  name: 'Lee',
  name: 'Kim'
};

console.log(foo); // {name: "Kim"}

프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀

메서드

자바스크립트의 함수는 객체(일급 객체)
→ 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용 가능
→ 일반 함수와 구분하기 위해 메서드라고 부름 (객체에 묶여 있는 함수)

프로퍼티 접근

마침표 표기법 : 마침표 프로퍼티 접근 연산자 이용
대괄호 표기법 : 대괄호 프로퍼티 접근 연산자 이용

var person = {
  name: 'Lee',
};

console.log(person.name); // Lee
console.log(person['name']); // Lee

console.log(person[name]); // ReferenceError: name is not defined

대괄호 표기법을 사용하는 경우 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 함 (감싸지 않으면 식별자로 해석)

var person = {
  name: 'Lee',
};

console.log(person.age); // undefined

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환

var person = {
  'last-name': 'Lee',
  1: 10
};

person.'last-name';  // → SyntaxError: Unexpected string
person.last-name;    // → 브라우저 환경: NaN
				     // → Node.js 환경: ReferenceError: name is not defined
person[last-name];   // → ReferenceError: last is not defined
person['last-name']; // Lee

// 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표 생략 가능
person.1; // → SyntaxError: Unexpected number
person.'1'; // → SyntaxError: Unexpected string
person[1]; // 10 : person[1] → person['1']
person['1']; // 10

person.last-name을 실행할 때 자바스크립트 엔진은 먼저 person.last를 평가
→ 키가 last인 프로퍼티가 없으므로 undefined로 평가
→ person.last-name = undefined - name

Node.js 환경 : name이라는 식별자 선언이 없으므로 ReferenceError 에러 발생
브라우저 환경에는 name이라는 전역 변수(window의 프로퍼티)가 암묵적으로 존재
→ 전역 변수 name은 창(window)의 이름이며 기본값은 빈 문자열
→ person.last-name = undefined - '' = NaN

프로퍼티 값 갱신

var person = {
  name: 'Lee',
};

// person 객체에 name 프로퍼티가 존재하므로 값이 갱신됨
person.name = 'Kim';
console.log(person); // {name: "Kim"}

프로퍼티 동적 생성

var person = {
  name: 'Lee',
};

// person 객체에 age 프로퍼티가 존재 X
// age 프로퍼티가 동적으로 생성되고 값이 할당됨
person.age = 20;
console.log(person); // {name: "Kim", age: 20}

프로퍼티 삭제

var person = {
  name: 'Lee',
};

person.age = 20;

// person 객체에 age 프로퍼티가 존재하므로 삭제할 수 있음
delete person.age;
// person 객체에 address 프로퍼티가 존재하지 않음
// address 프로퍼티를 삭제할 수 없고 이때 에러가 발생하지 않음
delete person.address;

console.log(person); // {name: "Lee"}

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

프로퍼티 축약 표현

// ES5
var x = 1, y = 2;

var obj = {
  x: x,
  y: y
}

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

// ES6
let x = 1, y = 2;

const obj = { x, y };

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

프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키 생략 가능
→ 이때 프로퍼티 키는 변수 이름으로 자동 생성

계산된 프로퍼티 이름

// ES5
var prefix = 'prop';
var i = 0;

var obj = {};

obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

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

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

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

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

문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성 가능
→ 프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 함

메서드 축약 표현

// ES5
var obj = {
  name: 'Lee',
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee

// ES6
const obj = {
  name: 'Lee',
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee