[JS] Array Helper Methods

Array Helper Methods란?

Array Helper Methods는 배열 조작을 쉽게 할 수 있도록 돕는 특별한 메서드들이다. 배열의 각 요소를 순회하면서 각 요소에 대해 인자로 콜백함수를 받는다. ES6에서 추가되었다.

콜백함수(Callback function)란 다른 함수의 인자로 들어가는 함수를 말한다. Array Helper Methods에서 콜백함수는 반복적인 루틴 작업을 하게 된다.

이제부터 Array Helper Methods중에서 자주 사용되는 헬퍼 메서드를 하나 하나 살펴 보자.

forEach

forEach는 배열 모든 요소를 반복하면서 콜백함수를 호출한다. 단, 반환 값은 없다.

array.forEach(function (element, index, array) {
    // 콜백함수 실행
})

콜백 함수의 매개변수는 3가지다. 먼저 배열의 각 요소인 element가 필수 인자로 들어간다. 그리고 그 요소의 index는 선택인자이고, 전체 배열인 array도 선택인자이다.

한편 this를 쓰기 위해서 화살표 함수가 많이 사용된다. 화살표 함수 없이 this를 쓰게 되면 그 this가 window를 가리키기 때문이다.

const foods = ['치킨', '피자', '탕수육']

foods.forEach((food) => {
    console.log(food)    
})

for … of 와의 비교

한편, for … of 와 똑같지 않나 싶어서 알아봤는데, 기본적으로 배열을 순회할 때 for … of 보다는 forEach를 사용하는 것이 권장된다고 한다.

그 이유는 일단 forEach가 가독성이 좋으면서 callback함수를 이용해서 각 요소를 조작하기 쉽기 때문이라고 한다. 대신 forEach는 break나 continue를 사용할 수는 없다. 대신 나중에 나오는 some이나 every를 사용하면 break처럼 쓸 수 있다고 한다.

map

map은 forEach와 똑같이 배열 모든 요소를 반복하며 콜백함수를 호출하지만, 새로운 배열을 반환한다는 점에서만 forEach와 차이가 있다.

const newArray = array.map(function (element, index, array) {
    // 함수 실행
})

완전히 새로운 배열을 만들어서 반환해준다.

const foods = ['치킨', '피자', '탕수육']

const result = foods.map(function (food) {
    return food.length
})

console.log(result) // [2, 2, 3]


// 당연히 화살표 함수를 사용할 수 있다.
const result2 = foods.map((food) => {
    return food.length
})

filter

filter는 배열의 각 요소를 반복하면서, 콜백함수의 반환 값이 참인 요소만 모아서 새로운 배열을 반환한다.

const array = [1, 2, 3, 4, 5]

const newArray = array.filter((element) => {
    return element % 2 === 0
}) 

console.log(newArray) // [2, 4]

some

some은 배열의 모든 요소를 반복하며 하나라도 콜백함수의 반환 값이 참이되면 즉시 true를 반환하며 배열 순회를 종료한다. 반면 모든 요소를 순회하여도 콜백함수의 반환 값이 참인 값이 없다면 false를 반환한다.

const array = [1, 2, 3, 4, 5]

const hasEven = array.some((element) => element % 2 ===0) // true

every

every는 배열의 모든 요소를 순회하며 콜백함수의 반환 값이 참이라면 true를 반환한다. 반면에 하나라도 반환 값이 참이 아니라면 즉시 false를 반환하고 배열의 순회를 종료한다.

const array = [1, 2, 3, 4, 5]
cosnt allEven = array.every(element => element % 2 === 0) // false

find

find는 배열의 요소를 순회하며 콜백함수의 반환 값이 참이되는 첫번째 요소를 반환한다.

const array = [1, 2, 3, 4, 5]
const foundElement = array.find(element => element > 3 ) // 4