객체, 객체 속성 접근 -> 점(.)표기 대괄호([])표기법의 특징 및 차이점

객체 (Objects)

JavaScript 언어 개요 - JavaScript | MDN

 

 

JavaScript 객체는 간단히 이름-값 쌍(name-value pairs)의 모임입니다. 따라서 JavaScript의 객체의 모임은 다음과 비슷합니다.

 

JavaScript의 객체는 해시(hashes)입니다.

정적으로 타입이 지정된 언어의 객체와 달리, JavaScript의 객체는 모양이 고정되어 있지 않습니다. 속성은 언제든지 추가, 삭제, 재정렬, 변경 또는 동적으로 쿼리할 수 있습니다. 객체 키는 항상 strings 또는 기호(symbols)입니다. 정수인 배열 인덱스도 실제로는 문자열입니다.

 

 

 

객체는 일반적으로 리터럴 구문을 사용하여 생성됩니다.

const person = {
  name: "Alice",
  age: 25
};

console.log(person.name); // "Alice"
console.log(person.age);  // 25

 

 

 

 

 

객체 속성은 점(.) 또는 대괄호([])를 사용하여 접근할 수 있습니다.

 

점 표기법을 사용할 때, 키는 유효한 식별자여야 합니다.

 

반면 대괄호를 사용하면 동적 키 값으로 객체를 인덱싱할 수 있습니다.

 

// 점 표기법
obj.name = "Simon";
const name = obj.name;

// 대괄호 표기법
obj["name"] = "Simon";
const name = obj["name"];

// 변수를 사용하여 키를 정의할 수 있습니다.
const userName = prompt("what is your key?");
obj[userName] = prompt("what is its value?");

 

 

점 표기법 vs 대괄호 표기법 _차이점 요약

1. 식별자 유효성:
   • 점 표기법: 속성 이름이 유효한 JavaScript 식별자여야 합니다. 예를 들어, 공백이나 특수 문자가 포함된 이름은 사용할 수 없습니다.
   • 대괄호 표기법: 속성 이름이 유효한 식별자가 아니어도 됩니다. 공백, 특수 문자 등이 포함된 이름도 사용할 수 있습니다.
2. 동적 속성 접근:
   • 점 표기법: 정적 속성 접근에 적합합니다. 속성 이름이 코드에 하드코딩되어 있어야 합니다.
   • 대괄호 표기법: 동적 속성 접근에 적합합니다. 속성 이름을 변수나 표현식으로 지정할 수 있습니다.
3. 문자열 리터럴:
   • 점 표기법: 속성 이름을 문자열로 표현하지 않습니다.
   • 대괄호 표기법: 속성 이름을 문자열로 지정해야 합니다. 변수도 사용할 수 있습니다.

사용 예제 비교

점 표기법:

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020
};

console.log(car.brand); // "Toyota"
console.log(car.model); // "Corolla"
console.log(car.year);  // 2020

 

대괄호 표기법:

const car = {
  "car brand": "Toyota",
  model: "Corolla",
  year: 2020
};

console.log(car["car brand"]); // "Toyota"
console.log(car["model"]);     // "Corolla"
console.log(car["year"]);      // 2020

const property = "model";
console.log(car[property]);    // "Corolla"

 

 

 

-------------------< 예시를 통한 이해 >------------------------------------------------------------------------------------------------------

 

동적 키 값을 사용하지 않는 경우

먼저, 정적인 키 값을 사용하는 예제를 봅시다.

 

const person = {
  name: "Alice",
  age: 25
};

console.log(person["name"]); // "Alice"
console.log(person["age"]);  // 25

 

여기서 "name"과 "age"는 문자열 리터럴로 고정되어 있습니다. 즉, 속성 이름이 코드 작성 시에 이미 정해져 있습니다.

동적 키 값을 사용하는 경우

이제 동적 키 값을 사용하는 예제를 살펴봅시다.

 

const person = {
  name: "Alice",
  age: 25
};

// 동적으로 속성 이름을 결정하는 변수
const key = "name";

console.log(person[key]); // "Alice"

 

여기서 key 변수는 "name"이라는 값을 가지고 있으며, 대괄호 표기법을 사용하여 person 객체의 "name" 속성에 접근하고 있습니다. 이 방식은 속성 이름을 동적으로 결정할 수 있게 해줍니다.

실용적인 예제

동적 키 값을 사용하는 방식은 종종 함수 내에서 유용하게 사용됩니다. 예를 들어, 함수가 다양한 속성 이름을 처리해야 할 때 유용합니다.

 

function getPropertyValue(obj, key) {
  return obj[key];
}

const person = {
  name: "Alice",
  age: 25
};

console.log(getPropertyValue(person, "name")); // "Alice"
console.log(getPropertyValue(person, "age"));  // 25

이 함수 getPropertyValue는 객체 obj와 키 key를 받아서, 해당 키에 대응하는 값을 반환합니다. 이 경우, 키 값은 함수 호출 시에 동적으로 결정됩니다.

동적 키 값의 장점

1. 유연성: 속성 이름을 실행 중에 결정할 수 있으므로, 더 유연한 코드를 작성할 수 있습니다.
2. 재사용성: 함수나 로직이 다양한 속성 이름을 처리할 수 있습니다.
3. 동적 데이터 처리: API 응답이나 사용자 입력 등 동적으로 결정되는 데이터를 처리할 때 유용합니다.

요약

대괄호 표기법을 사용하면, 속성 이름을 고정된 문자열이 아닌 변수나 표현식으로 지정할 수 있습니다. 이렇게 하면 속성 이름을 코드 실행 중에 동적으로 결정할 수 있어, 더 유연하고 재사용 가능한 코드를 작성할 수 있습니다.