프로그래머스 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
씩 증가하게 만들어 x
와 i
를 곱하여 arr
에 push
되게끔 짠 구조이다.
[2, 4, 6, 8, 10]
function solution(x, n) {
return Array(n).fill(x).map((v, i) => (i + 1) * v)
}
나의 다섯 줄 짜리 코드를 한줄로 완벽 정리할 수 있다니.. 전부터 map()
에 대해 좀 더 자세히 공부해봐야겠다는 생각을 하던 찰나에 마침 너무 깔끔하게 잘 써주셔서 이 코드를 리뷰해보며 알아보았다.
arr.map(callback(currentValue[, index[, array]]), thisArg)
위에서 callback
은 세 가지 인수를 가진다
currentValue
: 처리할 현재 요소index
: 처리할 현재 요소의 인덱스array
: map()
을 호출한 배열thisArg
: 콜백 함수에서 this
로 사용될 값let arr1 = ["월요일", "화요일", "수요일"];
let map1 = arr1.map( item => "출근하는 " + item );
console.log(map1);
// ["출근하는 월요일", "출근하는 화요일", "출근하는 수요일"]
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()
에 대해서도 새롭게 배워간다! 💭