객체(Object) 기본 개념

객체(Object)

자바스크립트는 객체 지향적 언어로 거의 모든 것이 객체 이며, 원시 타입의 값을 제외한 함수, 배열, 정규 표현식 도 객체라고 볼 수 있습니다.

객체는 중괄호 {...} 를 이용하여 만들 수 있으며 내부에 키(key) : 값(value)의 형태로 구성된 프로퍼티(property)가 0개 이상 들어가 있는 형태로 구성되어 있습니다.

var product = {
    name: 'apple', // name(=key), apple(=value)로 구성된 프로퍼티
    price: 1000
};

객체 리터럴(Object literal)

일반적으로 객체를 생성하는 방법으로는 new 연산자를 이용한 객체 생성과 중괄호 {...}를 이용하여 객체를 생성하는 객체 리터럴 방식이 존재합니다.

var obj = new Object(); // 생성자를 이용한 객체 생성 방식
var obj = {}; // 객체 리터럴을 이용한 객체 생성 방식

프로퍼티(property)

프로퍼티는 키(key), 값(value)의 형태로 구성되어 있습니다. 프로퍼티 키는 중복된 값을 가질 수 없으며 프로퍼티의 값은 자바스크립트에서 사용할 수 있는 모든 값을 넣을 수 있습니다.

프로퍼티 값이 함수인 경우에는 객체의 상태를 조작하거나 객체와 관련된 작업을 수행하는 메서드(method)라고 부릅니다.

var obj = {
    number: 100, // 프로퍼티
    getLog: function() {
      return 'Hello';
    }
};

점 표기법

객체의 이름을 적고 점을 찍은 후에 그 뒤에 접근하려는 프로퍼티 키를 입력하면 객체의 프로퍼티에 접근할 수 있습니다.

간단한 프로퍼티부터 배열이거나 객체의 메소드도 아래와 같은 점 표기법을 통해서 호출이 가능합니다.

var obj = {
  name: 'apple',
  price: 1000,
  keyword: ['fresh', 'sweet'],
  getMsg: function () {
    return 'Hello';
  }
};

console.log(obj.name); // apple
console.log(obj.price); // 1000
console.log(obj.keyword[1]); // sweet
console.log(obj.getMsg()); // Hello

괄호 표기법

객체 프로퍼티 키를 여러 단어를 조합해서 만든 경우에는 일반적으로 사용하는 점 표기법으로는 접근이 불가능 합니다. 이런 경우에는 아래와 같이 [...] 내부에 프로퍼티 키를 넣어서 괄호 표기법으로 객체에 접근이 가능 합니다

var obj = { 'product name': 'apple' };
// 점 표기법(접근 불가)
console.log(obj.'product name'); // Unexpected string Error

// 괄호 표기법(접근 가능)
console.log(obj['product name']); // apple

프로퍼티 갱신

객체에서 이미 존재하는 프로퍼티에 값을 다시 할당하면 프로퍼티 값이 갱신된다.

var proudct = {
    name: 'apple',
};
console.log(product.name); // apple
product.name = 'banana';
console.log(product.name); // banana

프로퍼티 동적 생성

내부에 존재하지 않는 프로퍼티 값을 할당하면 새로운 프로퍼티가 동적으로 생성되어 추가되며, 값이 할당 됩니다.

var product = {
    name: 'apple',
};
console.log(product); // { name: 'apple' }
product.price = 1000;
console.log(product); // { name: 'apple', price: 1000 }

프로퍼티 삭제

프로퍼티 갱신을 통해서 null, undefined, '' 등의 빈 값을 넣어도 삭제되는 것이 아니며 delete 연산자를 이용하여야 객체의 프로퍼티를 완전히 삭제할 수 있습니다.

var product = {
    name: 'apple',
    price: 10000,
}
product.price = null;
console.log(product); // { name: 'apple', price: null }
delete product.price;
console.log(product); // { name: 'apple' }

객체 리터럴 확장 기능

ES6에서는 프로퍼티 축약이나 동적 생성 등 다양한 확장 기능을 제공합니다.

프로퍼티 축약

프로퍼티 값을 변수로 사용하는 경우 ES6에서는 프로퍼티 값과 변수의 이름이 동일한 경우에 프토퍼티 키를 생략할 수 있습니다.

// ES5의 기존 방식
var fruit = 'apple';
var price = 1000;

var product = {
    fruit: fruit,
    price: price,
}
console.log(product); // { fruit: 'apple', price: 1000 }

// ES6의 축약 방식
const fruit = 'apple'
const price = 1000;

const product = {
    fruit,
    price
};
console.log(product); // { fruit: 'apple', price: 1000 }

프로퍼티 키 동적 생성

문자열 혹은 문자열로 변환 가능한 값을 키로 사용하는 경우에는 프로퍼티 키를 동적으로 생성할 수 있다.

이를 위해서는 프로퍼티 키로 사용할 값을 [...] 대괄호로 감싸서 표현하면 된다.

// 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 }

ES6에서는 백틱과

메서드 축약

기존의 function 문구를 제외하고 함수의 이름만을 명시하여 객체 내의 메서드를 정의할 수 있습니다.

// ES5의 과거 방식
var product = {
    name: 'apple',
    getName: function () {
      console.log("Today's dessert is an " + this.name);
    }
};
product.getName(); // Today's dessert is an apple

// ES6의 메서드 축약 방식
const product = {
    name: 'apple',
    getName() {
      console.log("Today's dessert is an " + this.name);
    }
};
product.getName(); // // Today's dessert is an apple

Reference

MDN Web Docs: JavaScript 객체 기본

poiemaweb: 객체

JAVASCRIPT.INFO: 객체

모던 자바스크립트 Deep Dive (자바스크립트의 기본 개념과 동작 원리)