TIL - 21.07.07 πŸ‘¨β€πŸ’» - High order Function

planethoonΒ·2021λ…„ 7μ›” 7일
0

TIL

λͺ©λ‘ 보기
23/59
post-thumbnail

TIL - 21.07.07 πŸ‘¨β€πŸ’»

κ³ μ°¨ν•¨μˆ˜

일급객체

μΌκΈ‰κ°μ²΄λŠ” 생성, λŒ€μž…, μ—°μ‚°, 인자 λ˜λŠ” λ°˜ν™˜ κ°’μœΌλ‘œμ„œμ˜ 전달 λ“± ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ˜ 기본적 μ‘°μž‘μ„ μ œν•œμ—†μ΄ μ‚¬μš©ν•  수 μžˆλŠ” λŒ€μƒμ΄λ©° λŒ€ν‘œμ μœΌλ‘œ ν•¨μˆ˜κ°€ μžˆλ‹€.

  • 일급 객체의 νŠΉμ§•
    1. λ³€μˆ˜λ‚˜ 자료ꡬ쑰(μ°Έμ‘° μžλ£Œν˜•)에 μ €μž₯κ°€λŠ₯ν•˜λ‹€. 즉, λ³€μˆ˜μ— ν• λ‹Ή κ°€λŠ₯ν•˜λ‹€.
    2. ν•¨μˆ˜μ˜ 맀개 λ³€μˆ˜μ— 전달 κ°€λŠ₯ν•˜λ‹€. λ‹€λ₯Έ λ§λ‘œλŠ”, λ‹€λ₯Έ ν•¨μˆ˜μ˜ 인자둜 전달 ν•  수 μžˆλ‹€.
    3. λ°˜ν™˜ κ°’μœΌλ‘œ μ‚¬μš© κ°€λŠ₯ν•˜λ‹€.

λ³€μˆ˜μ— ν• λ‹Ή ν•  수 μžˆκΈ°μ— ν•¨μˆ˜λ₯Ό λ°°μ—΄μ˜ μš”μ†Œλ‚˜ 객체의 속성 κ°’μœΌλ‘œ μ €μž₯ν•  수 μžˆλ‹€.
이 λ§μΈμ¦‰μŠ¨, ν•¨μˆ˜λ₯Ό μžλ£Œν˜• 닀루듯 λ‹€λ£° 수 μžˆλ‹€λŠ” μ˜λ―Έμ΄λ‹€.
μ΄λŠ” ν•¨μˆ˜ ν‘œν˜„μ‹μ—μ„œ 보닀 μ§κ΄€μ μœΌλ‘œ 확인 ν•  수 μžˆλ‹€.


κ³ μ°¨ν•¨μˆ˜( Higher order Function )

ν•¨μˆ˜λ₯Ό 인자둜 받을 수 있고 ν•¨μˆ˜ ν˜•νƒœλ‘œ λ°˜ν™˜ ν•  수 μžˆλŠ” ν•¨μˆ˜μ΄λ‹€.
이 λ•Œ μ–΄λ–€ ν•¨μˆ˜(caller)에 인자둜 μ „λ‹¬λ˜λŠ” ν•¨μˆ˜λ₯Ό callback ν•¨μˆ˜λΌκ³  ν•œλ‹€.
(μ—¬κΈ°μ„œ μ½œλ°±μ€ μ–΄λ–€ μž‘μ—…μ΄ λλ‚¬μ„λ•Œ ν˜ΈμΆœν•˜λŠ” κ²½μš°κ°€ λ§Žμ•„μ„œ 콜백이라 이름 λΆ™ν˜€μ‘Œλ‹€.)

이 κ³ μ°¨ν•¨μˆ˜μ—μ„œ ν•¨μˆ˜λ₯Ό λ¦¬ν„΄ν•˜λŠ” ν•¨μˆ˜λ“€μ„ Currying Function이라고 ν•œλ‹€.


