Object의 대괄호 사용하기

일반적으로 알고 있는 Object의 형태는 이렇습니다.

const myObj = {
  name: "emewjin",
};

이때, name: "emewjin"를 객체 myObj의 프로퍼티라고 부릅니다. 프로퍼티는 key: value 이렇게 key와 value로 이루어져 있는데 key는 프로퍼티 이름, value를 프로퍼티 값을 나타냅니다.

객체는 배열과 다르게 순서가 없기 때문에 인덱스 번호가 아닌 키로 프로퍼티에 접근합니다. 가장 많이 알려져있는 방식은 .(Dot)을 사용하는 것입니다. 예시로, myObj.name을 콘솔로 찍어보면 emewjin이 출력됩니다.

그런데 키에 숫자, 특수문자, 띄어쓰기를 사용하는 경우가 있습니다. 이 경우, .(Dot)으로 프로퍼티에 접근하려 하면 에러가 발생하고 []를 사용해야합니다.

🌱 []로 객체 프로퍼티에 접근하기

객체의 키는 띄어쓰기, 특수문자, 숫자를 포함하는 등 다양한 형태로 만들 수 있습니다.

let difficult = {
  33: '숫자 형식도 되네',
  'my name': '스페이스 포함 가능',
  color: 'silver',
  키: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군'
};

//오류 발생
console.log(difficult.!키);
console.log(difficult.'!키');
console.log(difficult.33);
console.log(difficult.my name);

//정상 실행
console.log(difficult['!키']);
console.log(difficult['33']);
console.log(difficult['my name']);

위의 코드에서 띄어쓰기, 특수문자, 숫자를 포함하고 있는 키는 .(Dot)으로 접근하니 에러가 떴으나, []로 접근하니 정상적으로 출력되었습니다. 띄어쓰기, 특수문자, 숫자 등을 포함하고 있는 키에 접근하기 위해서는 ''로 묶어야 하는데 .(Dot)은 ''를 지원하지 않기 때문입니다.

그런데 같은 특수문자라고 하더라도

console.log(difficult.$special); //'$는 없어도 되는군'

$는 .(Dot)으로도 정상적으로 작동됩니다. 이처럼 특수문자라고 해도 다 다름을 확인할 수 있습니다. 어떤 것은 대괄호, 어떤 것은 .(Dot)으로 접근해야 하는지 하나하나 다 외울 필요는 없습니다. 하다가 에러가 뜨면 보고 확인, 수정하면 됩니다.

🌱 []으로 키 이름에 변수 사용하기

객체의 키 이름은 변수에 할당하여 사용할 수도 있는데, 이 경우에도 .(Dot)이 아닌 []으로 접근해야 합니다. 🚨.(Dot)으로 접근하는 것은 변수가 아니라 실제 키 이름을 쓸 때 가능합니다.

let difficult = {
  키: "한글인 키는 따옴표가 없어도 되는군!!",
  "!키": "느낌표 있는 키는 따옴표가 필요하군",
};

let name = "키"; //키 이름을 변수에 할당했습니다.
console.log(difficult.name); //undefined
console.log(difficult[name]); //'한글인 키는 따옴표가 없어도 되는군!!'

이를 활용하여 []을 for문에도 사용할 수 있습니다.

🍀 객체의 키 값에 객체를 할당하기

salesArr, reviewArr, likeArr 이 세 개의 배열은 각각의 날짜에 해당하는 판매량/리뷰수/좋아요수를 담고 있는 배열입니다. 지금은 카테고리에 따라 세 개의 배열로 나누어져 있지만, 날짜를 객체의 키 이름으로 삼아 날짜로 접근하여 해당 날짜에 해당하는 판매량/리뷰수/좋아요수를 값으로 추출할 수 있게끔 하나의 객체를 만들고자 합니다.

const salesArr = [
  ["20190401", 34],
  ["20190402", 23],
  ["20190403", 29],
];
const reviewArr = [
  ["20190328", 3],
  ["20190401", 0],
  ["20190403", 1],
];
const likeArr = [
  ["20190328", 98],
  ["20190401", 102],
  ["20190403", 125],
];

/*전역변수로 빈 객체를 만들었습니다. 
for문 안에 넣으면 반복될 때마다 const resultObj = {};도 같이 실행되어 3개의 객체가 생깁니다. 
이렇게 되면 날짜별로 객체가 생기는 것이지 하나의 객체안에 담기는 것이 아니게 됩니다. 
또, for문 바깥에서 console.log()를 사용할 수 없습니다.*/
const resultObj = {};

for (let i = 0; i < salesArr.length; i++) {
  //날짜로 만들어진 키에 해당하는 값으로 담길 객체
  const obj = {
      salesCount: salesArr[i][1],
      reviewCount: reviewArr[i][1],
      likeCount: likeArr[i][1],
  };
  //위의 객체를 상위 객체에 할당
  //키 이름으로 변수를 사용하고 있기에 []을 사용합니다
  resultObj[salesArr[i][0]] = obj;
}

console.log(resultObj);

//결과물
{
  '20190401': { salesCount: 34, reviewCount: 3, likeCount: 98 },
  '20190402': { salesCount: 23, reviewCount: 0, likeCount: 102 },
  '20190403': { salesCount: 29, reviewCount: 1, likeCount: 125 }
}

이제 하나의 객체에서 원하는 날짜의 원하는 값을 뽑아낼 수 있습니다. 다음은 resultObj 안의 20190401키에 해당하는 값 객체에서 salesCount키에 해당하는 값을 추출하는 코드입니다.

//20190401을 .(Dot)으로 접근하면 에러가 뜹니다. []를 사용해줍시다
console.log(resultObj[20190401].salesCount); //34