티스토리 뷰

Tip and Error/Javascript

forEach, map, filter, reduce

geonwoopaeng@gmail.com 2021. 8. 13. 14:00

> forEach()

< 각 요소를 func에 적용 >

  • forEach(func, thisArg)
    • func: 함수
    • thisArg: 함수 내에 this로 사용할 애들(안써줘도 됩니다.)
//ex)
function forEach(func, thisArg) {
    for (let i = 0; i < a.length; i++) {
        func(a[i], i);
    }
}

//ex)
a = [10, 20, 30];
a.forEach(function(value, index) {
    console.log(value, index);
});
//10 0
//20 1
//30 2

 

 

> map()

< 각 요소 를 탐색하여 새로운 배열 생성(func이용) >

  • map(func, thisArg)
    • func: 함수
      • func에 부적합하면 undefined로 push
    • thisArg: 함수 내에 this로 사용할 애들(안써줘도 됩니다.)
//ex)
function map(func, thisArg) {
    let list=[];
    let i;
    for (i = 0; i < a.length; i++) {
        list.push(func(a[i], i));
    }
    return list;
}

a = [10, 21, 30];
let result = a.map(function(value, index) {
    if (value % 2 == 0) return value;
});
console.log(result);
// [10, undefined, 3]

 

 

> filter()

< map과 다르게 func에 적합한 요소만 배열에 넣어줍니다. >

  • filter(func, thisArg)
  • func: 함수
    • func에 부적합하면 undefined로 push
  • thisArg: 함수 내에 this로 사용할 애들(안써줘도 됩니다.)
//ex)
function filter(func, thisArg) {
    let list=[];
    let i;
    for (i = 0; i < a.length; i++) {
        if (func(a[i], i)) {
            //참 일 경우
            list.push(func(a[i], i));
        }
    }
    return list;
}

a = [10, 21, 30];
let result = a.filter(function(value, index) {
    return value % 2 == 0;
});
console.log(result);
// [10, 30]

 

 

> reduce()

< 각 요소를 수행(func)한 값을 return >

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

  • reduce(func, value)
  • func: 함수
  • value: 초기 값
  • 재귀느낌의 함수
//ex)
function reduce(func, value) {
    let result = value;
    let i;

    for (i = 0; i < a.length; i++) {
        result = func(result, a[i]);
    }
    return result;
}

a = [10, 21, 30];
let result = a.reduce(function(acc, value) {
    return acc + value;
}, 0);
console.log(result);
// 61
반응형
공지사항
최근에 올라온 글