객체(Object)

자바스크립트의 객체(object)는 키(key): 값(value) 형태의 0개 이상의 프로퍼티(property)들로 구성됩니다. 프로퍼티의 값으로 함수를 가질 수 있는데 이런 프로퍼티를 메소드라고 부릅니다.

객체 만들기

리터럴 이용

객체를 생성하는 쉬운 방법은 중괄호 안에 프로퍼티 또는 메소드들을 쉼표로 나열하는 리터럴을 이용하는 것입니다. 이러한 방법을 객체 초기자(object initializer)라고도 합니다.

{
  color: "red",
  count: 5,
  log: function () {
    console.log('수량: ' + this.count, '색상: ' + this.color);
  }
}

객체 안에 정의된 함수를 객체의 메소드라고 합니다. 위 예제에서 log가 메소드입니다.

메소드를 정의할 때 키와 function 키워드를 생략하고 다음과 같이 간략하게 정의하여 사용할 수 있습니다.

{
  color: "red",
  count: 5,
  log() {
    console.log('수량: ' + this.count, '색상: ' + this.color);
  }
}

생성자 함수 이용

생성자 함수를 이용하여 새로운 객체를 만들 수도 있습니다. 생성자 함수는 this 키워드를 사용하여 객체의 프로퍼티와 메소드들을 만듭니다. 새로운 객체는 new를 이용하여 만듭니다.

function Person(name) {
  this.name = name
  this.greeting = function() {
    console.log('Hi I\'m ' + this.name +'.')
  }
}

let Jane = new Person('Jane')

Object 이용

객체를 생성하는 다른 방법으로는 new Object()를 이용하는 것입니다.

let 내객체 = new Object();
내객체.색상 = "빨강";
내객체.수량 = 5;
내객체.로그 = function () {
  console.log('수량: ' + this.수량, '색상: ' + this.색상);
}

객체 프로퍼티

프로퍼티 이름

프로퍼티 이름(키)은 자바스크립트 식별자와 숫자, 문자열을 사용할 수 있습니다. 이름이 식별자 형식이 아닐 때는 대괄호 안에 문자열 형식으로 접근해야 합니다.

let x = {
  'a': 1,
  b: 2,
  'a b': 3,
  11: 100
}

x.a // 1
x['a b'] // 식별자 형식이 아닐 때.
x[11] // 100

프로퍼티 정의

기존의 변수를 이용하여 객체를 정의할 수도 있습니다.

let a = "foo",
  b = 42,
  c = {};

// 단축 프로퍼티 (ES6)
let obj = { a, b, c };

중복 프로퍼티 이름

프로퍼티가 같은 이름을 쓰는 경우, 마지막 프로퍼티 값을 사용합니다.

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

전개(spread) 연산자

여기 참조. 이는 제공된 객체가 소유한 열거형 프로퍼티를 새로운 객체로 복사합니다.

얕은 복제(prototype 제외) 또는 객체의 병합은 이제 Object.assign() 보다 더 짧은 문법을 사용해 가능합니다.

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

Object.assign() 은 setters를 트리거하지만 전개 구문은 그렇지 않음을 유의합니다.

Object.assign() 함수를 대체하거나 흉내낼 수 없음을 유의합니다.

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
const merge = ( ...objects ) => ( { ...objects } );

var mergedObj = merge ( obj1, obj2);
// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }

var mergedObj = merge ( {}, obj1, obj2);
// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }

위 예제에서, 전개 구문은 예상대로 동작하지 않습니다. 나머지 매개변수로 인해, 인수 배열을 객체 리터럴로 전개합니다.

참조