[Udemy] Array methods

OROSY·2021년 4월 23일

JavaScript SOME TIL every frontend reduce

TIL

목록 보기

2/18

Array methods

Array methods는 callback 함수를 사용하여 여러 기능을 구현할 수 있습니다. 저의 포스트 중 JavaScript 시리즈에서 filter, map, find, include 등 다양한 메소드를 다뤘습니다. 이번에는 이외에도 자주 사용되거나 중요한 메소드에 대해 정리해보도록 합시다.

1. every, some

1.1 every

tests whether all elements in the array pass the provided function. It returns a Bollean value.
배열의 모든 요소가 주어진 함수 조건에 맞는지를 불린 데이터로 반환하는 메소드입니다.

1.2 some

Siliar to every, but returns true if ANY of the array elements pass the test function.
every 메소드와 비슷하지만, 요소 하나라도 주어진 함수 조건에 맞다면 true를 반환합니다.

1.3 사용 예제

const exams = [80, 98, 92, 78, 70, 77, 90, 89, 84, 81, 77]

exams.every(score => score >= 75) // false
exams.some(score => score >= 75) // true

2. reduce

Excutes a reducer function on each element of the array, resulting in a single value
하나의 값을 반환합니다.

reduce 메소드는 한 번에 이해하기엔 쉽지 않은 메소드 중 하나입니다. 자유자재로 사용하는 것은 모두에게 어려우니 부담을 갖지 마시고 천천히 익숙해지시기 바랍니다. 하지만 알아두면 매우 유용한 메소드 중 하나입니다.

2.1 summing an array

[3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, initialValue);

Callback	accumulator	currentValue	return value
first call	3	5	8
second call	8	7	15
third call	15	9	24
fourth call	24	11	35

위의 예시에서 보는 것처럼, reduce 메소드는 두 가지 인수를 받습니다. 첫 번째 인수로는 콜백 함수, 그리고 두 번째로는 초기값을 받습니다. 초기값은 콜백 함수 전에 hold하게 되는 값입니다. 초기값을 명시하지 않으면, 배열의 첫 번째 요소를 사용하게 됩니다.

그리고 첫 번째 인수로 들어가는 콜백 함수에는 4가지 인수를 받을 수 있는데 기본적으로 주로 사용하는 2가지만 기억해주시면 됩니다. 첫 번째 인수는 누적값, 두 번째는 현재값입니다.

이를 통해 메소드를 실행하면 배열의 모든 요소를 더한 35가 출력이 됩니다.

2.2 사용 예제 (1)

const prices = [9.99, 1.50, 19.99, 49.99, 30.50]

const total = prices.reduce((total, price) => total + price)

위와 같이 총합을 구하는 메소드를 구현할 수 있습니다.

2.3 사용 예제 (2)

const prices = [9.99, 1.50, 19.99, 49.99, 30.50]

const minPrice = prices.reduce((min, price) => {
  if (price < min) {
    return price
  }
  return min
})

최소값을 구하는 메소드 또한 구현할 수 있습니다.

2.4 사용 예제 (3)

const evens = [2, 4, 6, 8]

evens.reduce((sum, num) => sum + num) // 20
evens.reduce((sum, num) => sum + num, 100) // 120
evens.reduce((sum, num) => sum + num, 20) // 40
evens.reduce((sum, num) => sum + num, 4) // 24