JS)Array.filter() Array.reduce()

.filter()

filter 메소드는 주어진 함수의 조건을 통과하는 요소를 모아 새로운 배열로 반환한다.

 

filter 실습>> 문자열이 6보다 크거나 같은 값 반환

let words = ['banana', 'apple', 'watermelon', 'pear', 'cherry', 'strawberry'];
let result = words.filter(x => x.length >= 6);

console.log(result);

출력값 >>

 

filter 실습>> 7보다 작은 수 반환

let num = [1,2,3,4,5,6,7,8,9,10]
let result2 = num.filter(e => e <7);

console.log(result2);

출력값 >>

 

 

.reduce()

reduce 메소드는 각 요소에 대해 콜백 함수를 수행하고 하나의 결과값을 반환한다.

이때 명시된 콜백 함수에 배열의 첫 번째 요소와 두 번째 요소를 인수로 전달하고 실행한다.

반환된 결과값과 세번째 요소를 다시 인수로 전달하고 실행한다.

이러한 동작을 반복하여 모든 배열 요소를 인수로 전달하고 , 마지막으로 반환된 결과 값을 반환한다.

 

두번째 argument에 initialValue를 넣을 수 있다.

- initialValue를 설정한 경우 callback의 최초 호출시 initialValue로 값을 초기화한다.

- initialValue가 없을 경우 arr의 0번째 값으로 초기화한다.

 

실습 1> 배열 요소의 합계산

let arrA = [1, 2, 3, 4, 5];
let add = (a, b) => a + b;

console.log(arrA.reduce(add));

let arrB = [9, 2, 8, 5, 7];
let sum = arrB.reduce((pre, value) => {
	return pre + value; 
});

console.log(sum);

출력값 >>

 

 

실습 2>  정수 배열에서 5인 정수만 출력하기

let arrC = [10, 100, 3, 4, 50, 7];
let arrD = arrC.reduce((pre, value) => {
  if (value % 5 === 0) {
    pre.push(value);
  }
  return pre;
}, []);
console.log(arrD);

출력값 >>

 

실습3 > initialValue 추가

let arrE = [1, 3, 5, 7, 9];
let sum2 = arrE.reduce((a,b) => a + b , 10);
 
console.log(sum2);

출력값 >>

 

 

참조 :  https://velog.io/@yoju/JavaScript-%EB%B0%B0%EC%97%B4-%EB%A9%94%EC%86%8C%EB%93%9C-map-filter-find-reduce

JavaScript 배열 메소드 - map(), filter(), find(), reduce()

https://www.devkuma.com/docs/javascript/array-%EB%A9%94%EC%86%8C%EB%93%9C/

JavaScript 입문 | 표준 객체 | Array 메소드