[JavaScript] 33. 그 외 고차함수

* Array.forEach()

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

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

- 나는 이 글을 읽고서야 드디어.. 이해했다!: https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Array-forEach

자바스크립트 Array forEach

// for문 사용 (output: 1 2 3)
let nums = [1, 2, 3];
for (let i = 0; i < nums.length; i++) {
  console.log(nums[i]);
}

// forEach 사용 (output: 1 2 3)
nums.forEach(function (i) {
  console.log(i);
});

// forEach 사용
nums.forEach(function (item, index, array) {
  console.log(`${array}의 ${index}번째 요소: ${item}`);
});
/* output:
1,2,3의 0번째 요소: 1
1,2,3의 1번째 요소: 2
1,2,3의 2번째 요소: 3
*/

 

* Array.map()

- 배열 요소 각각에 대해 콜백함수 실행, 그 결과를 배열로 반환: Array.map(function(item, index, array){})

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

// for문 사용
let nums = [1, 2, 3];
let use_for_loop = []; // for 문의 결과가 저장될 배열
for (let i = 0; i < nums.length; i++) {
  use_for_loop.push(nums[i] * 2);
}
console.log(use_for_loop); // output: [ 2, 4, 6 ]

// map 사용
let use_map = nums.map(function (i) {
  return i * 2;
});
console.log(use_map); // output: [ 2, 4, 6 ]

// map 사용
let use_map2 = nums.map(function (item, index, array) {
  return `${array}의 ${index}번째 요소 ${item}에 2를 곱하면 ${item * 2}`;
});
console.log(use_map2);
/* output:
'1,2,3의 0번째 요소 1에 2를 곱하면 2',
'1,2,3의 1번째 요소 2에 2를 곱하면 4',
'1,2,3의 2번째 요소 3에 2를 곱하면 6'
*/

 

* Array.find()

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

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

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

// job이 false인 유저를 한 명 찾아서 find_job에 저장
let find_job = users.find(function (user) {
  return user.job == false;
});
console.log(find_job);
// output: { name: 'Alice', age: 17, job: false }

// age가 19보다 큰 유저를 한 명 찾아서 find_age에 저장
let find_age = users.find(function (user) {
  return user.age > 19;
});
console.log(find_age);
// output: { name: 'Bob', age: 20, job: false }

// age가 15보다 작은 유저를 한 명 찾아서 find_age2에 저장
let find_age2 = users.find(function (user) {
  return user.age < 15;
});
console.log(find_age2);
// output: undefined (조건에 맞는 유저 없음)

 

* Array.filter()

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

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

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

// job이 false인 유저를 모두 찾아서 filter_job 배열에 저장
let filter_job = users.filter(function (user) {
  return user.job == false;
});
console.log(filter_job);
/* output: [
  { name: 'Alice', age: 17, job: false },
  { name: 'Bob', age: 20, job: false }
]*/

// age가 19보다 큰 유저를 모두 찾아서 filter_age에 저장
let filter_age = users.filter(function (user) {
  return user.age > 19;
});
console.log(filter_age);
/* output: [
  { name: 'Bob', age: 20, job: false },
  { name: 'Chris', age: 27, job: true }
]*/

// age가 15보다 작은 유저를 모두 찾아서 filter_age2에 저장
let filter_age2 = users.filter(function (user) {
  return user.age < 15;
});
console.log(filter_age2);
// output: [] (조건에 맞는 유저 없음)

 

* Array.reduce()

- 배열 요소 각각에 대해 콜백함수 실행, 누적 결괏값 반환: Array.reduce(function(accumulator, item, index, array){})

- accumulator: 이전 수행 결과(initial로 초기값 설정 가능), item: 배열 요소, index: 배열 위치, array: 배열

let nums = [2, 3, 4, 5, 6];

console.log("result\tvalue\tindex"); // 결과값을 보기 좋게

let sum = nums.reduce(function (accumulator, item, index, array) {
  console.log(accumulator, "\t\t", item, "\t\t", index);
  return accumulator + item;
}); // initial값을 지정하지 않으면 배열의 첫 번째 값(2)이 accumulator의 초기값이 됨
console.log(sum); // output: 20(2 + 3 + 4 + 5 + 6)

console.log("result\tvalue\tindex");
let sum2 = nums.reduce(function (accumulator, item, index, array) {
  console.log(accumulator, "\t\t", item, "\t\t", index);
  return accumulator + item;
}, 0); // initial값을 0으로 지정 (acuumulator의 초기값: 0)
console.log(sum2); // output: 20(0 + 2 + 3 + 4 + 5 + 6)

console.log("result\tvalue\tindex");
let sum3 = nums.reduce(function (accumulator, item, index, array) {
  console.log(accumulator, "\t", item, "\t\t", index);
  return accumulator + item;
}, 100); // initial값을 100으로 지정 (acuumulator의 초기값: 100)
console.log(sum3); // output: 120(100 + 2 + 3 + 4 + 5 + 6)