JavaScript 단점: Dot vs. Bracket - 모든 표기법이 동일하게 생성되는 것은 아닙니다.

객체의 속성에 액세스하는 두 가지 방법이 있음을 눈치채셨을 것입니다.

도트 표기

대괄호 표기

당연히, 당신은 그들이 같은 방식으로 행동한다고 ​​가정할 수 있지만, 그것은 사실이 아닙니다. 아래에서 몇 가지 차이점을 살펴보겠습니다.

점 표기법

점 표기법은 대괄호 표기법보다 더 자주 사용됩니다. 이유? 쓰는 글자수가 적습니다.

정말 간단합니다. 몇 개의 문자는 많지 않은 것처럼 보일 수 있지만 큰 코드베이스에서는 점 표기법을 사용하면 확실히 시간을 절약할 수 있습니다. 또한 읽기 쉬운 것으로 간주됩니다.

const car = {};

car.color = 'red';

car; // { color: red }

너무 놀랄 일은 없겠죠? 속성 이름을 만들 때 변수 이름 지정에 대해 동일한 규칙을 따릅니다. 식별자는 다음과 같아야 합니다.

대소문자 구분

유니코드 문자
*
$
또는
_
허용됩니다

숫자(0-9)는 사용할 수 있지만 첫 번째 문자로는 사용할 수 없습니다.

const obj = {};

obj.1 = 'value'; // ❌ SyntaxError  
obj.n@me = 'value'; // ❌ SyntaxError
obj."str" = 'value'; // ❌ SyntaxError

대괄호 표기

이것이 진정한 재미가 시작되는 곳이며 흥미로운 행동을 볼 수 있습니다. 위의 식별자에 대한 규칙을 기억하십니까? 글쎄, 그것들은 모두 잊어라. 다음을 사용하여 대괄호 표기법으로 속성을 만들 수 있습니다.

문자열

번호

변수

이상한 문자 (따옴표를 사용하는 한)

표현

문자열

이것은 본질적으로 점 표기법을 통해 속성을 생성하는 것과 동일합니다. 속성은 점 표기법으로도 액세스할 수 있습니다.

const obj = {};

obj['propName'] = 'value';

obj['propName']; // 'value'
obj.propName; // 'value'
obj[propName]; // ❌ ReferenceError - No variable propName can be found

번호

네, 가능합니다. 숫자를 사용하여 속성을 만들 수 있습니다. 아래에서 숫자 1은 속성으로 문자열화됩니다. 점 표기법을 사용하여 속성에 액세스할 수 없습니다.

const obj = {};

obj[1] = 'value';

obj['1']; // 'value'
obj[1]; // 'value'  - Property is already created, 1 is stringified
obj[2];  // undefined
obj.1; // ❌ SyntaxError  
obj."1"; // ❌ SyntaxError

변수

이 예에서 변수 이름은 문자열입니다. 마찬가지로 변수가 숫자인 경우 문자열로 강제 변환됩니다. 변수를 사용할 때 따옴표를 사용하지 않으며 괄호 안의 값이 평가됩니다.

const obj = {};

const myPropertyName = 'propName';

obj[myPropertyName] = 'value';

obj.propName; // 'value'
obj['propName']; // 'value' 

이상한 캐릭터

속성 이름에 유효하지 않은 문자를 사용하는 경우 따옴표로 묶어야 합니다. 다시, 우리는 문자열을 생성합니다.

const obj = {};

obj['@!£'] = 'value';

obj['@!£']; // 'value' 

표현식

마지막으로 아마도 가장 흥미로울 것입니다. 실제로 표현식을 속성 이름으로 사용할 수 있습니다. JavaScript는 평가 대상으로 간주합니다. 즉, 계산을 수행하거나 함수를 호출할 수도 있습니다. 유용하죠? 😂

const obj = {};

obj[2 + 2] = 'value';

obj['4']; // 'value' 

const myFunction = () => {
   return 'propName';
}

obj[myFunction()] = 'value';

obj['propName']; // 'value'

점 표기법은 변수가 아닌 식별자에 액세스합니다.

점 표기법을 사용할 때 JavaScript는 유효한 식별자가 있는 속성에 액세스하려고 한다고 가정합니다. 즉, 동일한 이름의 변수와 속성이 있는 경우 선언된 속성이 사용됩니다. 모르는 경우 예기치 않은 결과가 발생할 수 있습니다.

const myProp = 'value';

const obj = {
     value: 'my-value',
     myProp: 'my-second-value'
};

obj[myProp]; // 'my-value'
obj.myProp; // 'my-second-value'

마지막 생각들

그래서, 당신은 무엇을 사용해야합니까? 대부분의 경우 점 표기법을 사용하는 것이 좋습니다. 그러나 변수나 이상한 문자를 사용해야 하는 경우 대괄호 표기법이 적합합니다. 사용 사례에 따라 다릅니다. 👍

내 트위터에서 더 많은 웹 사색을 읽을 수 있습니다.