[프로그래머스 Level 1] x만큼 간격이 있는 n개의 숫자 (자바스크립트)

Description

함수 solution은 정수 x와 자연수 n을 입력받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요.

Constraints

• x는 -10000000 이상, 10000000 이하인 정수입니다.
• n은 1000 이하인 자연수입니다. 

  

나의 풀이

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

for문과 배열에서 흔히 쓰이는 API인 push를 이용하면 풀 수 있는 문제였다. 

n개만큼의 element가 있어야 하니, i <= n을 써 주고 i가 1씩 증가할 때마다 반복하여 answer 배열에 하나씩 push 해준다. 

다른 방법 1

function solution(x, n) {
    let answer = [];
    let a = 0;
  for(let i = 0; i < n; i++){
    a += x;
    answer.push(a);
  }
  return answer;
}

내가 한 것과 거의 비슷하지만, 여기서는 곱셈이 아닌 덧셈으로 누적한다는 점이 다르다. 

for문이 한 번 반복할 때마다 a에 x를 더해서 a의 값이 x씩 커질 수 있도록 하였다.  

또한 i가 0부터 시작하여 n-1번 반복하도록 하였는데, 1부터 시작해서 n까지 하는 것과 동일하다.

다른 방법 2

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

메서드를 사용하여 코드의 양을 확 줄였다. 각각의 메서드들을 한 번 짚어보자.

1. Array()로 길이 n의 배열을 만든다.
2. fill()을 이용해 x의 값으로 배열을 모두 채운다.
3. map을 이용해서 배열 안의 각 요소마다 (해당 요소의 인덱스 + 1) 값을 곱해준다. 

Array() constructor

MDN Array() constructor 참고 - 사진 클릭하면 이동

이런 식으로 arrayLength를 명시해 주면 길이에 맞춰진 배열이 생성된다.

그런데 여기서 궁금증이 생겼다. 

Array()를 쓸 때, new 연산자를 쓰고 안 쓰고의 차이가 뭘까? 

나와 같은 궁금증을 가진 사람이 10년 전에 있었다. 스택오버플로우에서.

What happens if you declare an array without New in Javascript?

답변을 보니 이렇다. 

배열을 생성자가 아닌 함수로 호출하면, 새로운 Array object를 만들고 초기화한다.
따라서 function call인 Array(...)는 object creation expression인 new Array(...)와 같다.

이렇게 궁금증을 해결할 수 있었다. 

map()

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

map의 매개변수를 알아보자. (출처 : MDN-Array.prototype.map())

callback은 새로운 배열 요소를 생성하는 함수이다. 세 가지 인수를 가진다. 

1. currentValue : 처리할 현재 요소
2. index(optional) : 처리할 현재 요소의 인덱스
3. array(optional) : map()을 호출한 원본 배열

thisArg(optional)은 callback을 실행할 때 this로 사용되는 값이다.

return

map은 배열의 각 요소에 대해 실행한 callback의 결과를 모아 새로운 배열을 반환한다.

설명

• map은 callback 함수를 각각의 요소에 대해 한 번씩 순서대로 불러서, 그 함수의 반환값으로 새로운 배열을 만든다.
• callback 함수는(undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출된다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다.

---

아주 간단한 문제였지만 Array()에 대한 궁금증과 map 사용법을 더 다질 수 있는 문제였다. map을 좀 더 잘 다뤄서 다양한 문제에서 활용할 수 있도록 해야겠다.