JavaScript에서 개체 속성에 액세스

거의 모든 JavaScript 값에는 속성이 있으며 해당 속성에 액세스하는 방법은 3가지가 있습니다.

도트 표기

대괄호

객체 파괴

점 표기법

점 표기법을 통해 객체의 속성에 액세스하려면 먼저 속성 이름을 알아야 합니다.

구문: expression.identifier
이를 더 잘 이해하기 위해 예를 살펴보겠습니다.

예 1:

const items = {
      food: "soup",
      "phone-1": "iphone 12"
}

// to access food property
items.food
// output => soup

위의 예에서 items는 속성에 액세스해야 하는 개체이고 food는 식별자입니다. 항목의 식품 속성에 액세스하는 것은 충분히 쉽습니다. 그러나 점 표기법을 통해 phone-1 속성에 액세스하려고 하면 작동하지 않습니다. 이유가 궁금하십니까? 유효한 식별자가 아니기 때문입니다. 그렇다면 해당 속성에 어떻게 액세스할 수 있습니까? 다음 섹션에서 다룰 것입니다.

이제 점 표기법에서 속성에 액세스하는 방법을 알았습니다.

Note: The identifier should be a valid identifier.

대괄호

대괄호를 통해 객체의 속성에 액세스하기 위해 미리 속성 이름을 알 필요가 없습니다. 즉, 속성 이름이 동적일 수 있습니다(실행 시간에 결정됨).

구문: expression[expression]
예제 1을 통해 이 방법을 이해해 봅시다. 예제 1에는 객체items가 있었고 속성이 두 개였습니다. 따라서 food 속성에 액세스하려면 다음과 같이 하면 됩니다. items[food] . 이제 두 번째 속성에 대해 액세스할 수 있다고 생각하십니까?

당신의 대답이 '예'라면 당신이 옳은 것입니다.

다음을 수행하여 phone-1 속성에 액세스할 수 있습니다. items["phone-1"] . 대괄호를 사용하는 경우 대괄호 사이의 표현식이 평가되고 문자열로 변환되어 속성 이름을 가져옵니다. 점 표기법을 사용하면 값만 가져옵니다.

객체 파괴

Destructuring은 배열, 객체 및 맵에서 데이터를 추출하여 새롭고 고유한 변수로 설정할 수 있는 JavaScript 표현식입니다. 객체 구조 분해는 기본적으로 동일한 이름을 가진 변수에 객체의 속성을 할당합니다.

아래 예를 참조하십시오. -

예 2:

const items = {
    food: "soup"
    "phone-1": "iphone 12"
}

const { food } = items;

food;
// output => soup

구조 분해는 속성food의 값으로 변수food를 정의합니다.

Note: The variable should have the same name as the property.

또한 속성 이름과 다른 변수 이름을 만들고 phone-1 속성에 액세스하기 위해 별칭을 사용할 수 있습니다.

구문: const { identifier: aliasIdentifier } = expression;
예를 들어 예제 2에서 phone-1 속성의 다른 변수 이름을 만들려면 다음을 수행합니다.

const {"phone-1": newVariable} = items

newVariable;
// output => iphone 12

결론

점 표기법을 통해 객체의 속성에 액세스하려면 속성 이름이 유효한 식별자여야 하고 미리 알려져 있어야 합니다. 반면 속성 이름이 동적이거나 유효한 식별자가 아닌 경우 대괄호를 통해 개체의 속성에 액세스하는 것이 좋습니다. 또한 객체 구조 분해는 속성을 변수로 직접 추출합니다.

Eloquent의 재미있는 사실

The elements in an array are stored as the array’s properties, using numbers as property names. Because you can’t use the dot notation with numbers and usually want to use a binding that holds the index anyway, you have to use the bracket notation to get at them.

이 블로그가 마음에 드셨나요? 아래 댓글로 알려주세요✌️.