JS 배열 내장함수 ( forEach , map , reduce , filter )

안녕하세요 hp입니다 :)

오늘은 지난번 포스팅에 이어서 JavaScript에 내장함수(forEach , map , filter , reduce)에 대해서 공부해보도록 하겠습니다.

📚 개념

forEach

먼저 forEach에 대해서 배워보겠습니다.
forEach문은 for문에 비해 긴 코드를 간략하게 줄여줘서 가독성을 좋게 만들어줍니다.

먼저 for문으로 작성된 예를 보겠습니다.

const language = ['java' , 'python' , 'javascript' , 'typescript' ];

for (let i = 0; i < language.length; i++){
  console.log(language[i]);
}

⚒️ 결과

 
java
python
javascript
typescript

for문으로 작성된 예시는 초기식 , 조건식 , 증감식을 작성해야하는 번거로움이 있는데요.
그에 반해 아래 작성된 forEach문은 callback 함수를 통해 결과값을 도출합니다.

const language = ['java' , 'python' , 'javascript' , 'typescript' ];

language.forEach((text) => console.log(text));

⚒️ 결과

 
java
python
javascript
typescript

map

그 다음은 map에 대해서 배워보겠습니다.
map은 배열 안의 각 원소를 변환할 때 사용되며 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 만들어 냅니다.

만일 모든 배열에 원소의 x2를 한 결과값을 나타내라 라는 질문에 for문을 예시로 작성해보도록 하겠습니다.

const array = [1,4,9,16];
const result = [];

for(let i = 0 ; i < array.length ; i++){
  result.push(array[i]*2);
}

console.log(result); // [2 , 8 , 16 , 32]

그에 반해 map 함수를 이용하면 더 짧은 코드를 사용하여 구현 할 수 있습니다.

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

const result = array.map(x => x*2);
console.log(result); // [2 , 8 , 18 , 32]
console.log(array); // [1 , 4, 9 , 16 ]

filter

filter 함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만듭니다.

const language = [
  {
    id: 1,
    text: 'java',
    done: true
  },
  {
    id: 2,
    text: 'python',
    done: true
  },
  {
    id: 3,
    text: 'javascript',
    done: true
  },
  {
    id: 4,
    text: 'typescript',
    done: false
  }
];

const learnLanguage = language.filter(learn => learn.done === false);
console.log(learnLanguage); // [ { id: 4, text: 'typescript', done: false } ]

⭐️ reduce

reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

reduce 함수에는 두 개의 파라미터를 전달합니다. 첫번째에 파라미터는 acc(accumulator) 와 cur(current) 를 파라미터로 가져와서 결과를 반환하는 콜백함수 , 두번째는 reduce 함수에서 사용 할 초깃값 (acc 값)입니다.

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

let sum = array.reduce((acc , cur) => acc + cur , 0);

console.log(sum); // 10 

위에 코드의 작동 방식을 보면 acc값은 처음에 0이 되고 cur값은 배열의 첫번째 요소가 된다. 그 결과 값은 다음 acc값이 되고 cur값은 다음 배열을 가르키게 된다. 위 과정을 반복하면 아래와 같다.

{ acc: 0, cur: 1 }
{ acc: 1, cur: 2 }
{ acc: 3, cur: 3 }
{ acc: 6, cur: 4 }

끝까지 읽어주셔서 감사합니다. 😁

📌참고

velopert님 자료
MDN