[RN] JS- 계산된 속성 이름, 속성 정의 및 접근 방법

계산된 속성 이름(Computed Property Name)

• 계산된 속성 이름: 객체 리터럴에서 속성 이름을 동적으로 할당할 수 있게 한다. 즉, 속성 이름을 고정된 문자열이 아니라, 변수나 표현식의 값을 사용하여 동적으로 결정될 수 있도록 한다. 
• 계산된 속성 이름을 사용할 때는 대괄호('[]')를 사용하며, 대괄호 안의 표현식은 항상 문자열로 변환된다.

const ID = 'task_1';
const newTask = 'Learn React Native';

const newTaskObject = {
  [ID]: { id: ID, text: newTask, completed: false },
};

console.log(newTaskObject);

// {
//   task_1: { id: 'task_1', text: 'Learn React Native', completed: false }
// }

https://jake-seo-dev.tistory.com/369

속성 정의 및 접근 방법

객체에서 속성을 정의하고, 또 그 속성에 접근하는 방법은 크게 두 가지로 나눌 수 있다. 

• 점 표기법 ex. obj.validName - 유효한 키일 경우
• 대괄호 표기법 ex. obj['invalid name'] - 모두 적용

const obj = {
  name: 'John',       // 유효한 식별자
  age: 30,            // 유효한 식별자
  $salary: 5000,      // 유효한 식별자
  _private: 'secret'  // 유효한 식별자
};

console.log(obj.name);       // 'John'
console.log(obj.age);        // 30
console.log(obj.$salary);    // 5000
console.log(obj._private);   // 'secret'

console.log(obj['name']);       // 'John'
console.log(obj['age']);        // 30
console.log(obj['$salary']);    // 5000
console.log(obj['_private']);   // 'secret'

 

유효한 키일 지라도 대괄호 표기법을 사용하려면 따옴표로 묶어주어야 한다. 

const object = {
  'first name': 'John',  // 문자열 속성 이름
  'last-name': 'Doe',    // 문자열 속성 이름
  '123number': 456,       // 문자열 속성 이름
};

console.log(object['first name']);  // 'John'
console.log(object['last-name']);   // 'Doe'
console.log(object['123number']);   // 456

 

그리고 계산된 속성 이름 적용 방법!

const name = 'hailey';
const person = {
	[name]: 'hailey'
};

console.log(person.hailey); // hailey
console.log(person[name]); // hailey