ν΄λ‘œμ € ν•¨μˆ˜ vs 컀링 ν•¨μˆ˜

ν΄λ‘œμ € ν•¨μˆ˜λŠ” μ–΄νœ˜μ  ν™˜κ²½μ„ κΈ°μ–΅ν•΄ μ „μ—­μ—μ„œ μ ‘κ·Όν•˜μ§€ λͺ»ν•˜λŠ”, ν•¨μˆ˜ μ•ˆμ˜ λ³€μˆ˜μ— μ ‘κ·Όν•  수 μžˆλŠ” ν•¨μˆ˜ μ•ˆμ˜ ν•¨μˆ˜λ₯Ό λœ»ν•œλ‹€.

컀링(Currying) 같은 κ²½μš°λŠ” func(a,b,c)와 같이 인자 μ—¬λŸ¬ 개λ₯Ό λ°›λŠ” ν•˜λ‚˜μ˜ ν•¨μˆ˜λ₯Ό func(a)(b)(c)와 같이 인자λ₯Ό ν•˜λ‚˜μ”© λ°›λŠ” μ—¬λŸ¬κ°œμ˜ ν•¨μˆ˜λ‘œ λ§Œλ“œλŠ” 기술이고 이와 같은 ν•¨μˆ˜λ₯Ό 컀링 ν•¨μˆ˜λΌκ³  ν•œλ‹€.

이 컀링 ν•¨μˆ˜λ₯Ό μ“°λŠ” μ΄μœ κ°€ ν΄λ‘œμ € ν•¨μˆ˜μ²˜λŸΌ μ“°κΈ° μœ„ν•¨μΈλ°, func(a,b,c)μ—μ„œ 인자a만 κ³ μ •ν•˜κ³  λ‚˜λ¨Έμ§€ 두 ν•¨μˆ˜μ˜ 인자만 λ³€μˆ˜λ‘œ 두고 μ‹Άμ„λ•Œ, let funcA = func(a)처럼 μ™ΈλΆ€ ν•¨μˆ˜λ₯Ό λ³€μˆ˜μ— ν• λ‹Ήν•΄μ„œ 인자λ₯Ό κ³ μ •ν•˜κ³  이 뒀에 인자λ₯Ό κ·ΈλŒ€λ‘œ λΆ™ν˜€μ„œ(funcA(b)(c))μ‚¬μš©ν•  수 μžˆλ‹€.


κ³ μ°¨ν•¨μˆ˜μ˜ λ‚΄μž₯ λ©”μ†Œλ“œ

ν›„μˆ ν•  filter, map, reduce λ©”μ†Œλ“œλ“€μ΄ κ³ μ°¨ν•¨μˆ˜μΈ μ΄μœ λŠ” 인자λ₯Ό κ±ΈλŸ¬λ‚΄κΈ° μœ„ν•œ 쑰건을 λͺ…μ‹œν•œ ν•¨μˆ˜λ‘œ λ°›κΈ° λ•Œλ¬Έμ΄λ‹€.

사싀 이건 이전에 λ°°μ—΄ λ©”μ†Œλ“œ μ •λ¦¬ν•˜λ©΄μ„œ 이것듀이 κ³ μ°¨ν•¨μˆ˜μΈμ§€ λͺ¨λ₯΄κ³  μ •λ¦¬ν–ˆλ˜ 적이 μžˆλ‹€.
κ·Έλž˜λ„ 그땐 겉ν•₯기도 μ•„λ‹ˆκ³  κ·Έλƒ₯ ν•œλ²ˆ μ“± λ³΄λŠ” μˆ˜μ€€μœΌλ‘œ μ •λ¦¬ν–ˆλ˜κ±°λΌ λ‹€μ‹œ ν•œλ²ˆ μ •λ¦¬ν•˜κ² λ‹€.


filter λ©”μ†Œλ“œ

