배열을 객체(object)로 변환하는 방법을 소개합니다.
1. Object.assign()으로 배열을 객체로 변환
Object.assign(target, source)는 source의 내용을 target에 복사합니다. 아래와 같이 배열을 source로 전달하면 '0', '1', '2'
처럼 Index가 key가 되고, 배열의 요소가 value로 이루어진 객체가 생성됩니다.
let arr = ['first', 'second', 'third'];
let obj = Object.assign({}, arr);
console.log(obj);
Output:
{ '0': 'first', '1': 'second', '2': 'third' }
2. Spread operator로 배열을 객체로 변환
Spread operator를 이용하여 다음과 같이 배열을 객체로 변환할 수 있습니다. key는 Index가 됩니다.
let arr = ['first', 'second', 'third'];
let obj = {...arr}
console.log(obj);
Output:
{ '0': 'first', '1': 'second', '2': 'third' }
3. forEach()로 배열을 객체로 변환
만약 key가 Index가 아닌 어떤 값으로 변경하고 싶다면 forEach와 같이 반복문을 사용하여 직접 배열을 객체로 변환할 수 있습니다.
let arr = ['first', 'second', 'third'];
let obj = {};
arr.forEach((element, index) => {
obj['key' + index] = element;
});
console.log(obj);
Output:
{ key0: 'first', key1: 'second', key2: 'third' }
4. Array.reduce()로 배열을 객체로 변환
forEach()대신에 Array.reduce()를 사용하여 특정 key로 객체를 생성할 수 있습니다.
let arr = ['first', 'second', 'third'];
let obj = arr.reduce((accumulator, value, index) => {
return {...accumulator, ['key' + index]: value};
}, {});
console.log(obj);
Output:
{ key0: 'first', key1: 'second', key2: 'third' }
5. Object.fromEntries()로 key-value 쌍의 배열을 객체로 변환
Object.fromEntries()는 key-value 요소를 갖고 있는 Array 또는 Map을 인자로 전달하면 객체로 변환합니다.
let arr = [['first', 'A'], ['second', 'B'], ['third', 'C']];
let obj = Object.fromEntries(arr);
console.log(obj);
Output:
{ first: 'A', second: 'B', third: 'C' }
참고로, Object.fromEntries()
으로 Map을 객체로 전달하면 아래와 같이 구현할 수 있습니다.
let map = new Map([['first', 'A'], ['second', 'B'], ['third', 'C']]);
console.log(map);
let obj = Object.fromEntries(map);
console.log(obj);
Output:
Map(3) { 'first' => 'A', 'second' => 'B', 'third' => 'C' }
{ first: 'A', second: 'B', third: 'C' }
Loading script...
Related Posts
- JavaScript - 문자열을 배열(Array)로 변환
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화
- JavaScript Set clear() 함수, 모든 값 제거
- JavaScript Set add() 함수
- JavaScript Set delete() 함수, 값 제거
- JavaScript Set has() 함수 (값 존재 여부 확인)
- JavaScript String split() 함수
- JavaScript - 경과 시간 계산 (Elapsed time)
- JavaScript - 실행 시간 측정 방법
- JavaScript - 날짜, 시간 포맷 (Date format)
- JavaScript - slice()로 배열 자르기, 나누기
- Node.js - 파일에 특정 문자열이 포함되어있는지 확인
- Node.js - 특정 패턴과 일치하는 모든 파일 찾기
- Node.js - 디렉토리의 파일 리스트 가져오기
- Node.js - 파일, 디렉토리(하위 파일) 삭제
- Node.js - 파일 이름 변경
- JavaScript - switch 조건문
- JavaScript - 배열의 특정 요소 찾기, Index 찾기
- JavaScript - 특정 값으로 배열 채우기, Array.fill()
- JavaScript - 배열을 객체로 변환, 4가지 방법