[Udemy] Array methods

OROSY·2021년 4월 23일
0

TIL

목록 보기
2/18
post-thumbnail

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);
CallbackaccumulatorcurrentValuereturn value
first call358
second call8715
third call15924
fourth call241135

위의 예시에서 보는 것처럼, 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

이번에는 초기값을 사용한 예제입니다. 초기값을 사용하지 않게 되면, 첫 번째 배열의 요소인 2부터 시작을 하게 되는 것입니다.

두 번째 예시처럼 초기값을 사용하게 되면, 100 + 20으로 120이 반환되게 됩니다. 나머지 예제를 보시면 이해하는 데에 도움이 됩니다.

profile
Life is a matter of a direction not a speed.

0개의 댓글