filterλ©”μ†Œλ“œλŠ” 인자의 쑰건을 λ§Œμ‘±ν•˜λŠ” μš”μ†Œλ₯Ό κ±ΈλŸ¬λ‚΄ μƒˆ 배열을 λ°˜ν™˜ν•˜λŠ” λ©”μ†Œλ“œμ΄λ‹€.

filter λ©”μ†Œλ“œμ˜ ν”„λ‘œμ„ΈμŠ€λŠ”

  1. λ°°μ—΄μ˜ μš”μ†Œλ₯Ό 인자의 μ½œλ°±ν•¨μˆ˜μ— 전달

  2. 콜백 ν•¨μˆ˜λŠ” μš”μ†Œλ₯Ό νŒλ‹¨ν•΄ λΆˆλ¦¬μ–Έ νƒ€μž…μœΌλ‘œ λ°˜ν™˜

  3. λ°˜ν™˜ 값이 참이면 ν•΄λ‹Ή μš”μ†Œλ₯Ό μƒˆλ‘œμš΄ 배열에 μΆ”κ°€, 거짓이면 κ±΄λ„ˆλ›΄λ‹€.

  4. 이 과정을 각 μš”μ†Œλ§ˆλ‹€ μ μš©μ‹œν‚€κ³  μš”μ†Œλ₯Ό μΆ”κ°€ν•œ μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ν•œλ‹€.

    μ½œλ°±ν•¨μˆ˜λŠ” truthy κ°’μ΄λ‚˜ falsy 값을 λ°˜ν™˜ν•˜κΈ°λ§Œ ν•˜λ©΄ λ˜μ§€λ§Œ 쑰건을 μ’€ 더 λͺ…ν™•νžˆ ν•΄μ„œ ν™•μ‹€ν•˜κ²Œ true λ˜λŠ” false 둜 λ°˜ν™˜ν•˜κ²Œ ν•¨μˆ˜λ₯Ό μ§œλŠ” 것이 μ’‹λ‹€.

const arr = [
  {name: 'sunghoon', job: 'dev',},
  {name: 'sangsu', job: 'postgrad'},
  {name: 'sungsu', job: 'dev',},

let findDev = arr.filter(item => item.job === 'dev')
console.log(findDev) 
// [ {name: 'sunghoon', job: 'dev',}, {name: 'sungsu', job: 'dev',} ]

μ˜ˆμ œλŠ” μž¬νƒ•


map λ©”μ†Œλ“œ

mapλ©”μ†Œλ“œλŠ” λͺ¨λ“  μš”μ†Œλ₯Ό μΈμžμ— μ μš©μ‹œμΌœ λ°˜ν™˜λœ κ°’μœΌλ‘œ ν•˜λŠ” μƒˆ 배열을 λ°˜ν™˜ν•˜λŠ” λ©”μ†Œλ“œμ΄λ‹€.

mapλ©”μ†Œλ“œμ˜ ν”„λ‘œμ„ΈμŠ€λŠ”

  1. λ°°μ—΄μ˜ μš”μ†Œλ₯Ό 인자의 μ½œλ°±ν•¨μˆ˜μ— 전달
  2. μ½œλ°±ν•¨μˆ˜μ— λ°°μ—΄μ˜ μš”μ†Œλ₯Ό λŒ€μž…ν•΄μ„œ λ°˜ν™˜λ˜λŠ” 값을 μƒˆλ‘œμš΄ 배열에 μΆ”κ°€.
  3. 이 과정을 각 μš”μ†Œλ§ˆλ‹€ 거치고 μš”μ†Œλ₯Ό μΆ”κ°€ν•œ μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ν•œλ‹€.
const arr = [1, 2, 3];
let double = arr.map(item => item * 2);

console.log(double); // [2, 4, 6]

reduce λ©”μ†Œλ“œ

reduceλ©”μ†Œλ“œλŠ” λͺ¨λ“  μš”μ†Œλ₯Ό νŠΉμ • 방법에 따라 λˆ„μ  값에 λˆ„μ μ‹œν‚€κ³  λˆ„μ  값을 λ°˜ν™˜ν•˜λŠ” λ©”μ†Œλ“œμ΄λ‹€.
쑰금 μ‰½κ²Œ 생각해보면 reduce λ©”μ†Œλ“œλŠ” λˆ„μ  값을 μ—…λ°μ΄νŠΈν•˜κ³  λˆ„μ  값을 λ¦¬ν„΄ν•˜λŠ” λ©”μ†Œλ“œμ΄λ‹€.

reduceλ©”μ†Œλ“œμ˜ ν”„λ‘œμ„ΈμŠ€λŠ”

  1. λ°°μ—΄μ˜ μš”μ†Œλ₯Ό 인자의 μ½œλ°±ν•¨μˆ˜μ— 전달.
  2. 콜백 ν•¨μˆ˜μ˜ 인자둜 ν•¨μˆ˜λ₯Ό μ‹€ν–‰μ‹œμΌœ λ°˜ν™˜λœ 값을 λˆ„μ κ°’μ— ν• λ‹Ή(μ—…λ°μ΄νŠΈ)
  3. 이 과정을 각 μš”μ†Œλ§ˆλ‹€ 거친 ν›„ λˆ„μ  값을 λ°˜ν™˜ν•œλ‹€.

reduce λ©”μ†Œλ“œλŠ” μ„Έλ²ˆμ§Έλ‘œ 인자λ₯Ό 지정할 수 μžˆλŠ”λ° μˆ«μžμ—΄λ„ 넣을 수 있고 λ¬Έμžμ—΄λ„ 넣을 수 있으며 객체, 배열도 넣을 수 μžˆλ‹€.

let arr = [1, 2, 3];

let sumArr = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sumArr); // 6;

