점 표기법 대 괄호 표기법

12895 단어 programming webdev beginners javascript

두 표기법 모두 개체 속성에 액세스할 수 있습니다. 하지만 질문은 종종 어떤 것을 사용해야 하느냐입니다🤔. 더 이상 궁금해하지 말고 에어비앤비의 스타일 가이드를 따르세요. 항상 도트를 사용하십시오. 그리고 변수로 객체 속성에 접근하고 싶을 때 Bracket 👍을 사용하세요.

// Dot notation vs Bracket notation

const variable = 'cookie';

const snack = {
  cookie: '🍪'
};

// ✅ Dot: access property
snack.cookie;

// ✅ Bracket: access property with variable
snack[variable];

개체 속성에 액세스

개체 속성에 액세스하는 방법에는 두 가지가 있습니다. 점과 괄호.

const obj = {
  name: 'value'
};

// Dot Notation
obj.name; // 'value'

// Bracket Notation
obj['name']; // 'value'

승리를 위한 점 표기법

처음 이것을 배웠을 때를 기억합니다. 두 가지 방법을 이해하는 것은 간단했습니다. 너무 복잡하지 않습니다. 그러나 내 관심사는 다른 표기법에 관한 것이 아닙니다. 나의 가장 큰 딜레마는 무엇을 사용해야 하는가??였습니다. 🤯

당신이 나와 같다면! 여기에 고장이 있습니다. 둘 다 똑같이합니다. 그래서 여기에 간단한 규칙이 있습니다. 기본적으로 점 표기법을 사용합니다.

✅ 점 표기법 🏆

읽기가 훨씬 더 쉽습니다

입력하는 것이 훨씬 빠릅니다.

점 표기법의 한계

어떤 규칙이든 항상 예외가 있습니다 😂. 그럼 몇 가지 제한 사항을 살펴보겠습니다.

ㅏ. 식별자 작업 문제
비. 변수 작업 문제

ㅏ. JavaScript 식별자 작업

점 표기법 사용의 주요 한계 중 하나는 유효한 식별자에서만 작동한다는 것입니다. 먼저 식별자가 무엇인지 정의하겠습니다.

An identifier is a sequence of characters in the code that identifies a variable, function, or property.

MDN web docs

식별자에는 다음과 같은 규칙이 있습니다.

대소문자 구분

은 유니코드 문자를 포함할 수 있습니다

$ , - , 허용됨

숫자(0-9)는 괜찮지만 숫자로 시작할 수 없습니다

.

따라서 이러한 예제 중 일부를 샘플링하고 Dot 표기법을 사용할 때 어떤 일이 발생하는지 봅시다.

const obj = {
  123: 'digit',
  123name: 'start with digit',
  name123: 'does not start with digit',
  $name: '$ sign',
  name-123: 'hyphen',
  NAME: 'upper case',
  name: 'lower case'
};

메모:

따옴표를 포함해야 하는 일부 속성 이름을 알 수 있습니다. 예: 123name . 그렇지 않으면 개체가 유효하지 않은 것으로 간주되어 구문 오류가 발생합니다.

점 표기법

obj.123;      // ❌ SyntaxError
obj.123name;  // ❌ SyntaxError
obj.name123;  // ✅ 'does not start with digit'
obj.$name;    // ✅  '$ sign'

obj.name-123;  // ❌ SyntaxError
obj.'name-123';// ❌ SyntaxError

obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'

obj.'name-123' 예에서 내가 영리하게 따옴표를 사용하려고 어떻게 노력했는지 확인하십시오. 글쎄, 하지마, 여전히 작동하지 않을테니까 😂.

괄호 표기법

그러나 이 중 어느 것도 대괄호 표기법의 문제가 아닙니다.

obj['123'];     // ✅ 'digit'
obj['123name']; // ✅ 'start with digit'
obj['name123']; // ✅ 'does not start with digit'
obj['$name'];   // ✅ '$ sign'

obj['name-123']; // ✅ 'does not start with digit'

obj['NAME']; // ✅ 'upper case'
obj['name']; // ✅ 'lower case'

평결

속성 키로 유효하지 않은 JavaScript 식별자가 있다고 생각되면 대괄호 표기법 👍을 사용하십시오.

비. 변수를 사용하여 속성에 액세스

점 표기법의 또 다른 제한 사항은 변수 작업입니다. 브래킷 표기법을 반드시 사용해야 합니다. 메모! 대괄호 표기법에서 변수를 참조할 때 따옴표를 건너뛰어야 합니다. 이것이 속성 키에 액세스하는 대신 변수를 처리하고 있음을 알 수 있는 방법입니다.

const variable = 'name';

const obj = {
  name: 'value'
};

// Bracket Notation
obj[variable]; // ✅ 'value'

// Dot Notation
obj.variable; // undefined

정의되지 않은 속성

내가 지적하고 싶은 매우 중요한 한 가지. 변수에 점 표기법을 사용하려고 하면 undefined 가 반환된다는 것을 알 수 있습니다. 존재하지 않는 속성에 액세스하려고 하면 undefined 가 반환되기 때문입니다.

const emptyObj = {};

obj.name; // undefined
obj['name']; // undefined

그래서 여기 조심해야 할 부분이 있습니다. 이전의 변수 객체 예제로 돌아가 봅시다. 점 표기법을 사용한 경우 유효한 JavaScript 식별자로 속성에 액세스하려고 한다고 가정합니다. 무언가를 반환하기 때문에 모든 것이 잘 작동한다고 생각할 수 있습니다. 후드 아래에서 그렇습니다. 그러나 당신의 의도가 변수를 사용하는 것이라면, 그것은 당신을 버릴 수 있습니다. 이것은 확실히 디버깅 두통의 원인이 될 수 있습니다. 그러니 조심하세요!!

const variable = 'name';

const obj = {
  name: 'value',
  variable: '👻'
};

// Bracket Notation
obj[variable]; // ✅ 'value'

// Dot Notation
obj.variable; // '👻'