우주 모텔을 운영한다고 상상해봅시다.
평소에는 파리만 날리던 모텔에 오늘은 손님이 좀 있습니다.
우주 전염병이 난리라서 손님들 개인 정보가 필요하다고 우주 관리국에서 연락을 받았기에 아래와 같이 그 정보를 저장했습니다.
const alien = [
{ star: "케론별", name: "케로로", color: "녹색" },
{ star: "케론별", name: "기로로", color: "적색" },
{ star: "케론별", name: "타마마", color: "흑색" },
{ star: "니알라토텝", name: "냐루코", color: "은색" },
{ star: "크투가", name: "쿠오코", color: "적색" },
];
어느 별에서 온 손님인지, 이름은 무엇인지, 색깔은 무엇인지 정보를 각각 저장했습니다.
이렇게 객체 형태의 정보를 [ ] 배열 내부에 차례대로 저장을 했습니다.
그런데 갑자기 우주 관리국에서 또 연락이 옵니다.
손님 명단을 어느 별에서 온 손님인지 정리해서 전달을 바란다는 연락입니다!
const list = {
케론별: { 케로로: "녹색", 기로로: "적색", 타마마: "흑색" },
니알라토텝: { 냐루코: "은색" },
크투가: { 쿠우코: "적색" },
};
착한 저는 귀찮지만 요러캐 정리를 해서 관리국에 리스트를 넘기려 합니다.
다행히 손님이 많지 않아 직접 정리를 하기 쉬웠습니다만, 만약 제가 운영하던 곳이 파리 날리는 모텔이 아니라 5성급 우주 호텔이라면 어땠을까요?
손님이 한 1000명 왔다고 생각하면 어질어질 합니다.
이를 위해서 자동으로 리스트를 만들 수 있는 로직을 한 번 알아봅시다.
const alien = [
{ star: "케론별", name: "케로로", color: "녹색" },
{ star: "케론별", name: "기로로", color: "적색" },
{ star: "케론별", name: "타마마", color: "흑색" },
{ star: "니알라토텝", name: "냐루코", color: "은색" },
{ star: "크투가", name: "쿠오코", color: "적색" },
];
const list = {};
if(Array.isArray(alien)){
}
우선 자동화로 만들 거니까 list 는 비워줍시다.
그리고 Array.isArray(alien) 을 통해서 실제로 alien 이 배열 형태를 가지고 있을 때에만 시행 가능하도록 할 겁니다.
const Script = () => {
const alien = [
{ star: "케론별", name: "케로로", color: "녹색" },
{ star: "케론별", name: "기로로", color: "적색" },
{ star: "케론별", name: "타마마", color: "흑색" },
{ star: "니알라토텝", name: "냐루코", color: "은색" },
{ star: "크투가", name: "쿠오코", color: "적색" },
];
const list = {};
if (Array.isArray(alien)) {
alien.forEach((item) => {
if (list.hasOwnProperty(item.star)) {
list[item.star][item.name] = item.color;
} else {
list[item.star] = { [item.name]: item.color };
}
});
}
console.log(list);
hasOwnProperty 라는 로직을 사용합니다.
이 로직은 해당 객체가 특정한 key 를 이미 가지고 있는지를 True 또는 False로 반환합니다.
이에 따라 만약 해당 key 를 가지고 있는 경우 그대로 해당 key 에 해당하는 객체에 새로운 key 와 value 를 추가하는 것이 가능합니다.
만약 해당 key 를 가지고 있지 않다면, 처음으로 객체를 생성해서 key에 할당을 해줍니다.
console.log 로 출력한 실제 결과를 확인하면 예상한 방식대로 잘 나타난 것을 볼 수 있습니다.
이제 모텔에 손님이 넘쳐도 문제 없겠군요.