728x90
핵심 Keyword
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 );
이와 같은 방법으로 사용할 수 있습니다.
'[검색] 공부하기 > JavaScript' 카테고리의 다른 글
[ JS 실행 컨텍스트 ] (0) | 2024.10.07 |
---|---|
[ 자주 쓰이는 자바스크립트 Array 함수 2 ] pop, shift, unshift, slice, splice (0) | 2024.05.13 |