[JavaScript] Object['key'] & Object.key 차이

js에서 객체의 프로퍼티를 접근하는 방법은 두가지의 표기법이 존재한다. (.점 표기법과, []대괄호 표기법)

객체의 프로퍼티를 접근하는 방법과 표기법 사용 방법을 정리하려고 합니다.

목차
1.	객체의 프로퍼티를 접근하는 방법
2.	어떤 표기법을 사용하는 것이 좋은가?
3.	점 표기법의 한계
4.	동일한 이름의 식별자와 속성이 존재하는 경우
5.	결론

 

---

1.  객체의 프로퍼티를 접근하는 방법

점( . ) 표기법과 대괄호( [] ) 표기법을 사용하여 접근합니다.

        const objProperties = "title";
        const obj = {
          title: "Apple",
        };
        // .점 표기법
        console.log(obj.title); // output: Apple
        // []대괄호 표기법_1.문자열로 접근
        console.log(obj["title"]); // output: Apple
        // []대괄호 표기법_2.변수로 접근
        console.log(obj[objProperties]); // output: Apple

---

[ 배열 요소가 객체인 경우 ]

배열 arr의 1번째 인덱스인 요소의 title 프로퍼티를 접근하는 코드입니다.

        const objProperties = "title";
        const obj = [
          {
            title: "Apple",
          },
          {
            title: "Banana",
          },
          {
            title: "Lemon",
          },
        ];
        // .점 표기법
        console.log(obj[1].title); // output: Banana
        // []대괄호 표기법_1.문자열로 접근
        console.log(obj[1]["title"]); // output: Banana
        // []대괄호 표기법_2.변수로 접근
        console.log(obj[1][objProperties]); // output: Banana

[ 중첩 객체의 프로퍼티를 접근하는 방법 ]

객체 obj의 book 프로퍼티의 title을 접근하는 코드입니다.

        const objBook = "book";
        const objTitle = "title";
        const obj = {
          title: "Apple",
          book: {
            title: "Red Apple",
          },
        };
        // .점 표기법
        console.log(obj.book.title); // output: Red Apple
        // []대괄호 표기법_1.문자열로 접근
        console.log(obj["book"]["title"]); // output: Red Apple
        // []대괄호 표기법_2.변수로 접근
        console.log(obj[objBook][objTitle]); // output: Red Apple

---

2. 어떤 표기법을 사용하는 것이 좋은가?

출력 결과는 동일하지만, 기본적으로 점 표기법을 사용하는 것이 좋습니다.

[ 점 표기법을 권장하는 이유 ]

• 사용하기가 쉽다.
• 대괄호 표기법에 비해 타이핑이 빠르다.

---

3. 점 표기법의 한계

점 표기법은 식별자로 동작한다는 한계가 있습니다.

 

[ 식별자 작성 규칙 ]

• 대소문자를 구분한다.
• 일부 특수 문자 $, _ 를 허용한다.
• 숫자로 시작할 수 없다.

 

아래 코드는 obj의 프로퍼티가 대소문자 구분이 되어있으며, 숫자로 시작하는 경우입니다.

※ 특수한 경우를 보여주기 위해 obj의 프로퍼티를 작은 따옴표( ' ' )를 사용하여 선언하였습니다.

        const obj = {
          "TITLE": "APPLE",
          "title": "apple",
          "$name": "$name",
          "name-123": "name-123",
        };
        console.log(obj.TITLE); // output: APPLE
        console.log(obj.title); // output: apple
        console.log(obj.$name); // output: $name
        console.log(obj.name-123); //output: NaN

 

점 표기법을 사용하여 obj.name-123을 접근하는 경우 식별자 규칙을 위반하여 문제가 발생합니다.

하지만, 대괄호 표기법을 사용한다면 문제가 되지 않습니다.

        const obj = {
          "TITLE": "APPLE",
          "title": "apple",
          "$name": "$name",
          "name-123": "name-123",
        };
        console.log(obj["TITLE"]); // output: APPLE
        console.log(obj["title"]); // output: apple
        console.log(obj["$name"]); // output: $name
        console.log(obj["name-123"]); //output: name-123

---

4. 동일한 이름의 식별자와 속성이 존재하는 경우

동일한 이름의 식별자와 속성이 존재하는 경우에는 표기법에 따라 다르게 동작합니다.

의도되지 않은 결과가 나올 수 있으므로 주의하도록 합니다.

        const title = "score";
        const obj = {
          title: "Apple",
          score: 100,
        };
        // obj의 title 속성에 접근한다.
        console.log(obj.score); // output: 100
        // obj의 score 속성에 접근한다.
        console.log(obj[title]); // output: 100

---

5. 결론

일반적으로 (.)점 표기법을 사용하는 것이 좋습니다.

그러나 식별자 또는 변수로 속성을 접근해야 하는 경우에는 대괄호 표기법을 사용하는 것이 좋습니다.

---

'평범한 직장인의 공부 정리' 블로그로부터 옮김
🔗 링크: https://developer-talk.tistory.com/155

개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D