key 이름 / 프로퍼티 접근 / 대괄호표기법

객체의 key의 이름을 정할 때 변수의 이름을 정할 때처럼 이름을 지어줄 수 있습니다.

 

변수의 이름으로 지정할 수 있는 단어라면 key의 이름으로 사용할 수 있는 것입니다.

 

하지만 key는 변수보다 유연한 특성을 가지기 때문에 변수에 사용할 수 있는 이름을 key의 이름으로 사용할 수 있으나,

 

key의 이름을 모두 변수에 사용할 수는 없습니다.

 

예시 코드와 함께 살펴보겠습니다.

 

 

 

아래 예시 코드는 key의 이름으로 2개의 단어를 주었을 때 오류가 발생한 상황입니다.

key의 이름을 2개의 단어로 지정하면 JavaScript에서는 인식을 할 수 없게 됩니다.

 

2개의 단어가 어떻게 결합되는지 파악하려 하지만 처음 나와있는 first가 연산자도 아니고 키워드도 아니기 때문에 

 

first가 name에 대해 어떤 작업을 수행하는지 파악할 수가 없는 것입니다.

 

이는 변수에 이름을 지정할 때와 마찬가지인 상황입니다.

 

이때 사용하는 방법이 camel 표기법이나, snake 표기법을 들 수 있지만 key에는 다른 방법이 하나 있습니다.

 

const person = {
  "first name": "Lee", // key의 이름으로 문자열을 설정하였습니다.
  age: 30,
  hobbies: ["Sports", "Cooking"],
};

key의 이름으로 문자열을 사용하는 방법입니다.

 

객체의 key는 어떤 이름을 입력하든 자동으로 문자열로 자동 변환이 일어납니다.

 

즉 person 객체 안에 있는 age 또한 JavaScript에서 문자열로 변환이 된 것입니다.

 

따라서 객체는 키에 대한 딕셔너리라고 할 수 있는데 문자열 값과 모든 종류의 value에 대한 딕셔너리인 셈입니다.

 

하지만 첫 번째 예시 코드에서는 first name을 자동 변환을 할 수 없었는데 이는 JavaScript에서 해당 값을 변환할 때  이미 두 개로 나뉘어 있기 때문에 유효하지 않은 방식으로 해석할 여지가 있기 때문입니다.

 

따라서 2개 이상의 단어를 key의 이름으로 사용할 경우 해당 단어들을 key의 이름으로 사용할 것이며 연산이 필요하지 않다는 점을 문자열로 만들어 알려주게 되면 해당 문자열을 key의 이름으로 사용이 가능해지게 됩니다.

 

 

 

다음으로 key의 이름을 문자열로 지정해주었을 때 접근하는 방법을 살펴보겠습니다.

기존의 점 표기법으로 접근을 하게 되면 오류가 발생하게 됩니다.

 

이는 javaScript에서 표현식으로 분석하려고 하기 때문입니다.

 

즉 두 단어가 있으면 둘 중 하나는 반드시 연산자 혹은 키워드여야 정상적으로 작동하기 때문입니다.

 

따라서 first가 무엇인지 파악할 수 없기 때문에 어떤 작업을 수행해야 할지 알 수 없기 때문에 오류가 발생하게 됩니다.

 

const person = {
  "first name": "Lee",
  age: 30,
  hobbies: ["Sports", "Cooking"],
};

console.log(person["first name"]); // Lee 출력

위의 예시 코드의 방법을 사용하면 해당 key에 접근이 가능합니다.

 

대괄호 표기법을 이용해여 대괄호 안에 key의 이름을 입력해주어 접근하는 방식입니다.

 

const person = {
  "first name": "Lee",
  age: 30,
  hobbies: ["Sports", "Cooking"],
};

console.log(person[age]); // age is not defined

console.log(person["age"]); // 올바른 접근 방식

주의하실 점은 위의 예시 코드처럼 대괄호 안에 큰 따옴표나 작은 따옴표 없이 key의 이름을 주게 되면 객체 외부에 있는 변숫값을 읽어 들이게 된다는 것입니다.

 

상단에서 설명한 내용처럼 JavaScript가 입력한 key의 이름을 문자열로 자동 변환하기 때문에 문자열로 이름을 지정한 key에 접근하는 방식과 같은 방식으로 접근해주어야 합니다.

 

 

 

---

대괄호 표기법에 대해 조금 더 자세히 살펴보도록 하겠습니다.

 

 

const person = {
  "first name": "Lee",
  age: 30,
  hobbies: ["Sports", "Cooking"],
};

const keyName = "first name";

console.log(person[keyName]); // Lee 출력

대괄호 표기법을 사용하면 프로퍼티에 동적으로 접근이 가능합니다.

 

상수에 문자열로 지정한 key 값을 할당하여 상수를 대괄호 안에 입력해주면 프로퍼티에 접근이 가능합니다.

 

상단에서 설명했듯이 작은 따옴표나 큰 따옴표 없이 대괄호에 key의 이름을 주게 되면 객체 외부에 있는 값, 즉 전역적으로 사용 가능한 변수나 상수에 접근하게 되기 때문입니다.