객체의 속성을 설정, 변경, 액세스하는 방법에는 점 표기법과 괄호 표기법 두 가지가 있습니다.
점 표기법
이전 예에서 볼 수 있듯이 점 표기법은 객체와 액세스되는 속성 키 사이에 마침표 (.
)를 사용합니다.
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." }