식별자

코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열

식별자 명명규칙

• 대소문자 구별
• 유니코드 글자, $, _, 숫자(0-9)
• 숫자로 시작할 수 없다

프로퍼티 접근하기

const obj = {
  1: '하나', // 숫자도 객체의 키로는 사용 가능
  'ab-cd': 'ABCD', // 문자 포함 시 키도 따옴표로 감싸야 함
  's p a c e': 'Space'
}

// 대괄호 프로퍼티 접근 연산자로만 가능
console.log(
  obj[1],
  obj['ab-cd'],
  obj['s p a c e']
);

// ⚠️ 오류 발생
// console.log(
//   obj.1,
//   obj.ab-cd,
//   obj.s p a c e
// );

표현식을 이용하여 동적으로 키값 정의하기

let idx = 0;
const  obj = {
  ['key-' + ++idx]: `value-${idx}`,
  ['key-' + ++idx]: `value-${idx}`,
  ['key-' + ++idx]: `value-${idx}`,
  [idx ** idx]: 'POWER'
}

console.log(obj);	//{27: 'POWER', key-1: 'value-1', key-2: 'value-2', key-3: 'value-3'}

객체나 배열을 키값으로 사용시

• 객체와 배열이 그 자체가 아니라 문자열로 치환되어 키가 된다. 사용하지 말기!

const objKey = { x: 1, y: 2 };
const arrKey = [1, 2, 3];

const obj = {
  [objKey]: '객체를 키값으로',
  [arrKey]: '배열을 키값으로'
}
console.log(
  obj[objKey],
  obj[arrKey]
);	// 객체를 키값으로 배열을 키값으로

// 아무 객체나 넣었는데도 결과는 똑같이 출력이 된다??!!
console.log(
  obj[{ a: 1, b: 2, c: 3 }], // 내용이 다른 객체
  obj['1,2,3'] // 문자열
);	// 객체를 키값으로 배열을 키값으로

// 로그를 펼쳐 키값을 볼 것 -  문자열임
console.log(obj);	// {[object Object]: '객체를 키값으로', 1,2,3: '배열을 키값으로'}
// 💡 객체와 배열이 그 자체가 아니라 문자열로 치환되어 키가 되는 것
console.log(
  obj['[object Object]']
);

동적으로 키 사용하기

• obj.key로 접근하면 "key"라는 이름의 키의 값에 접근하겠다는 뜻이 되므로 대괄호를 이용하여 obj[key]로 접근하기

const product1 = {
  name: '노트북',
  color: 'gray',
  price: 800000
}

function addModifyProperty (obj, key, value) {
  obj[key] = value;
}

addModifyProperty (product1, 'inch', 16);

console.log(product1);	// {name: '노트북', color: 'gray', price: 800000, inch: 16}