[TIL : 12] 고차함수

👩‍💻 Achievement Goals : 고차함수

• 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.

  yes! 🙌

  1. 변수에 할당할 수 있다.
  2. 다른 함수의 인자로 전달할 수 있다.
  3. 다른 함수의 결과로 리턴될 수 있다.

• 고차 함수(higher-order function)에 대해 설명할 수 있다.

  고차함수란 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다. 쉽게 이해하자면 함수 안에서 또 함수를 불러올 수 있다는 것이다.

• 고차 함수를 자바스크립트로 작성할 수 있다.

  yes! 👏

  function addNumber (num1) {
  	return function (num2) {
      	return num1 + num2
          }
      }
  let add = addNumber(3)(5)
  console.log(add)     // 8
  
  function subNumber (num1) {
  	return function (num2) {
      	return num1 - num2
          }
      }
  let subtract = subNumber(3)(5)
  console.log(add)      // -2

  함수에 3을 넣을 채로 불러와서, 거기에 5를 넣어준다고 생각하면 쉽다. 빼기를 해 보면 알 수 있듯이 나중에 넣어준 게 안쪽 함수로 들어간다.

👩‍💻 Achievement Goals : 내장 고차함수

• 배열 내장 고차함수 filter에 대해서 이해할 수 있다.

  filter : .filter() ()안에 조건함수를 넣어 배열의 요소가 조건에 만족하면(Boolean) 분류하여 새 배열을 만들어주는 내장 고차함수이다. 기존 배열을 수정하지 않는다.

• filter에 대한 이해를 기반으로, 나머지 고차함수를 스스로 학습할 수 있다.

  yes! 아래를 봐 보자🙋‍♀️

• map : 배열의 각 요소가 .map()의 () 안의 특정 논리어 따라 요소가 바뀌어 새로운 배열을 반환한다. 기존배열을 수정하지 않는다.

  let arr = [1, 2, 3];
  arr1 = arr.map(el=> el * 2)
  console.log(arr1)     // [2, 4, 6]

• forEach : .forEach() map과 비슷하지만 반환값이 없다! 반환값이 없기 때문에 이렇게 써야 한다.

  let arr = [1, 2, 3];
  arr2 = [];
  arr2 = arr.forEach(el=> el * 2)
  console.log(arr2)     // undefined
  arr3 = [];
  arr.forEach((el, i)=> arr3[i] = el * 2) // 반환값이 없기 때문에 각 요소의 인덱스에 접근해서 할당해주어야 한다!
  console.log(arr3)     // [2, 4, 6]

• find : .find()배열에 ()안의 만족하는 값이 있는 지 찾고, 그 값을 반환한다. 없다면 undefined를 반환한다. (그 외에 인덱스를 알고싶으면 indexOf를 쓰자)

  let arr = [1, 2, 3, 4, 5];
  console.log(arr.find(4))    // 4
  console.log(arr.find(8))    // undefined

• reduce : .reduce() 은 배열의 각 요소가 ( ) 안의 논리에 따라 원하는 하나의 형태로 응축한다! 주로 누적값, 더하거나 빼는 등에 쓰인다.

  let arr = [1, 2, 3];
  arr4 = arr.reduce((sum, cur) => sum + cur, 0); // sum이 반환되는 결과값, cur가 돌아다니며 배열의 요소가 된다. 0은 초기값으로 써주지 않으면 배열의 첫 요소가 된다.
  console.log(arr4)     // 6

• sort : .sort() 그냥 쓰면 사전식 정렬이 된다. 오름차순은 ((a, b) => a - b), 내림차순은((a, b) => b - a) 이렇게 써 준다. 신기한 점은 숫자들 사이 문자도 같이 정렬이 된다는 점이다!

  let arr = [1, 2, 11, 12, 4, '3', '5']
  arr.sort();                   // [1, 11, 12, 2, '3', 4, '5']
  arr.sort((a, b) => a - b)     // [1, 2, '3', 4, '5', 11, 12]
  arr.sort((a, b) => b - a)     // [12, 11, '5', 4, '3', 2, 1]

