자바스크립트: 점 표기법과 괄호 표기법 ( dot notation, bracket notation)

점 표기법 vs 괄호 표기법 ( dot notation, bracket notation)

 

자바스크립트에서 객체 내부 프로퍼티에 접근하는 방법엔, 점 표기법 , 괄호 표기법 2가지가 있습니다. 

likelion 이란 객체가 있고, 해당 객체의 property 에 접근하는 코드를 작성해보겠습니다.

let likelion = {
    number: '9th',
    member: 21,
    univ: "pnu"
}

// 점 표기법
likelion.number // 9th
likelion.member // 21

// 괄호 표기법
likelion['univ'] // 'pnu'

 

아래처럼 두 방법 모두 객체의 프로퍼티에 접근할 수 있습니다.

// 점 표기법
likelion.number // 9th
likelion.member // 21

// 괄호 표기법
likelion['univ'] // 'pnu'

 

각 방법마다 장점이 있는데, 

점 표기법이 괄호 표기법에 비해 간결하게 작성할 수 있어 가독성 측면에서 좋습니다.

 

그렇다면 괄호 표기법의 장점은 무엇일까요?

바로바로 객체의 프로퍼티에 변수를 활용하여 접근할 수 있는 점입니다. 글로는 무슨 말인지 모르겠으니 코드를 보겠습니다.

 

 

❗️❗️ 점 표기법의 한계

객체의 프로퍼티에 접근하여 원하는 값(: changingValue)으로 변경하는 함수 changeProperty() 가 있습니다.

점 표기법으로 likelion 의 member 값(21 -> 300)을 변경해보겠습니다.

const changeProperty = (object, property, changingValue) => {
    object.property = changingValue
}

changePropery(likelion, member, 300) // Uncaught ReferenceError: member is not defined

changeProperty의 인자 member가 정의되지 않았다는 에러메시지가 발생합니다.

즉 member 를 변수로서 사용하고 싶었지만, 점 표기법에서는 이런 방법이 불가능합니다.

 

 

✅  (점 표기법의 한계는) 괄호 표기법으로 극복

const changeProperty = (object, property, changingValue) => {
    object[property] = changingValue
}

changePropery(likelion, "member", 300) 

// likelion = {number: '9th', member: 300, univ: "pnu"}

괄호 표기법을 사용하면 "member" 변수를 활용하여 객체의 프로퍼티에 접근할 수 있습니다. likelion 객체의 member 값이 21 에서 300 으로 변경 된 것을 확인할 수 있습니다.

 

 

🌀 비동기 데이터에서 괄호표기법

이렇게 괄호 표기법을 사용하면, 아직 객체 내부가 정의되지 않은 경우에도 접근할 수 있는 이점이 있습니다.

예를 들어 API 통신으로 어떤 객체(= result)를 받아올 때, 해당 객체의 내부 값을 변경하는 코드를 작성한다고 생각해봅시다.

result 객체의 a 라는 property 가 존재한다해도, API 통신 이전에는 해당 property 는 정의되지 않은 상태입니다. 

점 표기법은 정의되지 않은 result 객체에 접근할 수 없지만, 괄호 표기법은 해당 프로퍼티를 변수화하기 때문에 접근이 가능해집니다. 

비동기로 데이터를 호출하는 경우, 프로퍼티에 접근하고 싶다면 괄호 표기법을 사용합시다 !