[JavaScript] 객체(Object) 완벽 정리

자바스크립트는 객체 지향적인 특성을 가진 프로그래밍 언어입니다. 자바스크립트에서 객체는 매우 중요한 개념으로, 다양한 데이터와 기능을 하나의 단위로 묶어 관리할 수 있는 구조입니다. 이번 글에서는 자바스크립트 객체의 개념과 특징, 그리고 객체를 다루는 방법에 대해 자세히 알아보겠습니다.

객체란 ?

객체는 키(key)와 값(value)으로 구성된 프로퍼티의 집합입니다.

• 프로퍼티 키(key): 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• 프로퍼티 값(value): 자바스크립트에서 사용할 수 있는 모든 값

let person = {
  // 프로퍼티 key는 name, value는 'MJ'
  name: 'MJ',
  // 프로퍼티 key는 age, value는 27
  age: 27,
};

식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다

let person = {
  name: 'MJ',
  age: 27,
  'my-cat': '🐱',
  ['my-cat']: '🐈'
};

식별자 네이밍 규칙을 따르지 않는 프로퍼티 키를 사용하면 번거로운 일이 발생하기도 합니다. 따라서 가급석 식별자 네이밍 규칙을 준수하는 프로퍼티 키를 사용하는 것이 좋습니다.

위 예제에서 'my-cat' 보다는 카멜케이스로 myCat으로 작성하는 것을 권장합니다.

프로퍼티 접근

• person.name 마침표 표기법(dot notation)
• person['name'] 대괄호 표기법(bracket notation)
• person['my-cat'] 특수문자를 사용한 경우는 대괄호 표기법만 가능

프로퍼티 key가 식별자 네이밍 규칙을 준수하는 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있습니다.

대괄호 표기법을 사용하는 경우 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 key는 반드시 따옴표로 감싼 문자열이어야 합니다.

프로퍼티 동적 생성, 프로퍼티 삭제

// 생성
person.emoji = '👦🏻';

// 삭제
delete person.emoji;

메소드

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용할 수 있습니다. 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있습니다.

const circle = {
  radius: 5,
  
  getDiameter: function() {
    return 2 * this.radius;
  }
}

객체 내부에서 this는 해당 객체를 가르키며, 메소드가 해당 객체의 상태를 참조할 수 있게 해줍니다.

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

프로퍼티 축약 표현

const x = 0;
const y = 0;

// ES6 이전
const coordinate = { x: x, y: y };

// ES6 이후 (프로퍼티 축약 표현)
const coordinate = { x, y };

위 예제처럼 key 이름과 참조하는 변수의 이름이 동일한 경우 간략하게 사용할 수 있습니다.

메서드 축약 표현

// ES6 이전
getDiameter: function() {
  return 2 * this.radius;
}
  
// ES6 이후 (메서드 축약 표현)
getDiameter() {
  return 2 * this.radius;
}

---

✅ 참고

• https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics
• 모던 자바스크립트 Deep Dive