[JavaScript] Object.entries() VS Object.fromEntries() - FormData

 

Next.js server action을 공부하면서 <form> 요소의 action속성은 기본 FormData(캡처된 데이터가 포함된 개체)를 자동으로 수신한다는 것을 알았다.

그리고 이 FormData를 어떤식으로 사용하는지에 대해서 공부하면서 처음보는 Object.fromEntries()를 보게 되어 기록하고자한다.

 

FormData를 사용하려면 기본적으로 아래와 같이 사용한다.

'use server';
// 데이터 추출하기
export async function createInvoice(formData: FormData) {
  const rawFormData = {
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  };
  // 테스트해 보세요:
  console.log(rawFormData);
}

 

하지만 많은 양식으로 작업하는 경우, JavaScript의 Object.fromEntries()와 함께 entries() 메소드를 사용하는 것을 고려해볼 수 있다는 것을 알게되었다.

예시)
const rawFormData = Object.fromEntries(formData.entries())

 

 

 

 

Object.entries() & Object.fromEntries()

Object.entries()

- 객체의 열거 가능한 속성들을 [key, value] 쌍의 배열로 변환한다.

용도: 객체를 배열로 변환시켜 배열 메서드를 사용하고 싶을때 사용하면 된다.

const obj = { a: 1, b: 2, c: 3 };

// Object.entries() 사용
const entries = Object.entries(obj);
console.log(entries); 
// 출력: [['a', 1], ['b', 2], ['c', 3]]

// 배열 메서드 사용 예시
entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// 출력:
// a: 1
// b: 2
// c: 3

 

 

Object.fromEntries()

- [key, value] 쌍의 배열을 객체로 변환한다.

용도: 배열을 객체로 변환시켜 객체 메서드를 사용하고 싶을때 사용하면 된다.

const entries = [['a', 1], ['b', 2], ['c', 3]];

// Object.fromEntries() 사용
const obj = Object.fromEntries(entries);
console.log(obj); 
// 출력: { a: 1, b: 2, c: 3 }

// 객체 메서드 사용 예시
console.log(obj.a); // 출력: 1

 

 

오늘도 하나 배워간다