🚀 94sssh
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