바닐라 JavaScript로 객체에 항목을 추가하는 방법

JavaScript에는 개체에 항목을 추가하는 두 가지 방법이 있습니다.

점 표기:object.thingToAdd
대괄호 표기법:object['thingToAdd'

점 표기법

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

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

// Add item to dog object
dog.breed = "Rottweiler mix"

// Log object to console
console.log(dog)
// { name: "Naya", age: "2", color: "black", breed: "Rottweiler mix", }

점 표기법입니다.

대괄호 표기

대괄호 표기법은 개체에 속성을 추가하는 방법에 대한 제한이 적습니다. 이전과 동일한 dog 개체를 살펴보겠습니다.

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

이제 대괄호 표기법을 사용하여 속성과 값을 추가해 보겠습니다.

dog["weight"] = "34kg"

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

보시다시피, 이 특정 예에서 점 표기법과 정확히 동일하게 작동합니다.

이제 두 가지 방법을 비교해 보겠습니다.

점 표기법과 대괄호 표기법

번호를 추가해 보세요. 점 표기법:을 사용하여 새 속성 이름으로 사용

// Dot notation
dog.1 = "Property 1"
console.log(dog)
// Uncaught SyntaxError: Unexpected number

오류가 발생했습니다! 그 이유는 점 표기법을 사용하면 숫자를 사용할 수 없기 때문입니다. 속성 이름에서.

하지만 할 수 있습니다. 식별자가 문자열 형식인 경우 대괄호 표기법과 함께 숫자를 사용하십시오.

// Bracket notation
dog["1"] = "Property 1"
console.log(dog)
// { 1: "Property 1", age: "2", color: "black", name: "Naya" }

다시 말하지만 대괄호 표기법은 점 표기법보다 유연합니다.

어느 것을 사용해야 합니까?

점 표기법은 읽기 쉽기 때문에 가능하면 언제든지 사용하는 것이 좋습니다. 그러나 객체에 속성을 추가해야 하고 속성이 숫자, 특수 기호 또는 예약된 키워드로 시작해야 할 때마다 대괄호 표기법을 사용하십시오.

점 표기법:

속성 식별자(이름) 및 영숫자(a-z) 문자, 밑줄(_만 포함) ) 또는 $ .
속성 식별자는 할 수 없습니다. 숫자로 시작하세요.
속성 식별자는 할 수 없습니다. 변수를 포함합니다.

대괄호 표기법:

속성 식별자(이름)는 문자열 값 유형 또는 참조하는 변수여야 합니다. 문자열.
식별자에 공백을 사용할 수 있습니다. [" property"] ,
문자열 식별자는 할 수 있습니다. 숫자로 시작 ["1st"]