[자바스크립트] filter(), reduce(), fill(), map()

배열 메서드 정리

1. filter() 2. reduce() 3. fill() 4. map()

 

1. filter()
Array.prototype.filter()

filter() 메서드는 배열 각 요소들을 filter 메서드 내부에 기입된 함수에 대입하여 조건에 부합하는 함수만 거르는 기능을 한다.

const word = ['sparay', 'limit','elite','exuberant','destruction','present'];
const result = words.filter(word=>word.length>6); //words배열에서 6글자 이상인 글자들만 추출하여 배열로 반환
console.log(result);
//["exucerant","destruction","present"]

▶프로그래머스 Lv.0 각도기 문제에 적용

1. 문제 설명

각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요.

• 예각 : 0 < angle < 90
• 직각 : angle = 90
• 둔각 : 90 < angle < 180
• 평각 : angle = 180

2. 제한사항
  - 0 < angle ≤ 180
  - angle은 정수입니다.

3.입출력 예

angle	result
70	1
91	3
180	4

funciton solution(angle){
	let arr = [0,90,91,180]
	return arr.filter(x=>angle>=x).length
    //angle이 arr배열의 값보다 크거나 같은 개수를 찾는다.
    //angle이 70일 때 만족하는 조건으로 배열을 새로 만들면 [0] 뿐이니까 length는 1
    //angle이 91일 때 만족하는 조건으로 배열을 새로 만들면 [0, 90, 91]이므로 length는 3
    //angle이 180 일 때는 [0,90,91,180]이므로 length는 4
 }

---

처음엔 if else 문으로 풀었는데 다른 분들의 답을 통해 자바스크립트에는 filter라는 메서드가 있다는 걸 알게 되었고 14줄의 코드를 2~3줄로 줄일 수 있어서 신세계였다.

//처음 풀이
function solution(angle) {
    if(angle<90){
        return 1
    }
    else if(angle == 90){
        return 2
    }
    else if(angle >90 && angle<180){
        return 3
    }
    else{
        return 4
    }
}

 

Array.prototype.filter() - JavaScript | MDN

---

2. reduce 
Array.prototype.reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 누적 계산을 하는 데 사용된다.  for문을 돌리지 않고 0부터 n까지의 합을 구할 수 있다.

*reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다.

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

 

리듀스 함수는 네 개의 인자를 갖는다.
1) 이전값(prev) 또는 누산기(acc)
2) 현재값(cur)
3) 현재인덱스(idx)
4) 원본배열(src)

arr.reduce(callback[, initialValue])

1) arr : reduce()를 호출한 배열
2) callback
    - accumulator : 누산기는 콜백의 반환 값을 누적한다. 콜백의 이전 반환 값 또는 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값
   - currentValue : 처리할 현재 요소
   - [currentIndex] : 생략 가능, 처리할 현재 요소의 인덱스, initialValue를 제공한 경우 0, 아니면 1부터 시작
3) initialValue : 생략 가능, callback의 최초 호출에서 첫 번째 인수에 제공하는 값, 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용. 하지만 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생함

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

▶프로그래머스 Lv.0 배열의 평균 값 구하기

1. 문제 설명

정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요.

2. 제한사항
 - 0 ≤ numbers의 원소 ≤ 1,000
 - 1 ≤ numbers의 길이 ≤ 100
 - 정답의 소수 부분이 .0 또는 .5인 경우만 입력으로 주어집니다.

3. 입출력 예

numbers	result
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]	5.5
[89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99]	94.0

 

function solution(numbers) {
    return numbers.reduce((acc,cur)=>acc+cur,0)/numbers.length
    //1. numbers 배열에 reduce()함수 호출
    //2. callback 함수 선언 (누적할 변수 acc에 cur 값을 더해서 누적해라), 초기값은 0
    //3. 이 때 cur에는 numbers 배열의 값이 하나씩 들어간다.
    //4. recduce()를 통해 리턴 된 누적 값에 numbers.length를 나눠 배열의 평균을 구함
}

---

3. fill
Array.prototype.fill()

fill() 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채운다.

arr.fill(value[, start[, end]])

1) value : 배열을 채울 값
2) start : 시작 인덱스, 생략가능, 기본 값은 0
3) end : 끝 인덱스,  생략가능, 기본 값은 this.length

const array1 = [1, 2, 3, 4];

console.log(array1.fill(0, 2, 4));
//[1, 2, 0, 0]
//2번째 인덱스 부터 4번째 인덱스까지 0으로 채운다.

console.log(array1.fill(5, 1));
// [1, 5, 5, 5]
// 1번째 인덱스부터 끝까지 5로 채운다

console.log(array1.fill(6));
//[6, 6, 6, 6]
// 6으로 모두 채운다.

 

Array.prototype.fill() - JavaScript | MDN

---

4. map
Array.prototype.map()

map() 메서드는 배열 요소 각각에 대해 map 내부에 정의한 함수 안에 넣고 돌린 결과를 모아 새로운 배열을 만든다.

 arr.map(callback(currentValue[, index[, array]])[, thisArg])

1) callback : 새로운 배열 요소를 생성하는 함수
 - currentValue : 처리할 현재 요소
 - index : 생략 가능, 처리할 현재 요소의 인덱스
 - array : 생략 가능, map()을 호출한 배열
2) thisArg : 생략 가능, callback을 실행할 때 this로 사용되는 값, 생략하는 경우 undefined값이 this 값으로 사용됨

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);
//array1의 각 요소에 곱하기 2를 한 새로운 배열을 반환한다.

console.log(map1);
//[2, 8, 18, 32]

▶프로그래머스 Lv.0 짝수의 합

1. 문제 설명

정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요.

2. 제한사항
0 < n ≤ 1000
3. 입출력 예

n	result
10	30
4	6

function solution(n) {
  return Array(n)
    .fill()
    .map((_, i) => i + 1)
    .filter((v) => v % 2 === 0)
    .reduce((acc, cur) => acc + cur, 0);
}

//코드설명
function solution(n) {
  return Array(n) //n 크기의 빈 배열 선언
    .fill()
    //배열을 undefined로 채움[undefined,...,undefined]
    .map((_, i) => i + 1) 
    //앞의 배열의 모두 undefined로 채워져 있기 때문에 currentValues _는 undefined이고,
    //여기에서는 인덱스를 사용. i+1 해줘서 시작 값이 1인 배열 생성 [1,2,3,...,n]
    .filter((v) => v % 2 === 0) 
    // filter()를 통해 2로 나누어 나머지가 0인 값을 통해 짝수 필터링
    .reduce((acc, cur) => acc + cur, 0); 
    // reduce()를 통해 짝수 값을 누산한다.
}