객체 리터럴

heejung·2022년 3월 18일

deep dive

목록 보기

8/20

객체란?

다양한 타입의 값 (원시 값 or 다른 객체) 을 하나의 단위로 구성한 복합적인 자료구조
변경 가능한 값 (mutable value)
프로퍼티 : 객체의 상태를 나타내는 값 (data)
메소드 : 프로퍼티를 참조/조작할 수 있는 동작

var person = {
  // 프로퍼티 (키: 값)
  name: 'Lee',
  age: 20
};

객체 생성 (객체 리터럴)

중괄호{} 안에 0개 이상의 프로퍼티를 정의

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}

프로퍼티

키(key) : 빈 문자열 포함 모든 문자열 or 심벌 값
=> 이외의 다른 값을 키로 사용하면 문자열로 암묵적 변환됨
값(value) : 자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 키는 식별자 네이밍 규칙을 준수하는 이름이면 따옴표를 생략할 수 있지만, 그렇지 않다면 반드시 따옴표를 사용해야 한다.

var person = {
  // 식별자 네이밍 규칙 준수 O
  firstName: 'Na-na', 
  // 식별자 네이밍 규칙 준수 X
  last-name: 'Lee' // SyntaxError: Unexpected token -
  // 따옴표로 묶어줘야 한다.
  'last-name': 'Lee'
};

문자열 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있다.
이 경우에는 프로퍼티 키로 사용할 표현식을 대괄호[] 로 묶어야 한다.

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

obj[key] ='world';

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

이미 존재하는 프로퍼티 키를 중복 선언하면 먼저 선언한 프로퍼티를 덮어쓴다.
이 때 에러는 발생하지 않는다.

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

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

메소드

자바스크립트의 함수는 일급 객체이므로 값으로 취급될 수 있으며, 프로퍼티의 값이 될 수 있다.
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라고 부른다.
즉, 메소드는 객체에 묶여있는 함수를 말한다.

var circle = {
  radius: 5,
  
  // 메소드
  getDiameter: function() {
    return 2 * this.radius; // this => circle을 가리킨다.
  }
};

console.log(circle.getDiameter()); // 10

메소드 내부에서 사용한 this는 객체 자신을 가리킨다.

프로퍼티 접근

프로퍼티 키가 식별자 네이밍 규칙 준수 O => 마침표 표기법, 대괄호 표기법 사용 가능
프로퍼티 키가 식별자 네이밍 규칙 준수 X => 대괄호 표기법만 사용 가능

var person = {
  name: 'Lee'
};

// 마침표 표기법 사용
console.log(person.name); // Lee

// 대괄호 표기법 사용
console.log(person['name']); // Lee
console.log(person[name]); // ReferenceError: name is not defined

대괄호 표기법을 사용할 경우, 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.
그렇지 않으면 자바스크립트 엔진은 식별자로 해석하여 참조 에러를 발생시킬 수 있다.

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

var person = {
  name: 'Lee'
};

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

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값 할당

var person = {
  name: 'Lee'
};

person.name = 'Kim'; // 갱신

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

프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값 할당

var person = {
  name: 'Lee'
};

person.age = 20;

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

프로퍼티 삭제

delete 연산자 사용

var person = {
  name: 'Lee'
};

delete person.name; // 삭제

console.log(person); // {}

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

프로퍼티 축약 표현

프로퍼티 값으로 변수 사용 => 프로퍼티 키와 변수명이 같으면 프로퍼티 키 생략 가능
프로퍼티 키는 변수명으로 자동 생성됨

var x = 1, y = 2;

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

// 프로퍼티 축약 표현
var obj = {
  x,
  y
};

계산된 프로퍼티 이름

문자열 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다.
이때 프로퍼티 키로 사용할 표현식을 대괄호[] 로 묶어야 한다.

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에서는 객체 리터럴 내부에서도 생성할 수 있다.

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

var obj = {
	[`${prefix}-${++i}`] = i;
	[`${prefix}-${++i}`] = i;
	[`${prefix}-${++i}`] = i;
};

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

메소드 축약 표현

메소드 정의할 때 function 키워드 생략 가능

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

// 메소드 축약 표현
var obj = {
  name: 'Lee',
  sayHi() {
    console.log('hi! ' + this.name);
  }
};