속성 접근자

객체의 속성을 설정, 변경, 액세스하는 방법에는 점 표기법괄호 표기법 두 가지가 있습니다.

이전 예에서 볼 수 있듯이 점 표기법은 객체와 액세스되는 속성 키 사이에 마침표 (.)를 사용합니다.

const myObj = {
    "myProp": "String value."
};

myObj.myProp;
> "String value."

점 표기법을 사용하여 할당 연산자를 통해 새 속성에 액세스하거나, 속성을 변경하거나, 새 속성을 만들 수 있습니다.

const myObj = {};

myObj.myProp = "String value.";

myObj;
> Object { myProp: "String value." }

점 표기법을 사용하여 속성 키를 체이닝하면 객체의 속성인 객체의 속성에 액세스할 수 있습니다.

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myProp.childProp;
> true;

그러나 체인에 지정된 키가 정의되지 않을 수 있는 경우 이 문법을 사용하면 오류가 발생할 수 있습니다. 다음 예에서 myMissingPropmyObj 객체의 속성이 아니므로 myObj.myMissingProp에 액세스하려고 하면 undefined이 됩니다. 그런 다음 undefined의 속성에 객체인 것처럼 액세스하려고 하면 오류가 발생합니다.

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

> myObj.myMissingProp
> undefined

myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined

이 문제를 해결하기 위해 ES2020에서는 객체의 중첩된 속성에 안전하게 액세스할 수 있는 '선택적 체이닝 연산자' (?.)를 도입했습니다.

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myMissingProp?.childProp;
> undefined

점 표기법을 사용하여 액세스하는 키는 문자열 리터럴과 달리 따옴표로 묶이지 않습니다. 즉, 점 표기법을 사용하여 유효한 식별자인 속성 키에만 액세스할 수 있습니다.

const myObj = {
    "1": true,
    "key with spaces": true
};

myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal

myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'

따라서 가능하면 항상 속성 키를 지정할 때 식별자 규칙을 따르는 것이 좋습니다. 지정된 키에 이 작업을 적용할 수 없는 경우 대체 괄호 표기법 문법을 사용하여 식별자 규칙을 따르지 않는 문자열 기반 객체 키를 설정하고 액세스할 수 있습니다.

괄호 표기법

대괄호 표기법은 속성 키를 나타내는 문자열 (또는 기호)을 평가하는 값이 포함된 대괄호 ([]) 집합을 사용합니다.

const myObj = {
    "myProp": "String value."
};

myObj["myProp"];
> "String value."

이 문법은 괄호 안의 값이 데이터 유형과 관계없이 문자열 리터럴로 평가되므로 훨씬 더 관대하며 혼동을 줄 수 있을 만큼 관대할 수 있습니다. 예를 들어 여기서는 불리언 값 false 및 숫자 값 10가 문자열 리터럴 키 "false""10"와 연결된 속성에 액세스하는 데 사용됩니다.

const myObj = {
    "false": 25,
    "10" : true,
    "key with spaces": true
};

myObj[false];
> 25

myObj[10];
> true

myObj["key with spaces"];
> true

이 문법의 강점은 동적으로 생성된 문자열을 사용하여 속성에 액세스할 수 있는 유연성입니다. 다음 예에서는 랜덤 숫자를 사용하여 객체의 세 가지 속성 중 하나를 선택합니다.

const colors = {
    "color1" : "red",
    "color2" : "blue",
    "color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );

colors[ "color" + randomNumber ];
> "blue"

점 표기법과 마찬가지로 대괄호 표기법을 사용하여 할당 연산자를 사용하여 새 속성에 액세스하고 만들 수 있습니다.

const myObj = {};

myObj[ "myProp" ] = "String value.";

myObj;
> Object { myProp: "String value." }