[객체 속성에 접근] 점, 대괄호

내가 이해하는 방법

객체 속성에 접근하는 방법 2가지 - 점, 대괄호

점 표기법 : 간결하다는 장점
대괄호 표기법 : 좀 더 포괄적임

변수로 접근할 때 대괄호를 쓴다는 게 무슨 소리인가 했더니 함수에서 값 받아와서 쓸 때가 변수로 접근하는 방법이었다.
위에 사진처럼 바꾸고 싶은 스타일 속성 이름을 style.changestyle 로 쓰면 changestyle 이라는 속성을 찾아버린다. 그리고 없으니까 changestyle 이라는 속성을 만들고 값을 집어넣는다. -> 점 표기법은 고정된 속성 이름에만 접근할 수 있다는 뜻도 이해 가능. 대괄호가 동적인(매개변수로 받을 때마다 바뀔 수 있는) 상황에 쓸 수 있다는 것도 이해 가능!

• obj.key 는 key 라는 이름의 속성에 접근
  obj[key] 는 key 라는 변수에 저장된 이름으로 접근해서 그 속성에 접근

점 표기법 (Dot Notation)

점 표기법은 주로 객체의 속성 이름이 알파벳 문자, 숫자, 밑줄(_)로만 구성되어 있고, 속성 이름이 유효한 자바스크립트 식별자인 경우에 사용됩니다.

let obj = {
    name: "John",
    age: 30
};

console.log(obj.name); // "John"

이 방법은 간결하고 가독성이 좋기 때문에 자주 사용됩니다. 그러나 속성 이름이 숫자로 시작하거나 공백을 포함하는 경우 등에는 사용할 수 없습니다.

대괄호 표기법 (Bracket Notation)

대괄호 표기법은 문자열 또는 변수로 객체의 속성 이름에 접근할 때 사용합니다. 특히, 속성 이름이 변수로 동적으로 결정되거나, 특수 문자(공백, 하이픈 등)가 포함된 경우에 유용합니다.

let obj = {
    "first name": "John",
    age: 30
};

console.log(obj["first name"]); // "John"

let key = "age";
console.log(obj[key]); // 30

대괄호 표기법의 장점은 다음과 같습니다:
1. 동적 속성 접근: 속성 이름이 변수로 저장된 경우.
2. 특수 문자 사용: 속성 이름에 공백, 하이픈 등 특수 문자가 포함된 경우.
3. 숫자로 시작하는 속성 이름: 점 표기법에서는 사용할 수 없는 속성 이름에 접근할 수 있습니다.

사용 예시

let obj = {
    name: "John",
    age: 30,
    "first name": "John",
    "123property": "value"
};

console.log(obj.name); // 점 표기법, 간결하고 직관적임
console.log(obj["age"]); // 대괄호 표기법, 유효하지만 점 표기법도 가능

let key = "first name";
console.log(obj[key]); // 대괄호 표기법, 동적 속성 접근

console.log(obj["123property"]); // 대괄호 표기법, 숫자로 시작하는 속성 이름

결론적으로, 두 방법 모두 객체의 속성에 접근할 수 있으며, 상황에 따라 적절한 방법을 선택하여 사용하면 됩니다. 점 표기법은 간결하고 가독성이 좋지만, 대괄호 표기법은 보다 유연하게 속성에 접근할 수 있습니다.