JavaScript 개체에서 점과 대괄호 표기법의 차이점

JavaScript에서 Object는 모든 곳에서 사용되는 기본이 아닌 데이터 유형입니다. 더 구체적으로 말하면 개체에는 정렬되지 않은 키-값 쌍이 포함되어 있습니다. 우리 모두는 객체가 메서드, 배열 및 객체 자체를 포함한 모든 것을 포함할 수 있다는 것을 알고 있습니다.

Object의 데이터는 배열처럼 순서대로 저장되지 않기 때문에 배열에서 사용하던 인덱스로 쉽게 접근할 수 없습니다. 기본적으로 Object의 데이터에 액세스하는 두 가지 방법이 있습니다. 그들은로 알려진

점 표기법

괄호 표기법

두 가지 방법 모두 장단점이 있으며 특정 사용 사례가 있습니다. 그래서 그것들을 탐구합시다.

점 표기법으로 액세스

점 표기법부터 시작하겠습니다. 이름으로 우리는 그것이 사용법에 (.)점이 있다는 것을 이해할 수 있습니다. 아래 사람 개체를 참조하십시오.

const person = { 
    name: 'Alice',
    age: 20 
};

이 개체에서 이름 속성을 초과하려면 키-값 쌍(_name _and age)이 있어야 합니다. 간단하게 개체 이름(여기서는 사람)과 속성 자체 뒤에 (.)점을 사용해야 할 수 있습니다.

const person = { 
    name: 'Alice',
    age: 20 
};
console.log(person.name)  // Alice

개체 내부에 개체가 있는 경우 속성 이름 앞에 유사한 (.)점을 추가하여 쉽게 연결할 수 있습니다. 아래 예를 참조하십시오

const person = { 
    name: {
        firstName : 'Alice',
        middleName: 'Jay',
        lastName: 'Luke'
    },
    age: 20 
};

console.log(person.name.middleName)  // Jay

쉽고 간단하며 깨끗합니다. 오른쪽? 코드를 깔끔하게 유지하고 가독성도 향상시킵니다. 그래서 점 표기법이 가장 좋아하고 모두에게 사랑받는 이유입니다.

대괄호 표기법으로 액세스

이제 브래킷 표기법을 통해 동일한 작업을 수행하는 방법을 살펴보겠습니다.

const person = { 
    name: {
        firstName : 'Alice',
        middleName: 'Jay',
        lastName: 'Luke'
    },
    age: 20 
};

console.log(person['age'])  // 20  
console.log(person['name']['middleName'])  \\ Jay

대괄호 표기법에서 개체의 데이터에 액세스하려면 작은따옴표로 키를 감싸고 개체 이름 뒤의 대괄호 안에 공백이나 아무것도 없이 넣어야 합니다.

점 표기법보다 브래킷 표기법을 사용하는 경우.

따라서 두 가지 방법으로 개체의 속성에 액세스할 수 있음을 알 수 있습니다. 나를 포함한 대부분의 사람들은 사용하기 쉽고 코드를 깔끔하게 유지하며 다른 사람이 코드를 읽을 때 쉽게 이해할 수 있기 때문에 첫 번째 것을 선호합니다. 그러나 보다 구체적인 사용 사례가 있으므로 대괄호 표기법을 무시할 수는 없습니다. 아래에 표시된 예와 같습니다.

const obj = {
    name: "John",
    roll: 3,
}

const rollDynamic = 'roll'

console.log(obj.rollDynamic);  \\undefined

경우에 따라 개체의 속성에 동적으로 액세스해야 할 수도 있습니다. 즉, 명시적으로 호출하는 것입니다. 위의 예에서 우리는 _rollDynamic _Variable에 _roll _property를 유지하고 점 표기법을 사용하여 액세스하려고 시도했지만 정의되지 않았습니다.

여기 브라켓 표기법이 우월합니다. 하지만 어떻게? Bracket Notation으로 같은 코드를 보자.

const obj = {
    name: "John",
    roll: 3,
}

const rollDynamic = 'roll'

console.log(obj[rollDynamic]); // 3

브라켓 표기법으로 _roll _key의 값을 쉽게 얻었습니다.

점 표기법의 또 다른 제한 사항은 유효한 식별자만 처리할 수 있다는 것입니다. 식별자가 잘못된 키 이름은 점 표기법으로는 액세스할 수 없지만 대괄호 표기법으로는 액세스할 수 있습니다. 아래 예를 사용하여 기사를 마무리하겠습니다.

const employee = {
    '' : 'emptyString',
    123 : 123,
    123.321 : 123.321,
    'name-first': 'John',

}

console.log(employee['']) //emptyString
console.log(employee[123]) //123
console.log(employee[123.321]) //123.321
console.log(employee['name-first']) //John

이러한 모든 키는 점 표기법으로 액세스할 수 없습니다. 그렇게 하려고 하면 SyntaxError가 발생합니다.