• some : .some() 배열의 요소 중 하나라도 ( ) 안의 논리를 만족한다면 true를 반환한다.
• every : .every() 배열의 요소가 모두 ( ) 안의 논리를 만족한다면 true를 반환한다. some과 every 모두 Boolean을 반환한다. 짝수를 판별하는 식을 만들어보자.

  let arr = [1, 2, 3, 4];
  arr.some(el => el % 2 === 0)     // true
  arr.every(el => el % 2 === 0)     // false

• 추상화(abstraction)에 대해 설명할 수 있다.

  추상화는 복잡한 어떠한 것을 압축해서 핵심만 추출한 상태로 만드는 것이다. 프로그래밍언어를 추상화의 형태로 사용되어 복잡한 과정을 빠르고 편리하게 만들어 생산성을 향상시킬 수 있다.

• 추상화의 관점에서 고차 함수가 갖는 이점에 대해 설명할 수 있다.

  위에서 설명했듯 고차함수로 자주 쓰는 메소드들을 만들어 복잡한 과정을 빠르고 신속하게 처리할 수 있다. 예를 들어 누적값을 구할 수 있는 'reduce'가 있으니 얼마나 편리한가!? 😆

• 고차 함수를 활용하여 프로그램을 작성할 수 있다.

  yes!👌
  전에 풀었던 알파벳 수 구하기를 .reduce로 쉽게 풀 수 있다는 걸 알게되었다!

  let str = 'banana';
  let arr = str.split('')         // ['b', 'a', 'n', 'a', 'n', 'a']
  let result = arr.reduce((obj, el) => {
  		if (el in obj) obj[el]++;  // 알파벳이 키값으로 있다면 해당 벨류값을 증가시킴
      		else obj[el] = 1;          // 만약에 알파벳이 없으면 { b : 1} 이렇게 추가
      		return obj;
      		}, {})                     // 꼭! 객체로 초기값을 설정해줘야 함!
  console.log(result)                        // {b: 1, a: 3, n: 2}

📚 그 외

• 스터디를 통해 오늘 알고리즘 문제에서 처음 접한 녀석들을 이해하게 되었다. 아 --- 주 🤓 유익한 시간이었다. 내장 고차함수에 대한 이론을 알고 나니 왜 이 메소드들을 이렇게 쓰는지 이해할 수 있었다. 덕분에 오늘 알고리즘 풀이는 이녀석을을 아주 적극 활용해 보았다!
  😆😆😆 더 똑똑해진 기분이다!🤩🥴✌️🧠 (새로운 new Array().fill()과 map의 활용!
  https://velog.io/@pearpearb/알고리즘-29-Reversed-sequence/ )
• 오늘 스터디를 하면서 새롭고 신기한 걸 발견했다!

  [1] + [2] + [3]              // '123'
  [12, 3] + [45, 6] + [78]     // '12,345,678'

  배열을 더했더니 문자열이 나온다!

• 오늘 고차함수에서 약간 멘붕🤯이었지만 문제를 풀면서 나아졌다. 역시 문제를 풀어야 하나 보다. 그래서 약간 위축도 되었지만... 그래도! 아직! 12일차인데! 이정도면! 잘 하고 있다!! 나 자신! 오늘도 칭찬해🐣 1일차땐 콘솔 키는 방법도 몰랐는데 이젠 제법 능숙하다!
• 오늘 어렵다고 해서 바짝 긴장했는데 다행히 스케쥴이 맞춰 잘 끝냈다! 내가 늦어지면 같이 공부하는 지휴의 스케쥴도 늦어지니 아주아주 집중했다.😁
• 처음 CSS/ HTML 배울 때보다 수월했던 것 같기도. 알면 알수록 이런 유능한 메소드들이 있다는 게 싱기방기하다!
• 내일은 엄청 재밌다고 한다. 기대기대 * 10000000000! 내일도 일찍 일어나야지. 오늘 잠깐 산책을 나갔는데 이제 진짜 가을...?🍂 아마도 겨울🥶 인 것 같다. 눈이 조금 침침해진 것 같은데 눈관리도 신경써야지👀