배열을 객체(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 - 현재 날짜/시간을 항상 한국 기준으로 가져오기
- Javascript - 문자열 사이에 문자 넣기
- Javascript - 버튼 활성화/비활성화 시키는 방법
- Javascript - 버튼 이름 변경하기
- Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제
- Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제
- Javascript - div 생성, 추가, 삭제 방법
- Javascript - 테이블 행(tr) 숨기기, 보이기
- Javascript - div에 링크 거는 방법
- Javascript - 자식 요소(element) 개수 확인
- Javascript - 요소(element) 복사, 붙여넣기
- Javascript - div에 클릭 이벤트(onclick) 설정 방법
- Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화
- Javascript - input 숫자만 입력받도록 설정
- Javascript - 자식 노드 모두 제거
- Javascript - 체크박스 선택, 해제 방법
- Javascript - input text 값 가져오기
- JavaScript - 문자열을 배열(Array)로 변환
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화
- JavaScript Set add() 함수