FormData, 복리계산기 (3주차)

FormData?

form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공함.

FormData를 구현하는 객체는 entries()대신 for..of 구조를 직접 사용할 수 있다.

 

생성자: FormData()

for of 반복문으로 formData의 내부를 확인해보니까 각 요소들이 배열의 형태로 k-v쌍으로 들어가 있는 걸 확인할 수 있었다. formData 자체는 반복가능한 객체이다.

참고: for..of 명령문은 반복가능한 객체에 대해서 개별 속성값에 대해서 반복함.

 

참고: https://developer.mozilla.org/ko/docs/Web/API/FormData

FormData - Web API | MDN

---

 

formData객체를 key-value쌍을 이루는 하나의 객체로 만들기. (더이상 반복가능한 객체가 아님) 

 

Array.from() ?
유사배열 객체나 반복가능한 객체를 얕게 복사해 새로운 Array 객체를 만듬

 

formData.entries() ?

객체에 포함된 모든 k-v쌍을 통과하는 iterator를 반환.

 

참고: https://developer.mozilla.org/ko/docs/Web/API/FormData/entries

 

 

---

저 코드 상에서 Array.from을 사용하지 않으면 에러가 나오는데 그 이유는 뭘까?

?

formData.entries()를 할 때 그것은 구조상 array 같아보이지만 사실 그렇지 않다.

=> 유사배열로 이해하면 될 것 같다

 

NodeList 유형의 프로토타입을 보면 reduce 메서드가 없다는 걸 알 수 있다. 그래서 Array.from으로 전달해준다면 적절한 배열로 반환되고 reduce, map, 등 기타 배열관련 함수를 사용할 수 있게 된다!!

참고: https://stackoverflow.com/questions/38598801/map-reduce-is-not-a-function/38598861

 

유사배열이란?

DOM type은 배열처럼 보이지만 타입은 object이고 심지어 배열과 비교해보면 false가 출력된다.

 

 

배열이 아닌데 배열인 척 하는 것을 유사배열 혹은 유사배열 객체라고 부른다.

선언은 객체처럼 하고 반드시 length를 가져야 한다는 특징이 있다.

 

참고:https://kamang-it.tistory.com/entry/JavaScript15%EC%9C%A0%EC%82%AC%EB%B0%B0%EC%97%B4-%EA%B0%9D%EC%B2%B4Arraylike-Objects

 

 

---

formData = {principal: 1, rate: 2, year: 3, frequency: 1}
const {principal, rate, year, frequency} = formData
{
        principal : Number(principal),
        rate: Number((rate / 100).toFixed(2)),
        year: Number(year),
        frequency: Number(frequency)
 }

객체로부터 key 값을 한번에 가져와서 각 value 값을 한번에 바꿔줄 수 있다