[프로그래머스] "x만큼 간격이 있는 n개의 숫자": JS - map함수 활용

신혜린·2023년 4월 5일
0

알고리즘(javascript)

목록 보기
7/21
post-thumbnail

프로그래머스 lv.1 문제 중 x만큼 간격이 있는 n개의 숫자를 풀다가 다른 분들의 답변을 보고 감명 받아 적어보는 코드 리뷰글!
참고자료 | 진스-실무에서 자주 쓰는 함수 1.map함수, filter함수


내 코드

function solution(x, n) {
    let arr = [];
    for (i = 1; i <= n; i++) {
        arr.push(i * x);
    };
    return arr; 
}

나는 빈 array를 만들어서 for문을 이용해 풀었다.
예를 들어 x=2, n=5인 경우, i=1 부터 i=5까지 1씩 증가하게 만들어 xi를 곱하여 arrpush되게끔 짠 구조이다.

[2, 4, 6, 8, 10]

모범 코드 답안

function solution(x, n) {
    return Array(n).fill(x).map((v, i) => (i + 1) * v)
}

나의 다섯 줄 짜리 코드를 한줄로 완벽 정리할 수 있다니.. 전부터 map() 에 대해 좀 더 자세히 공부해봐야겠다는 생각을 하던 찰나에 마침 너무 깔끔하게 잘 써주셔서 이 코드를 리뷰해보며 알아보았다.

Array.map()

arr.map(callback(currentValue[, index[, array]]), thisArg)

위에서 callback은 세 가지 인수를 가진다

  • currentValue : 처리할 현재 요소
  • index : 처리할 현재 요소의 인덱스
  • array : map()을 호출한 배열
  • thisArg : 콜백 함수에서 this로 사용될 값

예제1

let arr1 = ["월요일", "화요일", "수요일"];
let map1 = arr1.map( item => "출근하는 " + item );

console.log(map1);
// ["출근하는 월요일", "출근하는 화요일", "출근하는 수요일"]

예제2

let arr = [2, 3, 5, 7]

arr.map(function(currentValue, index, array){
    console.log(currentValue);
    console.log(index);
    console.log(array);
});

위와 같은 코드가 있다고 치자. 이를 출력하면 다음과 같다.

2
0
[ 2, 3, 5, 7 ]
[ undefined, undefined, undefined, undefined ] 
// map함수는 원래 호출된 결과를 새 배열로 반환하는데 
// 위 코드에는 return문이 없기 때문에 undefined가 되는 것이므로 일단은 무시!
3
1
[ 2, 3, 5, 7 ]
5
2
[ 2, 3, 5, 7 ]
7
3
[ 2, 3, 5, 7 ]
  • 첫번째 인수는 value
  • 두번째 인수는 index
  • 세번째 인수는 array

이와 같이 반환하고 있는 것을 알 수 있다.


모범 코드 다시 살펴보기

// 모범 답안 코드
function solution(x, n) {
    return Array(n).fill(x).map((v, i) => (i + 1) * v)
}

그럼 여기서 모범 코드를 다시 뜯어보자면,

Array(n) : [ <5 empty items> ]
➡️ n이 5이기 때문에 5개의 요소가 들어있는 어떤 배열이 생길 것

Array(n).fill(x) : [ 2, 2, 2, 2, 2 ]
➡️ n이 5고 x가 2이기 때문에 2가 5개 들어있는 배열을 생성해준 것

Array(n).fill(x).map((v, i) => (i + 1) * v) : [2, 4, 6, 8, 10]
➡️ v는 요소, i는 인덱스를 나타낸다.
➡️ 인덱스는 0, 1, 2, 3, 4로 이루어져있기 때문에 i + 1를 해주므로써 1, 2, 3, 4, 5로 만들어준다.
➡️ 요소인 v (= 2 = x) 와 곱해준 뒤 배열로 반환한다.

확실히 map함수를 써주니 더 간결하게 표현이 된다. map() 외에도 Array()fill()에 대해서도 새롭게 배워간다! 💭

profile
개 발자국 🐾

0개의 댓글