JavaScript | map()

이전에 array 관련 method들을 두 번에 걸쳐 정리한 적이 있었다. 그럼에도 불구하고 정리했던 내용의 method를 잘 사용하지 못하는 것 같아 다시 블로그에 작성하면서 머리에 정리해보려고한다.

map()

1. Array 타입의 데이터를 요소 갯수 만큼 반복
2. 반복할 때마다 실행할 함수를 parameter로 전달
3. callback 함수에서 array의 요소를 인자로 받음
4. 해당 요소를 수정하고 싶은대로 로직을 구현하고 return
5. 해당 index의 요소가 return 된 값으로 치환됩니다.

const arr = [1, 2, 3];
const squares = arr.map(x => x * x); // [1, 4, 9]

map mehtod는 배열은 반복해주고, callback 함수에서 return한 값으로 매 요소를 수정해서 새로운 배열을 생성해준다.

두번째 줄에서 map method에 인자로 넘어간 함수를 원래대로 표현하면 아래와 같다

const squares = arr.map(function (x) { 
  return x * x;
});

Assignment

moreThan100 함수를 구현해 주세요.

숫자로 구성된 배열을 인자로 받습니다.
100 보다 크거나 같으면, true 를
100 보다 작으면 false 로 요소를 변경하여, 새로운 배열을 return 해주세요.
예를 들어, nums(input)가 [100, 9, 30, 7]이라면 return은 [true, false, false, false]

이 문제를 처음 풀었을 때는 이렇게 풀었었다

const moreThan100 = nums => {
  nums.map(num => {
    if (num >= 100) {
      return true
    } else {
    return false
    }
  })
}

이렇게 푼 결과값은 undefined로 어떠한 값도 출력되지 않았지만 아무리 고민을 해봐도 정답을 알 수가 없었다.
내가 애초에 접근을 잘못한건지 싶을정도로 아무 생각이 안났지만, 정답은 가까운 곳에 있었다.

바로 return값이 없었기 때문이다! 저 당시에 나는 풀이에 적어놓은 return값이면 되는줄 알았다.
하지만 내가 적어놓은 return값은 map()의 callback함수에 관한 return값이었고, moreThan100이라는 함수에는 return되는 값이 없었던 것이다.

그래서 그 해결법으로

const moreThan100 = nums => {
  let result = nums.map(num => {
    if (num >= 100) {
      return true
    } else {
    return false
    }
  })
  return result
}

result라는 변수를 선언하여 거기다가 map() method를 집어넣은 후, 그 값을 return하게끔 하였다.

이것보다 더 간단한 방법은 변수선언도 하지않고 바로 아래와 같이 해당 method를 바로 return시키면 된다.

const moreThan100 = nums => {
  return nums.map(num => {
    if (num >= 100) {
      return true
    } else {
    return false
    }
  })
}

정말 기본적인 개념이지만 놓치고있어서, 해결법을 알게 된 후에 자괴감이 엄청 들었었다 😢
이번 문제풀이를 통해 항상 return값이 어디에 반환되는지를 항상 인지하면서 문제를 풀어야겠다고 다짐했다