[JavaScript] 배열 반복을 효과적으로 만드는 11가지 메서드

✔ 들어가며

이번 포스팅은 해외 저자의 글을 요약 및 번역하고 살을 붙여 옮겼다.

자바스크립트 배열 반복을 효과적으로 만드는 11가지 메서드에 대해 알아본다.

원문은 하단 링크로 남긴다.

 

🙋‍♂️ 저자의 서문

Javascript의 일상적인 프로그래밍에서는 배열 요소에 대해 일종의 작업을 수행해야 합니다. 배열의 각 항목을 처리하는 것은 매우 일반적입니다. 따라서 각 배열 요소의 처리를 더 쉽고 효율적으로 만들기 위해 Javascript는 Iteration 메서드의 힘을 사용합니다.

 

 

---

 

✔ 반복(Iteration) 메서드

반복 매서드은 배열의 모든 요소에 대해 한 번에 하나씩 작동하는 방법이다. 이러한 메서드는 loof와 유사하다.

각 함수들을 활용하여 배열을 반복하고, 각 항목에 대해 일부 기능을 수행하고, 원하는 결과를 필터링하고, 단일 값으로 줄이고, 검색하여 찾는 것과 같은 방법들을 살펴보자.

 

 

✔ 반복 매서드의 종류

1.  Array.map()
2.  Array.filter()
3.  Array.forEach()
4.  Array.reduce()
5.  Array.reduceRight()
6.  Array.some()
7.  Array.every()
8.  Array.find()
9.  Array.findIndex()
10.  Array.indexOf()
11.  Array.lastIndexOf()

 

 

---

1. Array.map()

Array.map() : 맵을 사용 하면 각 배열 요소에 대해 작업을 수행하여 새 배열 요소를 반환한다.

기존 배열 요소에는 변경사항이 없다.

 

💡 예제

원래 배열 요소에 3을 곱한 새 배열 생성

let nums = [10, 20, 30, 40, 50];

const numsMap = nums.map(function (value, index, array) {
  return value * 3;
});

 

💡 출력

30,60,90,120,150

 

📃 mdn web docs

// Arrow function
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function (element) { /* … */ })
map(function (element, index) { /* … */ })
map(function (element, index, array) { /* … */ })
map(function (element, index, array) { /* … */ }, thisArg)

콜백 함수에는 3개의 value, index 및 array  매개변수가 전달된다. 인덱스와 배열 매개변수는 생략할 수 있고 value매개 변수만으로도 작동한다.

 

 

---

2. Array.filter()

Array.filter() : 이름에서 알 수 있듯이 일부 필터 조건을 기반으로 새 배열을 만든다.

 

💡 예제

배열안의 30보다 큰 수를 선별하기 

 

let nums = [50, 25, 40, 16, 29];

const numOver30 = nums.filter(function (value, index, array) {
  return value > 30;
});

 

💡 출력

50, 40

 

📃 mdn web docs

// Arrow function
filter((element) => { /* … */ })
filter((element, index) => { /* … */ })
filter((element, index, array) => { /* … */ })

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

// Inline callback function
filter(function (element) { /* … */ })
filter(function (element, index) { /* … */ })
filter(function (element, index, array) { /* … */ })
filter(function (element, index, array) { /* … */ }, thisArg)

Array.filter() 또한 콜백 함수에는 3개의 value, index 및 array  매개변수가 전달된다. 인덱스와 배열 매개변수는 생략할 수 있고 value매개 변수만으로도 작동한다.

 

 

---

3. Array.forEach()

Array.forEach()  : for 문과 같다. 배열의 각 요소에 대해 함수를 실행한다.

 

💡 예제

Hello 문자열에 names 배열의 요소를 함께를 함께 출력하기.

let prntVal = "";
const names = ["Frank", "Charles", "Dolly", "Robert", "Bob"];

names.forEach(function (value) {
  prntVal = prntVal + "Hello " + value + "<br/>";
});

 

💡 출력

Hello Frank
Hello Charles
Hello Dolly
Hello Robert
Hello Bob

 

