- Published on
2023.12.24
JavaScript 배열 메서드인데요 2
.find()
find()
메서드는 배열을 순회하면서 각 요소들이 콜백 함수를 만족시키는지 확인하고, true
를 리턴한 첫번째 요소를 리턴한다. 만족하는 요소가 없으면 undefined
를 리턴한다.
const numbers = [1, 5, 8, 10, 15]
const foundNumber = numbers.find((number) => number > 8)
console.log(foundNumber) // 10
.findIndex()
findIndex()
메서드는 find()
와 유사하게 동작하지만, 요소가 아니라 해당 요소의 인덱스를 리턴한다. 만족하는 요소가 없으면 -1
을 리턴한다.
const numbers = [1, 5, 8, 10, 15]
const foundIndex = numbers.findIndex((number) => number > 8)
console.log(foundIndex) // 2
.findLast()
findLast()
메서드는 find()
와 유사하게 동작하지만, 배열을 뒤에서부터 역순으로 순회하며 각 요소들이 콜백 함수를 만족시키는지 확인한다. 마찬가지로 true
를 리턴한 첫번째 요소(뒤에서)를 리턴하고, 만족하는 요소가 없으면 undefined
를 리턴한다.
const numbers = [1, 5, 8, 10, 15]
const foundLastNumber = numbers.findLast((number) => number > 8)
console.log(foundLastNumber) // 15
.findLastIndex()
findLastIndex()
메서드는 findIndex()
와 유사하게 동작하지만, 배열을 뒤에서부터 역순으로 순회하고 만족하는 요소의 인덱스를 리턴한다. 만족하는 요소가 없으면 -1
을 리턴한다.
const numbers = [1, 5, 8, 10, 15]
const foundLstIndex = numbers.findLastIndex((number) => number > 8)
console.log(foundLstIndex) // 4
.flat()
flat()
메서드는 중첩된 배열을 평탄화한 새 배열을 리턴한다. 매개변수로 숫자값을 넘길 수 있는데, 이는 중첩된 배열을 얼마나 평탄화할지를 지정해 주는 것으로, 기본값은 1
이다.
const nestedArray = [1, [2, 3], [4, [5, 6]]]
console.log(nestedArray.flat()) // [1, 2, 3, 4, [5, 6]]
console.log(nestedArray.flat(2)) // [ 1, 2, 3, 4, 5, 6 ]
매개변수로 Infinity
를 넘기면 모든 중첩된 배열에 대해 평탄화 작업을 진행해 일차원 배열을 리턴한다.
const nestedArray = [1, [2, [3, [4, [5]]]]]
console.log(nestedArray.flat(Infinity)) // [1, 2, 3, 4, 5]
.flatMap()
flatMap()
메서드는 배열의 각 요소에 대해 콜백함수를 실행한 결과를 모은 새로운 배열을 리턴한다.map()
과 유사하게 작동하지만 flatMap()
은 새롭게 리턴한 배열을 깊이 1
만큼 평탄화하여 리턴한다는 차이가 있다. arr.map(...args).flat()
과 동일하다.
const numbers = [1, 2, 3]
console.log(numbers.flatMap((num) => [num ** 2, num ** 2])) // [1, 1, 4, 4, 9, 9]
.forEach()
forEach()
메서드는 배열의 각 요소에 대해 한 번씩 콜백함수를 실행한다. 반복문 동작이 필요할 때 실행한다. forEach
메서드 자체는 따로 리턴값이 없고, 기존 배열을 수정하지 않는다.
const fruits = ['apple', 'banana', 'orange']
fruits.forEach((fruit) => console.log(fruit))
// apple
// banana
// orange
참고 문서 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array