웹프로그램

오늘은 실무에서 자주 쓰이지만 놓치기 쉬운 자바스크립트 유틸 함수 하나를 소개합니다:
바로 Object.fromEntries()입니다.

서버에서 [["key", "value"], ["key2", "value2"]] 같은 형태의 배열 데이터를 받아올 때,
이걸 객체 { key: "value", key2: "value2" }로 바꾸려면 어떻게 하시나요?

const entries = [["name", "Alice"], ["age", 30]];

const obj = {};

entries.forEach(([key, value]) => {

  obj[key] = value;

});

console.log(obj); // { name: "Alice", age: 30 }

Object.fromEntries()를 써보자

const entries = [["name", "Alice"], ["age", 30]];

const obj = Object.fromEntries(entries);

console.log(obj); // { name: "Alice", age: 30 }

반대로? 객체를 배열로 바꾸고 싶다면?

const user = { name: "Bob", age: 28 };

const entries = Object.entries(user);

console.log(entries); 

폼 데이터 다룰 때 유용합니다:

const formData = new FormData(formElement);

const data = Object.fromEntries(formData.entries());

console.log(data); // 폼 입력값이 깔끔한 객체로 변환됨!