[자바스크립트 / Vanilla JS] 객체와 객체 접근법 (점 표기법, 대괄호 표기법)

 

객체(Object)란 ❓

객체는 간단하게 정의해서 여러 속성의 모음을 저장하는데 사용하는 자료형이다.

 

먼저 간단한 예시로 살펴보자

 

const car = {
	wheels: 4,
	color: "blue"
};

차의 속성을 저장하는 데 사용하는 간단한 객체이다.

각 속성에는 키(첫 행의 경우 wheels)와 값 (첫 행의 경우 4)이 있다.

 

키의 자료형은 string 자료형이지만 값은 모든 자료형이 될 수 있고 심지어 함수가 될 수도 있다

 

---

✔  객체 표기법

객체 표기법에는 2가지 방법이 존재한다 

"점 표기법"과 "대괄호 표기법"이 있다

const car = {
	wheels: 4,
    color: "red"
    "goes fast": true
}

// --- 점 표기법 ---
console.log(car.wheels); //4
console.log(car.goes fast) //syntax error

// --- 대괄호 표기법 ---
console.log(car[wheels]); //4
console.log(car["goes fast"]) // true

여기서 주목할 점은 "goes fast"라는 키 값에 대한 접근이다.

점 표기법과 대괄호 표기법의 차이점을 눈치 챘는가 ?

가장 큰 차이점은 점 표기법은 여러 단어로 이뤄진 속성의 경우 사용할 수 없다.

이 처럼 여러 단어로 된 속성을 사용하려면 해당 이름을 따옴표로 묶어야 하기 때문에 대괄호 표기법만 사용이 가능하다.

대괄호 표기법을 사용하는 또 다른 경우는 키를 사용해서 객체의 속성에 접근할 때 이다.

 

애플리케이션이 사용자로부터 입력을 받은 다음, 입력받은 값을 객체에 접근하는데 사용할 변수에 저장한다고 가정해보자.

 

예를 들어, 사용자가 자동차를 찾고 있다고 하자. 애플리케이션에서는 사용자에게 좋아하는 자동차 브랜드를 알려달라고 요청한다. 사용자가 선택한 브랜드는 적절한 모델을 출력하기 위한 키가 된다.

 

예를 단순하게 하기 위해 여기에서는 각 브랜드별로 하나의 모델만 있다고 가정하자

const cars = {
	ferrari: "california",
    porsche: "911",
    bugatti: "veyron",
};

//사용자 입력
const key = "ferrari";

console.log(cars.key); //undefined

console.log(cars['key]); //undefined

console.log(cars[key]); //california

이와 같이, 변수에 저장된 키를 통해 객체의 속성에 접근하려면 대괄호 표기법을 사용해야한다.

* 키는 문자열이 아닌 변수 이름이므로 따옴표 표기를 해서는 안된다.

 

출처 : 모던 자바스크립트 핵심 가이드 서적