짝수는 싫어요 - Array.from() 활용

정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return하도록 solution 함수를 완성해주세요.

 

function solution(n) {
    var answer = [];
    for(let i = 1; i<= n; i++){
        if(i%2 !== 0){
            answer.push(i)
        }
    }
    return answer;
}
// 내가 제출한 방법 

function solution(n) {
    var answer = [];

    for (let i = 1; i<=n; i+=2) answer.push(i)

    return answer;
} // 위의 방법을 조금 다음으면 이렇게 된다

이렇게 반복문으로도 풀 수 있지만 

const solution = (n) => 
    Array
        .from({ length: n }, (v, i) => i + 1)
        .filter(i => i % 2 !== 0)

보기 쉽게 한 줄씩 쓴 부분도 좋았고 

Array.form()을 문자열을 하나씩 배열로 만들 때만 사용을 했는데 저렇게 length를 가진 객체로

원하는 길이의 배열을 만듬과 동시에 인덱스만을 받아서 바로 그 배열을 채울 수 있는 방식으로 

사용할 수 있는 것이 인상적이었다.

 

function solution(n) {
    return Array(n).fill(1).map((v,i)=>v+i).filter(v=>v%2===1);
}

비슷한 풀이 방식이 있어서 이건 왜 .fill()으로 모두 다 채우고 시작할까

그리고 Array와 Array.from의 차이는 무엇일까 하는 생각에 일단 찍어봤다

 

let n = Array.from({ length: 3 })  // [ undefined, undefined, undefined ]
let n2 = Array(3)				   // [ <3 empty items> ]

이렇게 나오지만 막상 인덱스로 확인하면
console.log(n[0])				   // undefined
console.log(n2[0]) 				   // undefined

같은 값이 나온다 

이렇게 .map()를 사용해 본다면 
let n = Array.from({ length: 3 }).map((v,i)=>1+i) // [ 1, 2, 3 ]
let n2 = Array(3).map((v,i)=>1+i)				  // [ <3 empty items> ]

확실히 다른 결과가 나온다 

Array.from()에서는 두 번째 인자로 배열의 모든 요소에 대해 
호출할 맵핑 함수를 줄 수 있기에
Array.from({ length: 3 },(v, i) => 1 + i)로 간단하게 만들 수 있다

 

비슷하게 보이지만 다른  Array(n)와 Array.from({ length:n })이라서 
일단은 .fill()을 이용해 왜 배열을 다 채우고 .map()을 했는지 찍어보니 알겠다

하지만 이해는 아직 못하겠다

 

이건 저 메소드들이 어떻게 작동하고 뭔 차이가 있는지에 대해

깊게 들어가야 알 수 있을 것 같으니 일단 저런 차이가 생긴다는 것을 알고 

필요에 따라 각각의 방법을 올바르게 사용하자