매일매일은 과제에서 삽질한 것들을 올리고, 주말에는 공통 주제라던가 언어 문법이 아닌 것들에 대한 이야기를 적어보려고 한다.
오늘은 부트캠프 첫번째 날 과제에 있던 나를 괴롭혔던 주제에 대한 이야기다.
선언 방법 : Object.entries(Array)
선언을 할 경우 배열 내부에 있는 문자열 요소를 [key.value]이러한 모양 객체로 반환합니다.
const item = {
공격력 : "무기",
방어구 : "방어력",
악세서리 : "체력"
};const tem = Object.entries(itme);
console.log(tem);
[ ['공격력','무기],['방어구',방어력],['악세서리','체력'] ]entires의 메소드를 사용하면 저러한 형식으로 나타난다.
만약 원점으로 되돌리고 싶다면, Object.fromEntries(Array) 이 구조를 사용하면 된다.
그런데 내가 만들고 싶었던(과제에서 요구했던)답안은 이것이였다.
console.log(result);
[ {공격력:무기},{방어구:방어력},{악세서리:체력} ] 여기서 정말 수도 없는 삽질을 했다
일단 Array.push() 를 사용하라는 조건이 있었기에 어떻게 하면 분리된 배열의 키와 값을 떼오는가 고민을 하다가
(item[0]) 이렇게 호출을 하면
0번 인덱스에 있는 ['공격력','무기']가 나오고
(item[0][0]) 을 호출하면
0번 인덱스에 0번째 값인 공격력이 호출되게 된다.
이렇게 어떤 모양을 하면 값들을 가져올 수 있는지 알게 되었다.
그래서 반복문을 아래처럼 돌려봤다.
let result = [];
for (i = 0; i < tem.length; i++) {
result.push(tem[i][0] + ":" + tem[i][1]);
}이걸 돌리면 아래와 같은 결과가 나온다.
console.log(result);
[ [공격력:무기],[방어구:방어력],[악세서리:체력] ] 그런데 이것은 정답에서 요구하는 객체가 담겨져있는 배열이 아닌, 그냥 콜론으로 만들어낸 가짜라서 또 찾아봤다.
찾아본 이유는 result.push(tem[i][0],tem[i][1]); 이러한 형식이 안됐기 때문이다;
아마 Array 메소드에 관한 공부가 진행된다면 삽질을 안했겠지만 저러한 지식이 하나도 없었기에..... 열심히 삽질을 했다.
결국 계속 찾고 찾아서 정답을 찾아냈는데
객체를 선언하고
let obj = {};
obj[tem[i][0]] = tem[i][1]; 로 key의 값을 넣고, 해당하는 Key에 value를 넣어주는 것으로 해결했다.
그리고 그 값을 result에 넣어줘야했기에 result.push(obj) 으로 result에 각각의 값들을 집어넣고 반복문 밖에서 콘솔을 찍어주는 것으로 해결을 했다.
코드 요약!
const item =
{
공격력 : "무기",
방어구 : "방어력",
악세서리 : "체력",
};
const tem = Object.entries(item);
let result = [];
for (i = 0; i < tem.length; i++) {
let obj = {};
obj[tem[i][0]] = tem[i][1];
result.push(obj)
}
console.log("결과", result)라고 끝날 줄 알았지만, 개선점이 생겨서 코드를 수정한다.
현재 tem[0]의 값에는 [공격력 : "무기"] 라는 형식으로 값을 알려주는데
이것을 구조분해할당을 하여 조금 더 스마트!한 해결 방법을 오늘 배워서 적용해보려고 한다.
let [key, value] = tem[i]
이렇게 사용하면 key의 값에는 공격력이, value의 값에는 "무기"가 붙게된다.
존재하는 배열 혹은 객체를 대괄호, 중괄호 속에 넣어서 존재하는 값을 분리하는 것을
구조분해할당이라고 표현한다.
이 부분은 자세하게 알고 있지 않아서 따로 한번 공부를 해봐야할 것 같다.
머리로는 이해를 한 것 같은데, 남한테 설명은 못하는 수준이랄까?
그리고 for문을 마저 완성을 시키면 이러한 모양이 된다.
for (i = 0; i < tem.length; i++) {
let [key, value] = tem[i]
let obj = {};
obj[key] = value;
result.push(obj)
}i가 0이니, 0번 인덱스부터 배열을 두개로 나누어 각각 key와 value 값에 넣고
그걸 객체화 시키고 result에 밀어넣는 것으로 끝이 난다.
결과는 같은 답을 알려주지만, 이쪽이 가독성이 조금 더 편하다고 하였고 속도적 이득이 있는지에 대해서는 아마 주말에 다뤄볼 것 같은데, 그때 이야기를 해보려고 한다.
