Array.prototype. filter, map, reduce

 

Array.prototype.filter()

filter() 메소드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

array.filter(callback(element, idx, array), thisargs...){ 
	statement
});

. element (처리할 현재 요소)

. index (처리할 현재 요소의 인덱스)

. array (filter()을 호출한 배열)

. thisArg (callback을 실행할 때 this로 사용되는 값)

예시))

 

짝수를 필터링

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

//[original]
const filteredIsEven = arr.filter(function (el){
                  	if(typeof(el) === 'number' && el % 2 === 0){
                    	return el;
                       }
                  });
                  
//callback 함수 생성         
const filtering = function (e) {
	if(typeof(e) === 'number' && e % 2 === 0){
    	return e;
    }
}

const filteredIsEven = arr.filter(filtering);         
         
//[ES6]         
const filteredIsEven = arr.filter((el) => (typeof(el) === 'number' && e % 2 === 0));

console.log(filteredIsEven)

 .filter메소드를 통해 arr의 요소를 순회하면서 if 조건문에서의 타입이 원시형인 Number이고, 요소를 2로 나누었을때 최종적으로 값이 0과 같은 경우의 요소를 arr에 다시 담아주었다.   

 

문자열 특정 길이를 필터링

const arr = ['Oculus','Valve','Samsung','AMD','Javascript']

//[original]
const filteredStrLen = arr.filter(function (el){
                  	if(typeof el === 'string' && el.length >= 5){
                    	return el;
                       }
                  });
       
//[ES6]         
const filteredIsEven = arr.filter((el) => (typeof el === 'string' && e.length >= 5);

console.log(filteredIsEven)

배열내 특정 객체를 필터링

const arr =[  
  { name: 'Kim', age: 14 },
  { name: 'Park', age: 25 },
  { name: 'Song', age: 36 },
  { name: 'choi', age: 17 },
  { name: 'Harry', age: 54 },
  { name: 'suzi', age: 21 },
  { name: 'simpson', age: 27 }
];

const isAdult = arr.filter(function (adult){
	if(adult.age >= 18){
		return adult;
	}
})

[ES-6]
const isAdult = arr.filter((adult) => adult.age >= 18)
console.log(isAdult);

배열 안에 키-값 쌍으로 이루어진 객체를 filter 메소드를 통해 순회하면서 조건을 충족한 결과값을 배열에 다시 담아주는 코드이다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

 

Array.prototype.map()

map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 새로운 배열로 반환한다.

. currentValue (처리할 현재 요소)

. index (처리할 현재 요소의 인덱스)

. array (map()을 호출한 배열)

. thisArg (callback을 실행할 때 this로 사용되는 값) 

array.filter(callback(element, idx, array), thisargs...){ 
	statement
});

 

각 요소에 2를 곱하기

const arr = [1, 2, 3, 4, 5];

//[original]
const result = arr.map(function (x) {
                  return x * 2;
               });
               
//callback 함수 생성
const multiply = function (x) {
	return x * 2;
}

const result = arr.map(multiply);


//[ES-6]

const result = arr.map((x) => x * 2);

arr.map 메소드를 실행한 결과를 변수 result에 담아주었다.

 

하지만 원본은 바뀌지 않고, 익명의 함수 또는 콜백 함수를 통해 새로운 배열을 생성 해준다.

이런식으로 사용이 가능하다.

const num = '12345';

const convertNum = num.match(/\d/g).map(Number);
//[1, 2, 3, 4, 5]

 

 

stackoverflow.com/questions/48343478/what-does-mapnumber-do-here/48343680#48343680

Array.prototype.reduce()

reduce() 메소드는 배열의 각 요소를 리듀서 함수를 실행하여, 하나의 결과 값을 반환한다.

. acc Accumulator

. cur currentValue(처리 할 현재값)

. idx currentIndex(처리 할 현재 인덱스)

. array 처리할 현재 배열

arr.reduce(callback (accumlator, currentValue, currentIndex, array){
	statement
});