JavaScript 배열 관련 메서드(5) - forEach(), map(), find(), filter(), reduce()

공부하며 기록한 것이기 때문에 틀린 부분이 있을 수 있습니다. 발견하시면 댓글 부탁드려요:)

 

🔴 Array.forEach()

요소 별로 각각 콜백함수를 실행한다.

let nums = [1,2,3];
nums.forEach(function (i){
    console.log(i)
})
/* output
1
2
3
*/

 

🟠 Array.map()

요소 별로 콜백함수를 실행하고, 그 결과를 배열로 반환한다.

let nums = [1,2,3,4,5];
let use_map = nums.map(function (item){
    return item * 2;
})
console.log(use_map); //output: [ 2, 4, 6, 8, 10 ]

 

🟡 Array.find()

요소들 중 콜백 함수의 조건을 만족하는 첫 번째 값만 반환한다.

let users = [
    { name: "bob", age: 17, job: false},
    { name: "yebin", age: 23, job: false},
    { name: "john", age: 27, job: true}
];

let find_job = users.find(function (user){
    return user.job == false;
});

console.log(find_job); //output: { name: 'bob', age: 17, job: false }

let find_age = users.find(function (user){
    return user.age > 19; //output: { name: 'yebin', age: 23, job: false }
})
console.log(find_age);

 

🟢 Array.filter()

요소들 중 콜백 함수의 조건을 만족하는 값들을 배열로 반환한다.

let users = [
    { name: "bob", age: 17, job: false},
    { name: "yebin", age: 23, job: false},
    { name: "john", age: 27, job: true}
];

let filter_job = users.filter(function(user){
    return user.job == false;
});
console.log(filter_job);
/*output:
[
  { name: 'bob', age: 17, job: false },
  { name: 'yebin', age: 23, job: false }
]
*/

let filter_age = users.filter(function (user){
    return user.age > 19;
});
console.log(filter_age);
/*output:
[
  { name: 'yebin', age: 23, job: false },
  { name: 'john', age: 27, job: true }
]
 */

 

🔵 Array.reduce()

요소 별로 함수 수행 누적 결과값을 반환한다.

accumulator : 이전 함수 결과

( initial로 초기값 설정 가능 → 초기값이 없다면 index 1부터 시작 )

item : 요소 값

index : 요소의 인덱스

let nums = [1,2,3,4,5];
let call_count = 0;

console.log("result\tvalue\tindex");
let sum = nums.reduce(function(accumulator, item, index, array){
    console.log(accumulator, "\t\t", item, "\t\t", index);
    call_count++;
    return accumulator+item; //초기값 부터 각 요소를 더한 결과를 반환
}, 0); //initial ( = 0 )이 없다면 index 1부터 시작
/*output:
result	value	index
0 		 1 		 0
1 		 2 		 1
3 		 3 		 2
6 		 4 		 3
10 		 5 		 4
 */

console.log(call_count); //output: 5
console.log(sum); //output: 15