[Javascript] Javascript ES6 Map(매핑) / Filter(필터) / Reduce(감소) / find(찾기) / findIndex(인덱스 찾기)

배열을 다룰 때 유용한 Javascript 함수들을 알아보겠습니다.
대표적으로 Map, Filter, reduce, find, find index 와 같은 함수들이 있습니다.

 

 

(1) Map

Map 은 배열의 각 데이터들에 명령이나 반영할 내용들을 매핑시켜 적용하고자 할 때 사용하는 함수입니다.
Map() 함수 내부에는 동작되는 내부 함수가 존재하므로 Map 에 반영할 내용들을 넣기만 하면 모든 데이터에 동일하게 적용되게 됩니다.

 

예시

var numbers = [3, 56, 2, 48, 5];

function double(x){
   return x * 2;
}

console.log(numbers.map(double));

 

결과

배열의 데이터가 존재하고, 매개변수를 두 배로 만들어주는 함수를 만들어 map을 통해 모든 데이터에 적용시켜주어 전부 두 배가 되는 것을 확인할 수 있습니다.
이렇게 배열의 데이터들에 마치 for 문과 같은 동일한 내용을 데이터들에게 적용시킬 때 Map은 효율적이라고 볼 수 있습니다.

 

(2) forEach

forEach 는 for 문과 다름없는 함수입니다.
map 과 같이 배열의 데이터에 반복해서 동일한 작업을 수행할 때 사용하는 함수라고 볼 수 있습니다.

 

예시

var newNumbers = [];

function triple(x) {
   return newNumbers.push(x * 3);
}

numbers.forEach(triple);
console.log(newNumbers);

결과

forEach 함수를 사용해서 numbers 의 각 데이터들에 triple 함수를 적용시켜 반영해주었습니다.
Map 과 마찬가지로 for 문처럼 반복해서 적용되게 하는 함수입니다.

 

 

(3) filter

filter 함수는 특정 조건에 맞는 데이터들에 한해 필터링을 걸어 조회할 수 있는 함수입니다.

 

예시

var numbers = [3, 56, 2, 48, 5];

const newNumbers = numbers.filter(function (num){
   return num < 10;
});

console.log(newNumbers);

결과'

위와 같이 filter 함수를 사용하고 내부에 필터링을 시킬 조건의 함수를 넣어 반환되는 true, false 값에 따른 동작 처리를 할 수 있습니다.
위의 코드에서는 numbers 배열의 데이터들 중에서 10보다 작은 데이터를 찾는 filter를 거쳐 해당 데이터들만 newNumbers 배열로 받아넣어주었습니다.

 

 

(4) reduce

reduce 함수는 배열의 각 데이터에 작업을 수행하여 값을 누적할 때 사용하는 함수입니다.
누적이라고 해서 반드시 더하는 작업만을 수행하는 것이 아니라 reduce 함수 안에 들어갈 함수에 빼기 누적, 곱셈 누적 등 다양한 형식의 누적을 적용하여 활용할 수 있습니다.

 

예시

var numbers = [3, 56, 2, 48, 5];

var newNumber = numbers.reduce(function (accumulator, currentNumber){
  console.log("accumulator : " + accumulator + " currentNumeber : " + currentNumber);
  return accumulator + currentNumber;
})

console.log(newNumber);

결과

위의 코드에서는 더하기 함수를 만들어 reduce로 누적시킨 예시를 들었습니다.
accmulator 는 누적이 된 값을 의미하고, currentNumber 는 누적시킬 현재의 값을 의미합니다.

 

 

(5) find

find 함수는 배열에 주어진 데이터들 중에서 찾고자 하는 값을 특정지어 찾을 수 있도록 도와주는 함수입니다,

 

예시

var numbers = [3, 56, 2, 48, 5];

const findNumber = numbers.find(function (num){
   return num > 10;
});

console.log(findNumber);

결과

위의 예시 코드에서는 find 함수 내부에서 배열의 데이터 중 10 보다 큰 데이터가 있으면 반환하도록 설정해주었습니다.
하지만 결과를 보면 모든 배열의 데이터에 적용되는 것이 아니라 find 함수가 동작될 때 처음 발견한 데이터가 있다면 거기서 멈추고 반환되게 됩니다.
즉, 찾고자 하는 조건의 첫 번째 데이터를 조회하는 것입니다.

 

 

(6) findIndex

findIndex 함수는 find 와 동일하지만 반환되는 결과가 다릅니다.
find는 값 자체를 반환한다고 볼 수 있지만 findIndex 함수는 찾아낸 데이터가 위치한 배열의 위치 값을 반환하게 됩니다.

 

예시

var numbers = [3, 56, 2, 48, 5];

const findIndexNumber = numbers.findIndex(function (num){
   return num > 10;
});

console.log(findIndexNumber);

결과

위의 예시 코드에서는 findIndex 함수를 사용하여 10 보다 큰 데이터의 위치값을 찾아내 반환하도록 하였습니다.
해당 조건으로 찾아낸 첫 번째 데이터가 56이므로, 위치값은 1이 반환되게 되는 것입니다.