[JavaScript] JS_ 8. Function

# INDEX

1. Values & Data type
2. Operators
3. Control flow
4. Scope & Hoisting
5. Object & Array
6. This
7. Prototype & Inheritance
8. Function
  8-1.
9. Callback function
10. Closuer
11. Class
12. Others

8-3. 기본 내장(built-in) 고차함수

** 배열 메소드들 중 일부가 있음 (공통 : 첫번째 인자가 함수)
filter, map, reduce, sort, some, every, forEach, find

1) filter 메소드

Array.prototype.filter( callback (처리할 현재 요소, 현재 요소의 인덱스, filter를 호출할 배열) => return 특정 조건을 통과한 요소로 이루어진 새로운 배열 (* 특정 조건을 통과한 요소가 없다면, 빈 배열을 반환) )
배열의 요소 중 특정 조건을 만족하는(=주어진 함수의 테스트를 통과하는) 모든 요소를 모아, 새로운 배열로 반환하는 메소드 (** 특정조건 : 은 반드시 함수 형태이며, filter메소드의 인자로 전달되어야 함)

• filter메소드는 인자로 전달되는 콜백함수에 배열의 요소를 다시 전달함. 콜백함수는 전달받은 배열의 요소를 받아 (조건에 따라) 참(true) 또는 거짓(false)을 리턴

// ex)
let arr = [1, 2, 3, 4];
let output = arr.filter (짝수);  // 짝수는 예시(error) 짝수를 추출해낼 수 있는 함수가 필요!
console.log(output); 		// [2, 4]

// 배열의 filter 메소드는 함수를 인자로 받는 고차함수
// filter메소드 자체가 고차함수! 왜? 함수를 인자로 받기 때문!
// 따라서, arr.filter를 실행하면 내부적으로 arr에 접근할 수 있음 // ƒ filter()

let arr = [1, 2, 3];
arr.filter = function (arr, func) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    // filter에 인자로 전달된 콜백함수(func)는 arr의 각 요소([1,2,3])를 전달받아 호출됨
    // (각 요소들을 모두 전달받기 위해 반복문을 돌려줌)
    // 콜백함수가 true를 리턴하는 경우에만 새로운 배열에 추가됨 (따라서, true인지 일치 여부를 판별해야)
    if (func(arr[i]) === true) {
      newArr.push(this[i]);
    // 여기서 this는 arr객체를 가리킴
    }
  }
  return newArr;
    // 콜백 함수의 결과가 true인 요소들만 저장된 배열을 리턴
};

// 함수 표현식
let arr = [1, 2, 3, 4];
const isEven = function (num) {
  return num % 2 === 0;
};
let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]
///////////////////////////////////////////////////

let arr = ['hello', 'code', 'states', 'happy', 'hacking'];
const isLteFive = function (str) {
  return str.length <= 5;
};
let output = arr.filter(isLteFive);
// '길이 5 이하'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달됩니다.
console.log(output); // ['hello', 'code', 'happy']

2) map 메소드

Array.prototype.map ( callback (처리할 현재 요소, 인덱스, 배열) => return 배열의 각 요소에 대해 실행한 callback 결과를 모은 새로운 배열)
(original)배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 (= 예를들면, 반복문을 돌며 배열 내의 요소를 1:1로 매칭)

• map을 실행하는 배열(arr)과 결과로 나오는 배열(newArr)이 다른 객체
• 정해진 규칙이 있는 것이 아니라 일반적으로 조금 자유로움
• map은 callback함수를 각각의 요소(original)에 대해 한번씩 "순서대로" 불러 그 함수의 반환값으로 새로운 배열을 만듦
• callback함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됨 (= 값이 할당되기 전이거나, 값이 삭제된 인덱스에 대해서는 해당사항이 없음)
• callback함수는 1) 호출될 때 대상요소의 값 (arr의 값) 2) 대상요소의 인덱스 (arr의 인덱스) 3) map을 호출한 원본 배열 (newArr) / 3개의 인수를 전달받음

let data = [1,2,3,4,5];
let result = data.map(x => {return x+3});
console.log(result) 	// [4, 5, 6, 7, 8]
//////////////////////////////////////////////////
let arr = [
  {key:1, value:10},
  {key:2, value:20},
  {key:3, value: 30}
];
let newArr = arr.map( function (obj) { 
   let newObj = {};
   newObj[obj.key] = obj.value;
   return newObj;
});
console.log(newArr) 	// [{1:10}, {2:20}, {3:30}]
console.log(arr)	// 원본 배열 그대로

---

3) reduce 메소드

Array.prototype.reduce ( callback (누적값, 반환값,인덱스,요소 => 리턴값 ), 초기값 * 이전값이 아니라 누적값이라는 점에 주의
(original) 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, "하나의 결과값"을 반환

• let reducer = function (accumulator, value, index, array)
  • accumulator : 리듀서 함수의 반환값이 누적된 누적값
  • value : 현재 배열의 반환값
  • index : 현재 인덱스
  • array : 원본 배열의 요소

let votes = ["delilah", "jung", "lee", "jung", "lee", "lee", "delilah"];
let reducer = function(accumulator, value, index, array) {
  if (accumulator.hasOwnProperty(value)) {
    accumulator[value] = accumulator[value] + 1;
  } else {
    accumulator[value] = 1;
  }
  return accumulator;
}
let initialValue = {};
let result = votes.reduce(reducer,initialValue);
console.log(result); 	// { delilah : 2, jung : 2, lee : 3 }

////////////////////////////////// basic (모든 요소의 합)
let arr = [1,2,3,4,5];
function addAll (arr) {
  return arr.reduce ((arr, val) => arr + val, 0)
}
// 위는 화살표 함수로 표현 // 아래는 일반 함수로 표현
  return arr.reduce (function (arr, val) {
  return arr + val}, 0)
}
addAll (arr);		// 15

23번 basic ref

4) forEach 메소드

Array.prototype.forEach ( callback (처리할 현재 요소, 현재 요소의 인덱스, forEach를 호출할 배열) => return undefined)
주어진 함수를 배열 요소 각각에 대해 실행

let data= [1, 2, 3, 4, 5]
let result = [];
data.forEach(x => { result.push(x + 3) });
console.log(result); 	// [4, 5, 6, 7, 8]