JS기초 11 : 고차함수2 for Each, map, find, filter, reduce

forEach()

- 배열 요소 별 콜백 함수 각각에 실행 : Array.forEach(function(item, index, array){})

- item : 배열 요소, index: 배열 위치, array: 배열

// 배열 함수를 단순 출력할때
let nums = [1,2,3];

//use for loop
for (let i = 0; i < nums.length; i++){
  console.log(nums[i]); // 1 \n 2 \n 3
}; 

// use forEach
// 배열 내의 값이 각각 들어오면서 for문 수행
nums.forEach(function(a){
  console.log(a); // 1 \n 2 \n 3
})

 

map()

- 배열 요소 별 함수 호출 및 결과를 배열로 반환 : Array.map(function(item, index, array){})

- item: 배열 요소, index: 배열 위치, array: 배열

//use for loop
let nums = [1,2,3,4,5];
let use_for_loop = []; // 객체를 매번 만들어야함

for (let i=0; i < nums.length; i++){
  use_for_loop.push(nums[i]*2);
};
console.log(use_for_loop);

//use map
let use_map = nums.map(function(item) {
  return item *2;
});
console.log(use_map)

 

find()

- 콜백 함수의 조건을 만족하는 단 하나의 값만 반환: Array.find(function(item,index,array){})

- item: 배열 요소, index: 배열위치, array: 배열 

let users = [
  {name: "Bob", age : 17, job:false},
  {name: "Alice", age : 20, job:false},
  {name: "Lily", age : 27, job:true},
];

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

console.log(find_job); // { name: 'Bob', age: 17, job: false } 단 하나의 객체만 

let find_age = users.find(function (user) {
  return user.age >= 19;
})

console.log(find_age); // { name: 'Alice', age: 20, job: false }

 

filter()

- 콜백 함수의 조건을 만족하는 모든 값을 배열로 변환:Array.filter(function(item,index,array){})

- item: 배열 요소, index: 배열 위치, array: 배열

let users = [
  {name: "Bob", age : 17, job:false},
  {name: "Alice", age : 20, job:false},
  {name: "Lily", age : 27, job:true},
];

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

console.log(find_job); 
/* [
  { name: 'Bob', age: 17, job: false },
  { name: 'Alice', age: 20, job: false }
]
*/

let find_age = users.filter(function (user) {
  return user.age >= 19;
})

console.log(find_age); 
/*
[
  { name: 'Alice', age: 20, job: false },
  { name: 'Lily', age: 27, job: true }
]
*/

 

reduce()

- 요소별 함수 수행 누적 결과값 반환: Array.reduce(function(accumulator, item, index, array){})

- accumulator: 이전 함수 결과(initial로 초기화 설정 가능)

// 누적 데이터가 반환되는 함수
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 value=0

console.log(call_count);
console.log(sum); 

/*
result	value	index
0 		 1 		 0
1 		 2 		 1
3 		 3 		 2
6 		 4 		 3
10 		 5 		 4
5
15
*/

---

배열 요소를 각각 출력하거나 조건을 만족하는 값을 찾거나 함수를 적용하거나 누적값을 출력해보았다.

특히 reduce로 누적값을 구할 수 있었는데 어떻게 쓰이게 될지 매우 궁금하다.

 

JS 기초 강의가 끝나면 거의 모든 부분이 실습이니 아자아자 힘내자~