20220920 TIL

젬마·2022년 9월 20일

TIL

목록 보기

2/8

오늘 한 공부

section2 unit1 고차함수
고차함수 코플릿 32문제
마이 아고라 스테이츠 localstorage 기능 구현 성공 (!!)

간단 정리

고차함수

일급객체

함수를 다른 변수와 동일하게 다루는 언어를 일급 객체를 가졌다고 표현함. Javascript가 이에 해당하는데, 따라서 Javascipt에서의 함수는 다음과 같은 특징을 가지며 고차함수로 활용할 수 있음

-변수에 할당(assignment) 할 수 있다.
-다른 함수의 전달인자(argument)로 전달될 수 있다.
-다른 함수의 결과로서 리턴될 수 있다.

고차함수

고차 함수(higher order function)란 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수를 뜻함.
이때, 다른 함수(caller)의 전달인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 함.
고차함수의 유형은 크게 (1)다른 함수를 인자로 받는 경우 / (2)함수를 리턴하는 경우 / (3)함수를 인자로 받고, 함수를 리턴하는 경우 => 이렇게 3가지로 나뉨
원본 데이터는 immutable함. 고차함수가 반환한 결과값을 편리하게 이용하고 싶다면 새로운 변수를 선언하여 값을 할당해주는 방법이 있음

내장 고차함수 Filter

// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 
// 단행본 한 권의 출판 연도가 2003인지 확인하는 함수
const isCreatedAt2003 = function (cartoon) {
  const fullYear = new Date(cartoon.createdAt).getFullYear()
  return fullYear === 2003;
}; 
// 출판 연도가 2003년인 책의 모음
const filteredCartoons = cartoons.filter(isCreatedAt2003);

filter 안의 함수에 전달인자로 데이터를 전달했을 때 true를 반환하는 데이터만 분류(filtering)함

내장 고차함수 map

// 만화책 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 
// 만화책 한 권의 부제를 리턴하는 로직(함수)
const findSubtitle = function (cartoon) {
  return cartoon.subtitle;
}; 
// 각 책의 부제 모음 
const subtitles = cartoons.map(findSubtitle); 
// ['어머니의 쌀', ...]

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출 / 다른 요소로 지정(mapping) / 이 결과들을 모아 / 새로운 배열을 반환함

내장 고차함수 reduce

// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
];
// 단행본 한 권의 평점을 누적값에 더한다.
const scoreReducer = function (sum, cartoon) {
  return sum + cartoon.averageScore;
}; 
// 초기값에 0을 주고, 숫자의 형태로 평점을 누적한다.
let initialValue = 0 
// 모든 책의 평점을 누적한 평균을 구한다.
const cartoonsAvgScore = 
cartoons.reduce(scoreReducer, initialValue) / cartoons.length;

배열의 각 요소를 / 특정 방법(함수)에 따라 / 원하는 하나의 형태로 / 응축함 (reduction)
초기값 지정 가능

느낀 점

페어 프로그래밍의 의의를 하나 더 깨닫게 됨. 혼자 있으면... 공부를... 안 한다...!!! 페어로 하면 일단 중간에 에~ 하기 싫어용~ 하면서 침대에 드러눕지는 못하는데 혼자 있으면 그렇게 돼... 오늘 부득이하게 솔로로 페.프 일정을 진행하게 되었는데 어려운 건 둘째 치고 집중이 안 되어서 죽는 줄 알았음. 결국 정규 교육시간(6시) 끝나고 추가 개인 학습 시간에 꾸역꾸역 다 풀었다. 집중력? 완전 나락 갔잖니. ^-^
TIL을 이렇게 쓸 거면 기술 블로깅이랑 다를 게 뭔지 모르겠다. kibun과 ganzi의 차이? 방법적인 부분을 고민해봐야 하는데 그럴 시간이 없네? ^^
그리고 여전히 시간이 너무 부족하고...
와중에 아고라스테이츠 추가기능[0] 구현 성공해서 너무너무 기쁘다. 나 로컬스토리지 기능 구현 성공했다, 짱이지... 이 웹페이지를 봐. 새로고침해도 li가 그대로 유지됨. 대박임. 이건 그냥 아고라 스테이츠 다 끝난 다음에 관련해서 한 번에 쭉 포스팅하는 게 나을지도.
네... 물론 이것도 주말에 다 끝냈으면 좋았겠죠... 허허.