GOOD πŸ˜‰

κ³ μ°¨ν•¨μˆ˜ λ©”μ†Œλ“œλ“€μ„ μ΅ν˜”λ‹€.
μ½”ν”Œλ¦Ώ ν’€λ©° μˆ™λ ¨μ‹œν‚€λŠ” 쀑 인데 μΉœν•΄μ§ˆ 수 μžˆμ„ 것 κ°™λ‹€.
였늘 같이 νŽ˜μ–΄ ν”„λ‘œκ·Έλž˜λ°ν–ˆλ˜ νŽ˜μ–΄λ‹˜μ΄λž‘ μ—­λŒ€κΈ‰μœΌλ‘œ 재밌게 ν–ˆλ‹€ κ·Έλž˜λ΄μ•Ό 9번째

BAD πŸ˜₯

TO DO πŸ”₯

  • 곡포의 React
  • node.js

Retrospect 🧐

사싀 κ³ μ°¨ν•¨μˆ˜ μ˜ˆμŠ΅ν•  μ‹œκ°„λ„ 쑰금 λΆ€μ‘±ν–ˆκ³  μ•…λͺ…이 많이 λ“€λ €μ™€μ„œ 많이 μ«„μ•˜λŠ”λ°, λ„ˆλ¬΄ μ«„μ•„μ„œ κ·ΈλŸ°κ°€ 생각보닀 ν• λ§Œν–ˆλ‹€ πŸ˜…

쑰금 더 μΉœν•΄μ§ˆ 수 μžˆμ„ 것 같은데 였늘 이거 μ •λ¦¬ν•˜κ³  λ‚˜μ„œ κ³ μ°¨ν•¨μˆ˜λž‘ μ’€ 더 μΉœν•΄μ§€κΈ° λ³΄λ‹€λŠ” μš°μ„  λ¦¬μ•‘νŠΈλž‘ μΈμ‚¬ν•˜κ³  주말에 μΉœν•΄μ§€λŠ” μ‹œκ°„μ„ 가져봐야겠닀.

Reference πŸ™‡

https://poiemaweb.com/
https://developer.mozilla.org/

profile
Web 2.0κ³Ό 3.0 사이 κ·Έ μ–΄λ”˜κ°€

0개의 λŒ“κΈ€