📃 mdn web docs

// Arrow function
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })

// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)

// Inline callback function
forEach(function (element) { /* … */ })
forEach(function (element, index) { /* … */ })
forEach(function (element, index, array) { /* … */ })
forEach(function (element, index, array) { /* … */ }, thisArg)

 

 

---

4. Array.reduce()

Array.reduce() : 각 배열 요소에서 함수를 실행하여 단일 값을 생성한다.

 

💡 예제

배열을 만들고 reduce() 함수를 사용하여 배열 요소의 합을 알아보기.

const nums = [10, 20, 30, 40, 50];

const sum = nums.reduce(function (total, value) {
  return total + value;
});

 

💡 출력

150

 

📃 mdn web docs

// Arrow function
reduce((accumulator, currentValue) => { /* … */ })
reduce((accumulator, currentValue, currentIndex) => { /* … */ })
reduce((accumulator, currentValue, currentIndex, array) => { /* … */ })

reduce((accumulator, currentValue) => { /* … */ }, initialValue)
reduce((accumulator, currentValue, currentIndex) => { /* … */ }, initialValue)
reduce((accumulator, currentValue, currentIndex, array) => { /* … */ }, initialValue)

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

// Inline callback function
reduce(function (accumulator, currentValue) { /* … */ })
reduce(function (accumulator, currentValue, currentIndex) { /* … */ })
reduce(function (accumulator, currentValue, currentIndex, array) { /* … */ })

reduce(function (accumulator, currentValue) { /* … */ }, initialValue)
reduce(function (accumulator, currentValue, currentIndex) { /* … */ }, initialValue)
reduce(function (accumulator, currentValue, currentIndex, array) { /* … */ }, initialValue)

❗  참고: 초기값(initialValue) 또는 이전에 반환된 값을 유지하는 데 사용되는 새 매개변수 accumulator와 currentValue, index 및 array의 매개변수가 있다. 자세한 내용은 아래 포스팅 참고.

 

2022.11.06 - [Dev/JavaScript] - [JavaScript] reduce(리듀스) 함수 알아보기

 

---

5. Array.reduceRight()

Array.reduceRight() : 끝 인덱스 부터 시작한다는 점을 제외하고는 reduce()와 유사하다.

 

💡 예제

배열을 만들고 reduce() 함수를 사용하여 배열 요소의 합을 알아보기.

const nums = [10, 20, 30, 40, 50];

const sum = nums.reduce(function (total, value) {
  return total + value;
});

 

💡 출력

150

 

 

---

6. Array.some()

Array.some()  :  배열 요소 중 일부가 조건을 통과하는지 여부를 확인하는 데 사용할 수 있다.

 

💡 예제

배열에 30 이상의 요소가 있는지 확인하고, 조건을 충족하면 true를 반환 그렇지 않으면 false를 반환하는 예

const nums = [10, 20, 30, 40, 50];

const over30 = nums.some(function (value) {
  return value > 30;
});

 

💡 출력

true

 

📃 mdn web docs

// Arrow function
some((element) => { /* … */ })
some((element, index) => { /* … */ })
some((element, index, array) => { /* … */ })

// Callback function
some(callbackFn)
some(callbackFn, thisArg)

// Inline callback function
some(function (element) { /* … */ })
some(function (element, index) { /* … */ })
some(function (element, index, array) { /* … */ })
some(function (element, index, array) { /* … */ }, thisArg)

 

---

7. Array.every()

Array.every()  :  배열 요소 모두 조건을 통과하는지 여부를 확인하는 데 사용 할 수 있다.

 

💡 예제

배열에 30 이상의 요소가 있는지 확인하고, 조건을 충족하면 true를 반환 그렇지 않으면 false를 반환하는 예

const nums = [10, 20, 30, 40, 50];

const over30 = nums.some(function (value) {
  return value > 30;
});

 

💡 출력

false

 

📃 mdn web docs

// Arrow function
every((element) => { /* … */ })
every((element, index) => { /* … */ })
every((element, index, array) => { /* … */ })

