JS) object로 fake array를 만들어보자

Array.from()과 Fake array

JS에는 주어진 인수를 값으로 갖는 새로운 array를 만들어 리턴해주는 Array.from() 메서드가 존재한다.

const originalArr = [1,2,3,4,5]
console.log(originalArr) //[1,2,3,4,5]

const newArr = Array.from(originalArr)
console.log(newArr) //[1,2,3,4,5]

그런데 여기서 재미있는 점은 Array.from() 메서드를 이용하면 간단하게 fake array를 만들 수 있다는 점이다. 실제 코드를 살펴보면 아래와 같다.

const fakeArr = Array.from({length:5})
console.log(fakeArr)
//[undefined,undefined,undefined,undefined,undefined]

이처럼 Array.from의 argument로 문자열이나 array가 아닌 object를 넣었는데도 에러가 발생하지 않고 array가 반환된 것을 확인할 수 있다.

이왜진?

Array.from은 인주로 주어진 값에 대해 직접적으로 타입 체킹하기 보다는 length 값이 있는지 여부만을 판단하기 때문이다. 실제로 아래 코드를 보면 array.length와 “length”를 key로 갖는object의 결과값이 동일하다는 사실을 알 수 있다.

const realArr = [1,2,3,4,5]
console.log(realArr.length) //5

const notRealArr = {length:5}
console.log(notRealArr.length) //5

이렇듯 fakeArray를 사용하면 원본 배열이 없음에도 사전에 배열을 선언하는 과정 없이 Array.map() 메서드를 사용하여 빠르게 원하는 길이만큼 반복문을 사용할 수 있게 된다.

const result = Array.from({length:1000}).map((_,index)=>(index * index))

참조: https://stackoverflow.com/questions/40528557/how-does-array-fromlength-5-v-i-i-work

참조: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from