객체의 속성을 설정, 변경, 액세스하는 방법에는 점 표기법과 괄호 표기법의 두 가지가 있습니다.
점 표기법
이전 예에서 본 바와 같이 점 표기법은.
객체 및 액세스되는 속성 키:
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." }