Computed Property, Symbol()

Computed Property, Symbol()

Computed Property 📝

: 속성(Property) 이름을 동적으로 정의하거나 접근할 때 사용하는 방법이다.

Computed Property 사용법 및 접근법

const dynamicKey = "age";
const user = {};
user[dynamicKey] = 30; // user["age"] = 30

console.log(user); // { age: 30 }

[] 를 사용하여 객체 속성을 동적으로 추가 및 접근 가능하다.

객체의 속성 접근

• 점 표기법(.)은 문자열 리터럴로만 속성 접근 가능
• [] 표기법은 변수로 속성을 동적으로 접근할 때 사용

const key = "name";
const user = { name: "Mike" };

console.log(user.name); // Mike
console.log(user[key]); // Mike

---

Symbol() 📝

: ES6에서 도입괸 고유한 값(primitive value)을 생성하는 자바스크립트 내장객체

Symbol 로 생성된 값은 유일하고 다른 Symbol 값과 절대로 충돌하지 않는다.

예시코드

const sym1 = Symbol("description");
const sym2 = Symbol("description");

console.log(sym1 === sym2); // false

특징 ✔️

1. 유일성 보장

   : 같은 설명을 사용해도 각 Symbol 값은 항상 고유하다.

2. 숨겨진 속성

   : Symbol 키로 정의된 속성은 기본적으로 순회에 포함되지 않기 떄문에 숨겨진 속성을 정의할 때 유용하다.

   ( for .. in 반복문에서도 배제된다)

   
   

Symbol 을 사용하는 이유 🔍

1. 객체 키의 충돌 방지 - 유일성을 보장하기 때문에 다른 코드에서 정의된 속성과 충돌하지 않는 속성을 정의할 수 있다.

const user = {
  name: "Mike",
};

const showName = Symbol("show name");
user[showName] = function () { // Computed Property 사용
  console.log(this.name);
};

// 기존 속성과 충돌하지 않음
console.log(user); // { name: 'Mike' }
user[showName](); // Mike

2. 내부 메타데이터나 비공개 속성 정의 - 일반적인 루프나 Object.keys 로 접근할 수 없다.

const user = { name: "Mike" };
const id = Symbol("id");
user[id] = 12345;

// 일반적인 루프로 접근할 수 없음
console.log(Object.keys(user)); // ['name']
console.log(user[id]); // 12345

예제 코드로 복습하기 👩🏻‍💻

const user = {
  name: "Mike",
  age: 30,
};

// 나의 작업
//user.showName = function () {}; -> 그의 showName은 function () {}.
const showName = Symbol("show name");
user[showName] = function () {
  console.log(this.name); // Mike
};

user[showName]();

// 사용자가 보는 메시지
for (let key in user) {
  console.log(`그의 ${key}은 ${user[key]}.`);
}

만약 user.showName = function () {}; 이라고 작성 후 console을 확인하면 “그의 showName은 function () {}.” 이라는 말도 안 되는 문장이 출력된다.

따라서 showName 메서드로 일반 속성과 충돌하지 않는 고유 속성으로 정의하고,

user 객체에는 name 속성이 존재하며, 이때 showName 은 숨겨진 메소드처럼 동작한다.

외부에서 user[showName]을 제외한 다른 방식으로 이 메소드를 접근할 수 없다.

요약 👏

1. Computed Property([]):
   • 객체 속성을 동적으로 정의하거나 접근할 때 사용한다.
   • 변수, Symbol 등 동적인 키를 활용해야 할 때 유용하다.
2. Symbol:
   • 고유한 객체 키를 생성하는 ES6 문법.
   • 객체 속성의 충돌을 방지하거나 숨겨진 속성을 정의할 때 사용한다.
   • 순회와 Object.keys에서 제외된다.

---

참고자료

• https://ko.javascript.info/symbol
• https://www.youtube.com/watch?v=4_WLS9Lj6n4