[JavaScript] 객체 리터럴

객체

자바스크립트는 객체 기반 언어이고 자바스크립트를 이루고 있는 모든 것이 객체이다.

정확하게는 원시 타입을 제외한 나머지 모든 것은 객체이다.

그리고 객체는 프로퍼티로 구성되어 있다.

다시 프로퍼티는 키(key)와 값(value)으로 구성되는데 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라고 부른다.

클래스 기반 언어에서 객체를 생성하기 위해 new 연산자를 사용한다.

/* 1단계 : 클래스 정의 */
public class Prisoner {
   public int setence = 4;
   public int probation = 2;
   public string name;
   public string id;

   /* 2단계 : 클래스 생성자 정의*/
   public Prisoner(string name, string id) {
      this.name = name;
      this.id = id;
   }
}

/* 3단계 : 객체 생성 */
Prisoner firstPrisoner = new Prisoner("Joe", "12A");
Prisoner secondPrisoner = new Prisoner("Sam", "2BC");

 

하지만 객체 기반 언어인 자바스크립트에서는 다양한 방법으로 객체를 생성할 수 있다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

 

그 중 객체 리터럴은 중괄호 안에 프로퍼티를 정의하여 객체를 생성한다.

만약 중괄호 안에 프로퍼티를 정의하지 않으면 빈 객체가 생성된다.

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

var person = {}

 

객체 리터럴은 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 방식이다.

객체를 생성하기 위해 클래스를 정의하거나 new 연산자를 사용하지 않더라도 손쉽게 객체를 생성할 수 있다.

 

 

프로퍼티

객체는 프로퍼티의 집합이고 키와 값으로 구성된다.

키는 값에 접근할 수 있는 식별자 역할을 한다.

하지만 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다.

식별자 네이밍 규칙을 따르지 않을 경우 따옴표로 감싸줘야 한다.

 

식별자 네이밍 규칙
식별자는 특수문자를 제외한 문자, 숫자, 언더바(_), 달러($)를 포함할 수 있다.
단 첫글자는 문자, 언더바(_), 달러($)로 시작해야 한다.
예약어는 식별자로 사용할 수 없다.

 

var person = {
  firstName: 'Ji-woon',
  'last-name': 'Kang'
}
console.log(person); // {firstName: "Ji-woon", last-name: "Kang"}

 

위 예시에서 last-name에는 (-) 특수문자가 포함되어 있다.

따라서 따옴표로 감싸줘야 하고 그렇지 않으면 에러가 발생한다.

 

 

프로퍼티 접근

프로퍼티에 접근하는 방법은 점 표기법과 대괄호 표기법이 있다.

프로퍼티 키가 네이밍 규칙을 준수할 경우 점 표기법과 대괄호 표기법을 모두 사용할 수 있다.

var person = {
  firstName: 'Ji-woon',
  'last-name': 'Kang'
}
console.log(person.firstName);		//Ji-woon
console.log(person['firstName']);	//Ji-woon

 

대괄호 표기법을 사용할 경우 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

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

 

객체에 존재하지 않는 키에 접근할 경우 에러가 아닌 undefined를 반환한다.

var person = {
  firstName: 'Ji-woon',
  'last-name': 'Kang'
}
console.log(person.age);	// undefined
console.log(person['age']);	// undefined

 

 

프로퍼티 갱신

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 생성되고, 값이 할당된다.

var person = {
  firstName: 'Ji-woon',
  'last-name': 'Kang'
}
person.age = 30;

console.log(person);
// {firstName: "Ji-woon", last-name: "Kang", age: 30}

 

 

프로퍼티 삭제

delete 연산자로 객체의 프로퍼티를 삭제할 수 있다.

var person = {
  firstName: 'Ji-woon',
  'last-name': 'Kang',
  age: 30
}
delete person.age;

console.log(person);
// {firstName: "Ji-woon", last-name: "Kang"}

 

이때 객체가 존재하지 않는다면 에러가 아닌 true를 반환한다.

delete person.address;
// true

 

---

참고

모던 자바스크립트 Deep Dive(2020, 이웅모),

Web Club