바닐라 JavaScript로 객체에 속성 추가하기: 점 표기법 vs 대괄호 표기법

JavaScript에서 객체(object)에 새로운 항목(속성)을 추가하는 방법은 크게 두 가지입니다.

점 표기법(Dot notation): object.thingToAdd
대괄호 표기법(Bracket notation): object['thingToAdd']

두 방식의 차이점과 각각 언제 사용해야 하는지 예제와 함께 자세히 알아보겠습니다.

점 표기법(Dot notation)

먼저 점 표기법부터 살펴보겠습니다.

let dog = {
  name: "Naya",
  age: "2",
  color: "black",
}

// dog 객체에 항목 추가
dog.breed = "Rottweiler mix"

// 콘솔에 객체 출력
console.log(dog)
// { name: "Naya", age: "2", color: "black", breed: "Rottweiler mix"}

객체 이름 뒤에 마침표(.)를 붙이고 새로운 속성 이름을 지정한 뒤 값을 할당하면 됩니다. 이것이 바로 점 표기법입니다.

대괄호 표기법(Bracket notation)

대괄호 표기법은 객체에 속성을 추가할 때 점 표기법보다 제약이 적습니다. 앞서 사용한 것과 동일한 dog 객체를 다시 보겠습니다.

let dog = {
  name: "Naya",
  age: "2",
  color: "black",
}

이번에는 대괄호 표기법으로 속성과 값을 추가해 보겠습니다.

dog["weight"] = "34kg"

console.log(dog)
// { name: "Naya", age: "2", color: "black", weight: "34kg"}

보시다시피 이 예제에서는 점 표기법과 완전히 동일하게 작동합니다. 그렇다면 두 방식은 어떤 차이가 있을까요? 지금부터 비교해 보겠습니다.

점 표기법 vs 대괄호 표기법

점 표기법으로 숫자를 새 속성 이름으로 추가해 보겠습니다.

// 점 표기법
dog.1 = "Property 1"
console.log(dog)
// Uncaught SyntaxError: Unexpected number

오류가 발생합니다! 점 표기법에서는 속성 이름에 숫자를 사용할 수 없기 때문입니다.

반면 대괄호 표기법에서는 식별자를 문자열 형태로 작성하기만 하면 숫자도 사용할 수 있습니다.

// 대괄호 표기법
dog["1"] = "Property 1"
console.log(dog)
// { 1: "Property 1", age: "2", color: "black", name: "Naya" }

이처럼 대괄호 표기법이 점 표기법보다 훨씬 유연합니다.

어떤 표기법을 사용해야 할까?

점 표기법이 읽기 쉽고 코드가 간결해지기 때문에, 가능한 한 점 표기법을 사용하는 것이 좋은 습관입니다. 하지만 추가하려는 속성 이름이 숫자로 시작하거나, 특수 기호를 포함하거나, 예약어(reserved keyword)에 해당한다면 반드시 대괄호 표기법을 사용해야 합니다.

점 표기법의 규칙

속성 식별자(이름)는 영숫자(a–z), 밑줄(_), 달러 기호($)만 포함할 수 있습니다.
속성 식별자는 숫자로 시작할 수 없습니다.
속성 식별자에 변수를 사용할 수 없습니다.

대괄호 표기법의 규칙

속성 식별자(이름)는 문자열 값이거나, 문자열을 참조하는 변수여야 합니다.
식별자에 공백을 포함할 수 있습니다. 예: [" property"]
문자열 식별자는 숫자로 시작할 수 있습니다. 예: ["1st"]

정리하면, 일반적인 경우에는 가독성이 좋은 점 표기법을 사용하고, 동적인 속성 이름이나 특수 문자·숫자로 시작하는 이름이 필요한 상황에서는 대괄호 표기법을 활용하는 것이 바람직합니다.