[JavaScript] 객체 프로퍼티에 접근하기

 

 

객체 프로퍼티(속성)에 접근하기

 

1. 점 표기법 (Dot notation)

객체 내에 캡슐화되어 있는 것에 접근하려면 먼저 점을 입력해야 합니다.
그다음 접근하고자 하는 항목을 적습니다.

person.name; // "John"
person.age; // 30
person.sayHello(); // Hi! I'm John

 

 

2. 대괄호 표기법 (Bracket notation)

대괄호 표기법은 프로퍼티 이름을 문자열로 사용하여 접근하는 방법입니다.

점 표기법으로는 사용할 수 없는 프로퍼티 이름이거나 동적으로 프로퍼티를 선택해야 할 때 유용합니다.

console.log(person["name"]); // "John"
console.log(person["age"]); // 30

 

 

점 표기법과 대괄호 표기법의 차이점

점 표기법은 속성 이름이 유효한 자바스크립트 식별자일 때 사용합니다.

여기에는 공백, 특수 문자, 숫자로 시작하는 이름이 포함되지 않습니다.

let person = {
  name: "Alice",
  age: 30,
};

console.log(person.name); // "Alice"
console.log(person.age); // 30

 

 

대괄호 표기법은 속성 이름에 공백이나 숫자, 특수 문자가 포함되거나,

속성 이름이 동적으로 결정될 때는 대괄호 표기법을 사용하여

변수 값을 프로퍼티 이름으로 사용할 수 있습니다.

// 속성 이름이 공백이나 숫자, 특수문자
let obj = {
  "first name": "Bob",
   2: 'Doe',
  "age!": 25,
};

console.log(obj["first name"]); // Bob
console.log(obj[2]); // Doe
console.log(obj["age!"]); //25


const key = 'age';
  const person = {
    name: 'John',
    [key]: 30 // 변수 `key`의 값이 프로퍼티 이름으로 사용됨
  };

  console.log(person.age); // 30

  // 동적으로 변수 값을 사용하여 프로퍼티 추가
  const dynamicKey = 'address';
  person[dynamicKey] = '123 Main St';
  console.log(person.address); // 123 Main St

 

 

Recap

• 점 표기법: 코드가 간결하고 가독성이 좋습니다.
  속성 이름이 고정된 경우 사용합니다.
• 대괄호 표기법: 속성 이름에 공백이나 특수 문자가 포함되거나 동적으로 속성 이름을 참조할 때 사용합니다.