[검색] 공부하기/JavaScript

[ 자주 쓰이는 자바스크립트 Array 함수 5개 ] push, forEach, filter, map, reduce

Ben의 프로그램 2024. 5. 12. 17:59
728x90

핵심 Keyword

1. 출처 : https://velog.io/@saemileee/%EC%A7%80%EA%B8%88-%EB%93%A3%EA%B3%A0-%EC%9E%88%EB%8A%94-%EA%B0%95%EC%A2%8C%EB%93%A4-%ED%88%AC%EB%91%90%EB%A6%AC%EC%8A%A4%ED%8A%B8-SPA

2. 

3. 


들어가기
오늘은 JS 가 Array 데이터 형태에 대해서 기본적으로 제공하는 함수 중에서 많이 사용되는 것들에 대해서 살펴보고자 합니다. 

JS 는 Array 를 효율적으로 가공하기 위해서 많은 내장함수를 제공하는데요. 

대표적으로, 검색한 결과에 해당하는 것만 Array 에 남기기 위해서는 어떻게 해야할까요? JS Array 함수에 익숙하지 않다면 굉장히 어려운 일이 될 수 있습니다. 

하지만 반대로 말하면, 잘 알고 있다면 너무나 쉽게 처리할 수 있는 일이 되기도 한다는 것이죠. 한번 같이 살펴보시죠.

 

 push( )
push( ) 메소드는 현재 배열의 끝에 요소를 추가하는 메소드입니다. 그리고 추가된 배열을 리턴하는 특징이 있는데요. 

재밌는 점은, 한번에 여러 개의 요소를 배열에 넣어줄 수도 있다는 점이빈다. 

let arr = [1, 2, 3];
arr.push(4);
arr.push(5, 6);

바로 위와 같이 활용할 수 있다는 의미입니다. 

 

 forEach( )
forEach( ) 메소드는 현재 배열의 모든 요소를 콜백함수로 순회시키는 특징을 갖습니다. 그리고 각각의 요소에 콜백함수가 실행된 값이 다시 리턴되는 특징을 갖고 있습니다. 

const arr = [1, 2, 3];
arr.forEach( function(ele) {
	ele = ele + 1;
});

그리고 forEach( ) 의 콜백 함수에는 3개의 인자를 받을 수 있습니다. 현재 요소 값, 현재 인덱스, 해당 배열 자체를 받아갈 수 있습니다.
let arr = [1, 2, 3];
arr.forEach( function(ele, index, array) { 
	array[index+1] = ele + 3;
});

이런 forEach( ) 함수의 콜백함수는 보통 화살표 함수를 활용해서 많이 처리합니다.
let arr = [1, 2, 3];
arr.forEach(elem => elem + 3 );

 

 filter( )
filter( ) 함수는 배열의 각 요소를 인자로 받아서 각 인자를 활용한 식이 boolean 값을 return 하도록 콜백함수를 작성하는 방식으로 사용합니다. 이때 콜백함수가 true 를 반환한 것만 다시 모은 array 를 반환하는 특징이 있습니다. 

let array = [1, 2, 3];
array.filter( elem => { return !elem.include('검색어') } );

이런 식으로 검색어 처리를 할 때 너무나 편리하게 할 수 있습니다. 

 

 reduce( )
reduce( ) 함수는 콜백함수에 현재 index 에 해당하는 원자값과 그 동안 축적된 값을 매개변수로 넣어서 사용하게 됩니다. 

reduce( ) 함수를 사용하는 가장 대표적인 예시로 볼 수 있는 것은 바로 축적 합을 구할 때라고 할 수 있는데요.
let array = [1, 2, 3];
let sum = array.reduce( (accum, cur) => accum + cur );


이와 같은 방법으로 사용할 수 있습니다.