// Callback function
every(callbackFn)
every(callbackFn, thisArg)

// Inline callback function
every(function (element) { /* … */ })
every(function (element, index) { /* … */ })
every(function (element, index, array) { /* … */ })
every(function (element, index, array) { /* … */ }, thisArg)

 

 

---

8. Array.find()

Array.find()  :  주어진 조건을 만족하는 첫 번째 배열 요소의 값을 반환한다.

 

💡 예제

배열에 30 이상의 요소가 있는지 확인하고, 조건을 충족하면 true를 반환 그렇지 않으면 false를 반환하는 예

const nums = [10, 20, 30, 40, 50];

const firstNum = nums.find(function (value) {
  return value > 30;
});

 

💡 출력

40

 

📃 mdn web docs

// Arrow function
find((element) => { /* … */ })
find((element, index) => { /* … */ })
find((element, index, array) => { /* … */ })

// Callback function
find(callbackFn)
find(callbackFn, thisArg)

// Inline callback function
find(function (element) { /* … */ })
find(function (element, index) { /* … */ })
find(function (element, index, array) { /* … */ })
find(function (element, index, array) { /* … */ }, thisArg)

 

---

9. Array.findIndex()

Array.findIndex()  :  주어진 조건을 만족하는 첫 번째 배열 요소의 인덱스을 반환한다.

 

💡 예제

배열에 30 이상의 요소가 있는지 확인하고, 조건을 충족하면 요소의 인덱스를 반환하는 예

const nums = [10, 20, 30, 40, 50];

const firstIdx = nums.findIndex(function (value) {
  return value > 30;
});

 

💡 출력

3

 

📃 mdn web docs

// Arrow function
findIndex((element) => { /* … */ })
findIndex((element, index) => { /* … */ })
findIndex((element, index, array) => { /* … */ })

// Callback function
findIndex(callbackFn)
findIndex(callbackFn, thisArg)

// Inline callback function
findIndex(function (element) { /* … */ })
findIndex(function (element, index) { /* … */ })
findIndex(function (element, index, array) { /* … */ })
findIndex(function (element, index, array) { /* … */ }, thisArg)

 

 

---

10. Array.indexOf()

Array.indexOf()  :  배열 내에서 요소를 검색하고 해당 위치를 반환한다.

 

💡 예제

배열에서 Dolly의 위치 찾기

const names = ["Frank", "Charles", "Dolly", "Robert", "Bob"];

const pos = names.indexOf("Dolly");

 

💡 출력

2

 

📃 mdn web docs

indexOf(searchElement)
indexOf(searchElement, fromIndex)

배열 요소의 위치를 ​​반환하며 발견된 요소의 첫 번째 항목을 반환한다.

요소를 찾지 못하면 -1을 반환한다.

 

---

11. Array.lastIndexOf()

Array.indexOf()  :  배열의 끝에서부터 요소를 검색한다

 

💡 예제

배열에서 Dolly의 위치 찾기

const names = ["Frank", "Charles", "Dolly", "Robert", "Bob"];

const pos = names.indexOf("Dolly");

 

💡 출력

2

 

📃 mdn web docs

// Arrow function
findIndex((element) => { /* … */ })
findIndex((element, index) => { /* … */ })
findIndex((element, index, array) => { /* … */ })

// Callback function
findIndex(callbackFn)
findIndex(callbackFn, thisArg)

// Inline callback function
findIndex(function (element) { /* … */ })
findIndex(function (element, index) { /* … */ })
findIndex(function (element, index, array) { /* … */ })
findIndex(function (element, index, array) { /* … */ }, thisArg)

 

 

---

✔ 요약

이 포스팅에서는 다양한 유형의 JavaScript 배열 반복에 대해 살펴봤다.

앞에 살펴본 반복들은 일상적인 프로그래밍에 정말 유용하다.

이러한 매서드를 사용하여 많은 작업을 수행할 수 있다.

 

 

원문 및 참고자료

https://www.zeptobook.com/eleven-ways-to-learn-javascript-array-iteration-effectively/

https://developer.mozilla.org/en-US/search?q=array