ES6 Helper Method 에 대해 알아보기

ES6 Helper Method 

 

자바스크립트로 개발하다보면, 가장 많이 사용하는 함수 (forEach, map, filter, find, reduce) 들이 있는데  다른 함수 안에서 특정 기능을 하고 있는 것을 Helper Method 라고 부른다. 해당 함수들이 헬퍼 메소드라는 별도의 명칭이 있다는 것을 최근에 알게되었다. 아무리 자주 사용해도 제대로 응용하지 못하고 있는 것 같아 기본기를 다지고자 정리하게 되었다. 

 

 

forEach 

배열의 각각에 대한 요소를 실행하는 메소드이다. 

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

callback 함수에서는 3가지의 매개변수를 받는데, currentvalue 는 처리할 현재 요소, index는 말 그대로 현재 요소의 인덱스값, array 는 forEach() 를 호출하는 배열이다. 마지막으로 thisArg 는 callback을 실행할 때 this로 사용할 값이다.

 

let animals = ["dog", "cat", "pig", "duck"];

// for문을 통한 배열요소 출력
for(var i=0 ; i<animals.length ; i++) {
  console.log(animals[i])
}

// forEach문을 통한 배열요소 출력
animals.forEach(function(animal) {
  console.log(animal)
})

 

구문을 활용해보면 아래와 같이 사용할 수 있다. 

let animals = ["dog", "cat", "pig", "duck"];

// forEach문을 통한 배열요소 출력
animals.forEach(function(animal, index, all) {
  console.log(`인덱스 ${index}: ${animal}, ${all}`)
})

// "인덱스 0: dog, dog,cat,pig,duck"
// "인덱스 1: cat, dog,cat,pig,duck"
// "인덱스 2: pig, dog,cat,pig,duck"
// "인덱스 3: duck, dog,cat,pig,duck"

---

map

arr.map(callback(currentValue[, index[, array]])[, thisArg])

가장 많이 사용하게되는 map 이라는 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 구문은 forEach 와 동일하므로 설명은 생략한다. 

let arr = [2, 4, 6, 8, 10];

const map = arr.map(a => a + 2);
console.log(map); // [4, 6, 8, 10, 12]

 

let animals = ["dog", "cat", "pig", "duck"];

var animalsInfo = animals.map(function (animal, index, all) {
    return (`인덱스 ${index}: ${animal}, ${all}`);
})

console.log(animals) // ["dog", "cat", "pig", "duck"]
console.log(animalsInfo)
// ["인덱스 0: dog, dog,cat,pig,duck", "인덱스 1: cat, dog,cat,pig,duck", "인덱스 2: pig, dog,cat,pig,duck", "인덱스 3: duck, dog,cat,pig,duck"]

forEach 의 경우도 동일하지만 변수를 만들어서 map 을 사용하면 animals 변수는 이전의 값으로 활용 가능하다. 리액트에서 가장 많이 사용하게되는 함수이기도 하다.

---

filter

arr.filter(callback(element[, index[, array]])[, thisArg])

특정 메소드의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 알고는 있지만 나에게 응용이 가장 어려운 함수이기도 하다. 요소를 걸러내어 배열로 true/false를 반환한다. 

 

let datas = [2, 4, 6, 7, 9, 10, 12, 14]

var fileterData = datas.filter(data => {
  return data % 2 === 0
})

console.log(fileterData) // [2, 4, 6, 10, 12, 14]

---

find

하나의 요소만 반환하고, 여러 개일 경우 처음값만 반환한다. 

let arr = [2, 4, 6, 7, 9, 10]

let arrFind = arr.find((n) => (n % 2 === 0))
console.log(arrFind) // 2

---

reduce 

reduce 는 앞에서 소개한 map, find, filter 로 대체 가능하다. 

let arr = [2, 4, 6, 7, 9, 10]

let sum = arr.reduce((pre, val) => pre + val)
console.log(sum) // 38

 

해당 함수들을 기억하여 적절한 때에 응용하면 자바스크립트 개발하기에 편리하다.