[javascript] 키/벨류 객체를 배열로 변환하기
자바스크립트에서 많이 사용하는 두가지 데이터 저장 타입은
자바스크립트 코드 안에서 다룰때는 객체 타입이 사용하기 편리하지만
화면 출력을 위해, 또는 서버 전송을 위해서는 자주 객체를 배열로 변환하게 됩니다.
물론 더 고급의 다른 방법들도 있지만, 여기서는 객체를 배열로 변환하는 가장 기초적인 방법을 알아봅니다.
난이도가 있는 것은 아니기 때문에 그렇게 어려울 것은 없지만, 막상 닥치면 많이 헤매게 됩니다.
객체를 배열로 변환하는 방법은 2가지가 있습니다.
1. map() 함수를 사용해 변환
상단에 연습용으로 사용할 객체를 일단 하나 만들어봅니다.
let obj = { "a": 5, "b": 7, "c": 4, "d": 0, "e": 1 };
"문자열":숫자 조합으로 된 5개의 원소를 가진 객체입니다.
map() 함수를 이용해 객체 요소 하나를 ["키",밸류] 로된 배열로 변환해서 반환하는 함수를 실행하고, 최종적으로는 이 반환된 ["키",밸류] 배열들을 하나의 배열로 묶어서 반환하게 됩니다.
즉, result_map 배열은 ["키",밸류] 배열들을 배열로 담은 중첩 배열이 됩니다.
let result_map = Object.keys(obj).map(function (key) {
return [String(key), obj[key]];
}); 중첩 배열을 루프를 돌아 출력을 하면
// 출력확인
for(let i = 0; i < result_map.length; i++) {
for(let j = 0; j < result_map[i].length; j++) {
document.write(result_map[i][j] + " ");
}
document.write("</br>");
} 이런 결과를 얻을 수 있습니다.
a 5
b 7
c 4
d 0
e 1
2.entries() 메써드를 사용해 변환
조금 더 간결하고 쉬운 방법입니다.
보통은 이 방법을 많이 사용하고 추천하는 방법입니다.
위에서 만들었던 객체를 그대로 사용해서 자바스크립트 객체 내장 메써드인 entries() 를 사용합니다.
//같은 구조의 배열을 entries() 객체 메써드로 생성
let result_entries = Object.entries(obj);이렇게 하면 result_entries 변수에 1번의 결과와 같은 중첩 배열이 반환됩니다.
위에서 이중 루프를 돌아 배열값을 확인했지만 역시 좀더 간결하고 쉬운 방법으로 중첩 배열을 출력합니다.
//좀더 예쁘고 심플하게 출력문을 생성
//출력문 출력 변수를 역따옴표 - Backquote- 인 것에 주의
for (let [key, value] of result_entries) {
document.write(`${key}:${value}`);
document.write("</br>");
}루프를 한번만 돌고 출력문 포매팅을 이용해 ["키",밸류] 배열을 한번에 출력합니다.
출력 결과는 다음과 같습니다.
a : 5
b : 7
c : 4
d : 0
e : 1
아래의 코드는 최종 완성된 샘플 코드입니다.
html 파일로 저장한 후 웹브라우저에 드래그엔드롭으로 떨어뜨리면 바로 코드 실행 결과를 볼 수 있습니다.
// 오브젝트 생성
let obj = { "a": 5, "b": 7, "c": 4, "d": 0, "e": 1 };
//map() 을 이용해 배열로 변환
//[['key',val],['key',val],...]
//배열에 배열이 들어있는 중첩 배열이 반환됨.
let result_map = Object.keys(obj).map(function (key) {
return [String(key), obj[key]];
});
// 출력확인
for(let i = 0; i < result_map.length; i++) {
for(let j = 0; j < result_map[i].length; j++) {
document.write(result_map[i][j] + " ");
}
document.write("</br>");
}
//같은 구조의 배열을 entries() 객체 메써드로 생성
var result_entries = Object.entries(obj);
//좀더 예쁘고 심플하게 출력문을 생성
//출력문 출력 변수를 역따옴표 - Backquote- 인 것에 주의
for (let [key, value] of result_entries) {
document.write(`${key} : ${value}`);
document.write("</br>");
}