속성 접근자

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

점 표기법

이전 예에서 본 바와 같이 점 표기법은. 객체 및 액세스되는 속성 키:

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;

그러나 체인에 지정된 키가 오류를 일으킬 수 있습니다. 다음 예에서 myMissingProp는 myObj 객체의 속성이기 때문에 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." }