์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ๋ฐฑ์—”๋“œ 1์ผ์ฐจ TIL (ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ์ˆœ์ˆ˜ํ•จ์ˆ˜)

thumbnail

๋ฐฑ์—”๋“œ ์ˆ˜์—… 1์ผ์ฐจ ํ•™์Šต

๋‚˜๋Š” ์ด๋ฒˆ์— ํ”„๋ก ํŠธ๋ž‘ ๊ฐ™์ด ์ˆ˜๊ฐ•์„ ํ–ˆ๋Š”๋ฐ ์ •๋ง ์–ด์ง€๋Ÿฌ์› ๋‹ค.
๋‚œ์ด๋„๊ฐ€ ๋†’์€๊ฒŒ ์•„๋‹ˆ๋ผ ์˜†์—๋Š” ํ”„๋ก ํŠธ ๋„์šฐ๊ณ , ์˜†์—๋Š” ๋ฐฑ์—”๋“œ ๋„์šฐ๋‹ˆ ๋‘ ๊ฐ•์˜ ๋‚ด์šฉ์„ ์ซ’๋Š”๊ฑฐ ์ž์ฒด๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•  ์ •๋„์˜€๋‹ค.

๊ทธ๋ž˜๋„ ๋‹คํ–‰ํžˆ ํ”„๋ก ํŠธ ์ชฝ์€ ์•„์ด์Šค ๋ธŒ๋ ˆ์ดํ‚น์„ ํ•˜๋А๋ผ ์ฃผ์š”ํ•œ ๋‚ด์šฉ์€ ์•ˆ๋‚˜์™”๊ณ , ๋ฐฑ์—”๋“œ ์ชฝ์„ ์•ฝ๊ฐ„ ์ง‘์ค‘ํ•ด์„œ ๋“ค์—ˆ๋‹ค.
์—ฌ๊ธฐ TIL์€ ๋‚ด๊ฐ€ ๋“ค์œผ๋ฉด์„œ ๋ฐฐ์šฐ๊ฑฐ๋‚˜ ํ•™์Šตํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๋Š” ์œ„์ฃผ๋กœ ์˜ฌ๋ฆด ์˜ˆ์ •์ด๋‹ค.

๊ฐœ์ธ ํ•™์Šต ๋‚ด์šฉ์„ ์ •๋ฆฌํ•œ ๊ฒƒ์ด๋ผ ์•ฝ๊ฐ„ ๋ถ€์‹คํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

๊ฐ•์˜ ์ž๋ฃŒ๋Š” ๊ฐ•์‚ฌ๋‹˜์˜ ๊ฒƒ์ด๋ผ ๊ณต์œ ๋Š” ๋ถˆ๊ฐ€๋Šฅํ•˜๊ณ , ํ˜น์‹œ ์ €์ž‘๊ถŒ ์นจํ•ด๋‚˜ ์™ธ๋ถ€ ๋…ธ์ถœ ๋ถˆ๊ฐ€ ์ž๋ฃŒ๊ฐ€ ์žˆ๋‹ค๋ฉด ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๋ฐ”๋กœ ์ˆ˜์ • ๋ฐ˜์˜ ์ฒ˜๋ฆฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.
์˜คํ”ˆ๋œ ๊นƒํ—ˆ๋ธŒ์˜ ๊ฒฝ์šฐ ์›น์—์„œ ๋ˆ„๊ตฌ๋‚˜ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๊ธฐ์— ๊นƒํ—ˆ๋ธŒ๋Š” ๊ณต๊ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค.


2์ผ์ฐจ ๊ฐ•์˜๋Š” ์ด๊ณณ ํฌ์ŠคํŒ… ์ฐธ์กฐ


๊ธˆ์ผ ์ง„ํ–‰ ๋‚ด์šฉ

  • ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ปจ์…‰์— ๋Œ€ํ•˜์—ฌ
  • ๊ฐ์ฒด์ง€ํ–ฅ, ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„
  • ์‹ค์šฉ์ฃผ์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ
  • Live Coding1 : ๊ณ ์ฐจํ•จ์ˆ˜(map, filter, reduce) ๊ตฌํ˜„

ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ค๋ช… ๋ฐ ๊ฐ„๋‹จ ์ด๋ก 

  • ํ•จ์ˆ˜์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๊ณ , ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋Œ€ํ•ด ๊ฐ„๋žตํ•œ ์„ค๋ช…

ํ•จ์ˆ˜์— ๋Œ€ํ•ด

ํ•จ์ˆ˜๋Š” ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์–ธ์ œ๋‚˜ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋‚ด์•ผ ํ•œ๋‹ค.
ํ•จ์ˆ˜ ๋‚ด์—์„œ ์•ก์…˜์œผ๋กœ ์ธํ•ด ์‚ฌ์ด๋“œ ์ดํŒฉํŠธ๊ฐ€ ๋‚˜๋Š” ๊ฒƒ์„ ์ค„์—ฌ์•ผ ํ•œ๋‹ค. (์ข…์ ์€ Side Effect ์ œ๊ฑฐ)


์ˆœ์ˆ˜ ํ•จ์ˆ˜

๋ถ€์ˆ˜ํšจ๊ณผ ์—†์ด ๊ฒฐ๊ณผ๊ฐ’์ด ์ธ์ž์—๋งŒ ์˜์กดํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ˆœ์ˆ˜ํ•จ์ˆ˜๋ผ ํ•œ๋‹ค. ๋ถ€์ˆ˜ํšจ๊ณผ๋Š” ํ•จ์ˆ˜์—์„œ ๊ฒฐ๊ด๊ฐ’์„ ์ฃผ๋Š” ๊ฒƒ ์™ธ์— ํ•˜๋Š” ํ–‰๋™. (Side Effect)


ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์˜ˆ (๋ง›๋ณด๊ธฐ)

//Bad case
const init: number = 0

const add = (number: number) => {
  return number + init
}

add(5)

์œ„ ์ฝ”๋“œ๋Š” ์™ธ๋ถ€์˜ init์ด๋ผ๋Š” ๊ฐ’์— ์˜ํ•ด ํ•จ์ˆ˜ ๋ฐ–์— ์žˆ๋Š” ๊ฐ’์— ์˜ํ•ด ํ•จ์ˆ˜ ๊ฐ’์ด ๊ฒฐ์ •๋˜๊ธฐ์— ์ž˜๋ชป๋œ ์˜ˆ๋ผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
๊ทธ๋Ÿผ ์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ˆœ์ˆ˜ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ๋ฐ”๊พธ๋ ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค.

//Good case
const init: number = 0

const add = (number: number, init: number = 0) => {
  return number + init
}

add(5)

์™ธ๋ถ€์— ์žˆ๋˜ init์ด๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌ์ธ์ž๋กœ ๋ฐ”๊พธ๊ณ , ํ•ด๋‹น ๊ฐ’์„ 0์œผ๋กœ ๊ธฐ๋ณธ ๊ฐ’์„ ์ฃผ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฐ”๊พธ๋ฉด ์ˆœ์ˆ˜ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค.

๋˜ ๋‹ค๋ฅธ ์˜ˆ์ œ๋ฅผ ๋ณด์ž

//Bad Case
const fruits: string[] = ['Apple', 'Orange', 'Blueberry']

const head = (arr: string[]) => {
  return arr.shift()
}

console.log(head(fruits))

์—ฌ๊ธฐ์„œ shift ํ•จ์ˆ˜๋Š” ์ „๋‹ฌ๋œ ๋ฐฐ์—ด์˜ ์ฒซ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๋‚˜๋จธ์ง€๋Š” ์ œ๊ฑฐํ•œ๋‹ค.
์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์ „๋‹ฌ๋œ ๋ฐฐ์—ด์˜ ๊ฒฝ์šฐ ์กฐ์ž‘์ด ์ผ์–ด๋‚˜๊ฒŒ ๋œ๋‹ค.

ํ•จ์ˆ˜๋Š” ์•ก์…˜(๋ฌด์–ธ๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์กฐ์ž‘,์‚ญ์ œ ๋“ฑ์„ ํ•˜๋Š” ํ–‰์œ„)์ด ์ผ์–ด๋‚˜๋Š” ๊ฒƒ์„ ์ค„์ด๊ณ  ์—†์• ์•ผ ํ•œ๋‹ค.
๊ทธ๋Ÿผ ์ด๊ฒƒ์„ ๊ฐœ์„  ํ•œ๋‹ค๋ฉด?

//Good Case
const fruits: string[] = ['Apple', 'Orange', 'Blueberry']

const head = (arr: string[]) => {
  return arr.length < 1 ? undefined : arr[0]
}

console.log(head(fruits))

์œ„์™€ ๊ฐ™์ด ํ•œ๋‹ค๋ฉด ์ „๋‹ฌ๋œ ๋ฐฐ์—ด์„ ์กฐ์ž‘ํ•˜์ง€ ์•Š๊ณ  ์ˆœ์ˆ˜ํ•˜๊ฒŒ ๊ฐ’๋งŒ ๋„˜๊ธฐ๋Š” ํ˜•ํƒœ๋กœ ๊ตฌํ˜„์ด ๋œ๋‹ค.

๋˜ ์˜ˆ์ œ๊ฐ€ ์žˆ๋‹ค.

//Bad Case
const fruits: string[] = ['Apple', 'Orange', 'Blueberry']
fruits[2] = 'Tomato'

์ด๋ ‡๊ฒŒ ๋Œ€์ž…์„ ํ•  ๊ฒฝ์šฐ ์›๋ณธ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚˜๊ฒŒ ๋œ๋‹ค.
ํ•จ์ˆ˜ํ˜• ํŽ˜๋Ÿฌ๋‹ค์ž„์—์„œ๋Š” ์›๋ณธ์„ ๋ณต์‚ฌํ•ด์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

๊ทธ๋ž˜์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ณ ์ฐจํ•จ์ˆ˜์ธ map์„ ์ด์šฉํ•ด ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋งŒ๋“ค์–ด ๋‚ธ๋‹ค.

//Good Case
const fruits: string[] = ['Apple', 'Orange', 'Blueberry']

const newFruits = fruits.map((fruit: string) =>
  fruit === 'Blueberry' ? 'Tomato' : fruit
)

console.log('newFruites = ', newFruits)

๊ฐ์ฒด์ง€ํ–ฅ๊ณผ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

๋‘˜์˜ ๊ฐœ๋… ์ค‘ ์ƒ๋ฐ˜๋˜๋Š” ๊ฐœ๋…์€ ์—†๋‹ค.

๊ฐ์ฒด์ง€ํ–ฅ(OOP)

  • ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ชจ๋“ˆํ™”
  • ๋‹คํ˜•์„ฑ
  • ํ˜„์‹ค ์„ธ๊ณ„๋ฅผ ๋ชจ๋ธ๋ง

ํ•จ์ˆ˜ํ˜• (FP)

  • ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ชจ๋“ˆํ™”
  • ์ธํ’‹๊ณผ ์•„์›ƒํ’‹์—๋งŒ ์˜์กด
  • ์ˆ˜ํ•™์˜ ๊ด€์ ์œผ๋กœ ์‚ฌ๊ณ ํ•˜๊ธฐ

ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„ (ํ‚ค์›Œ๋“œ)

  • No Side Effects

    • Pure Function
    • No Mutation
  • Higher Order Function

    • Function is value


์ž ์‹œ ํœด์‹ ํ›„ Live Coding


Live Coding (๊ณ ์ฐจํ•จ์ˆ˜ ๊ตฌํ˜„)

์ˆ˜์—… ์˜ˆ์ œ Github

๋จผ์ € ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•œ๋‹ค.


์ผ๋ฐ˜์ ์ธ ์˜ˆ์ œ

const arr: number[] = [1, 2, 3, 4, 5]

// 1. ํ™€์ˆ˜๋งŒ ๊ฑธ๋Ÿฌ์ฃผ์„ธ์š”
// 2. ๊ฑธ๋Ÿฌ์ง„ ์›์†Œ์— ๊ณฑํ•˜๊ธฐ 2๋ฅผ ํ•ด์ฃผ์„ธ์š”
// 3. ๋ชจ๋‘ ๋‹ค ๋”ํ•ด์ฃผ์„ธ์š”

let sum = 0
for (const el of arr) {
  if (el % 2 === 1) {
    const newElement = el * 2
    sum += newElement
  }
}

์œ„ ์ฝ”๋“œ๋Š” ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ตฌํ˜„ํ•œ ๊ฒƒ์ด๊ณ , ์•„๋ž˜๋Š” ๊ณ ์ฐจํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ๊ตฌํ˜„ํ•œ ๊ฒƒ์ด๋‹ค.

const sum2 = arr
  .filter(el => el % 2 === 1)
  .map(el => el * 2)
  .reduce((prev, curr) => prev + curr)

๊ณ ์ฐจํ•จ์ˆ˜ Map ๊ตฌํ˜„

์ด์ œ ๊ณ ์ฐจํ•จ์ˆ˜ ์ค‘ map์„ ์ง์ ‘ ๊ตฌํ˜„ํ•œ ์ฝ”๋“œ

/**
 * map: ๋ฐฐ์—ด์„ ์ˆœํšŒํ•˜๋ฉด์„œ func ์„ ์ ์šฉํ•ด์„œ ์ƒˆ๋กœ์šด ๊ฒฐ๊ณผ ๊ฐ’์„ ๋‹ด์€ ๋ฐฐ์—ด์„ ๋ฆฌํ„ดํ•œ๋‹ค.
 * func: (el) => value
 */
const map = (func, iter) => {
  const result = []

  for (const el of iter) {
    result.push(func(el))
  }

  return result
}
console.log(map(el => el * 2, arr))

๊ณ ์ฐจํ•จ์ˆ˜ Filter ๊ตฌํ˜„

/**
 *  filter: ๋ฐฐ์—ด์„ ์ˆœํšŒํ•˜๋ฉด์„œ func ์˜ truthy ๊ฐ’(์กฐ๊ฑด์— ๋งž๋Š” ๊ฐ’)๋งŒ ๋ฐฐ์—ด์— ๋‹ด์•„ ๋ฆฌํ„ดํ•œ๋‹ค.
 *  func: (el) => truthy | falsy
 */
const filter = (func, iter) => {
  const result = []

  for (const el of iter) {
    if (func(el)) {
      result.push(el)
    }
  }

  return result
}

console.log(filter(el => el % 2 === 1, arr))

๊ณ ์ฐจํ•จ์ˆ˜ Reduce ๊ตฌํ˜„

/**
 * reduce: ๋ฐฐ์—ด์„ ์ˆœํšŒ๋ฉด์„œ func ์„ ๋ฐ˜๋ณต ์ ์šฉํ•ด์„œ ์ƒˆ๋กœ์šด ๊ฒฐ๊ณผ ๊ฐ’์„ ์–ป์–ด๋‚ธ๋‹ค. (์ชผ๊ฐœ๋Š” ํ•จ์ˆ˜)
 * func: (acc, el) => acc
 * func: (prev, curr) => acc
 */

const reduce = (func, acc, iter) => {
  if (iter === undefined) {
    iter = acc[Symbol.iterator]()
    acc = iter.next().value
  }

  for (const el of iter) {
    acc = func(acc, el)
  }

  return acc
}

console.log(reduce((prev, curr) => prev + curr, 0, arr))
console.log(reduce((prev, curr) => prev + curr, arr))

Live Coding (ํ•จ์ˆ˜์˜ ์—ฐ๊ฒฐ)

/**
 * ํ•จ์ˆ˜์˜ ํ•ฉ์„ฑ, pipe
 * ์ˆœํšŒ ๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด๋ฅผ ๋ฐ›์•„์„œ ํ•จ์ˆ˜์˜ ํŒŒ์ดํ”„๋ผ์ธ์„ ํƒ€๊ณ  ์ตœ์ข… ๊ฒฐ๊ณผ๊ฐ’์„ ๋ฆฌํ„ดํ•œ๋‹ค.
 */
const pipe = (iter, ...functions) =>
  reduce((prev, func) => func(prev), iter, functions)

const arr = [1, 2, 3, 4, 5]

const sum2 = arr
  .filter(el => el % 2 === 1)
  .map(el => el * 2)
  .reduce((prev, curr) => prev + curr)

console.log(sum2)

pipe(
  arr,
  arr => filter(el => el % 2 === 1, arr),
  arr => map(el => el * 2, arr),
  arr => reduce((prev, curr) => prev + curr, arr),
  result => console.log(result)
)

์šฐ๋ฆฌ๊ฐ€ ๊ตฌํ˜„๋œ ๊ณ ์ฐจํ•จ์ˆ˜๋ฅผ ์“ธ ๋•Œ .์œผ๋กœ ์ฒด์ด๋‹ ํ•˜๋“ฏ์ด ์“ฐ๋Š” ๊ฒƒ์„ ๊ตฌํ˜„


Live Coding (์ปค๋ง๊ณผ ์ง€์—ฐํ•จ์ˆ˜)

๋‚œ ์ปค๋ง์„ ์ž˜ ๋ชฐ๋ผ์„œ ์ด ๋ถ€๋ถ„์€ Javascript.Info ์—์„œ ๋งŽ์ด ์ฐธ๊ณ ํ–ˆ๋‹ค.
์ปค๋ง์€ ์ „๋‹ฌ๋œ ํ•จ์ˆ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ฐ€, ๋‹ค๋ฅธ ํ•จ์ˆ˜๊ฐ€ ์˜ค๋ฉด ๊ฐ™์ด ํ•จ์ˆ˜๋ฅผ ์ฒ˜๋ฆฌ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์˜๋ฏธํ•œ๋‹ค.(ํ‹€๋ฆด ์ˆ˜ ์žˆ์Œ => ํ–ฅํ›„ ํฌ์ŠคํŒ… ์˜ˆ์ •)

const curry = func => (a, ...args) =>
  args.length > 0 ? func(a, ...args) : (...args) => func(a, ...args)

์ปค๋ง์˜ ๊ตฌํ˜„์ฒด๋Š” ์œ„์™€ ๊ฐ™๋‹ค.

์ด๋ฅผ ํ†ตํ•ด ๊ฐ ๊ณ ์ฐจํ•จ์ˆ˜๋ฅผ ์ปค๋ง์œผ๋กœ ๋ฌถ์œผ๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค.
๋‹จ์ˆœํ•˜๊ฒŒ ํ•จ์ˆ˜๋ฅผ ์ปค๋ง ์ „๋‹ฌ์ธ์ž๋กœ ๋„˜๊ธด๋‹ค.

const map = curry((func, iter) => {
  const result = []
  for (const el of iter) {
    result.push(func(el))
  }

  return result
})

const filter = curry((func, iter) => {
  const result = []
  for (const el of iter) {
    if (func(el)) {
      result.push(el)
    }
  }

  return result
})

const reduce = curry((func, acc, iter) => {
  if (iter === undefined) {
    iter = acc[Symbol.iterator]()
    acc = iter.next().value
  }

  for (const el of iter) {
    acc = func(acc, el)
  }

  return acc
})

์ปค๋ง์— ๋Œ€ํ•ด ์ž ๊น ์ง‘๊ณ  ๋„˜์–ด๊ฐ€๋ฉดโ€ฆ ์•„๋ž˜๋Š” ์ปค๋ฆฌ๋ฅผ ์“ฐ์ง€ ์•Š์€ ๋ฒ„์ „

const arr = [1, 2, 3, 4, 5]
const noCurAdd = (a, b) => a + b

console.log(noCurAdd(1, 3))
console.log(noCurAdd(1)) //ํฌ์ธํŠธ 1
console.log(noCurAdd(1)(3)) //์—๋Ÿฌ ํฌ์ธํŠธ

const curAdd = curry((a, b) => a + b)
console.log(curAdd(1, 3))
console.log(curAdd(1)) //ํฌ์ธํŠธ 2
console.log(curAdd(1)(3))

์œ„ ๊ฒฐ๊ณผ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ์—๋Ÿฌ์™€ ํ•จ๊ป˜ ์•„๋ž˜์˜ ๊ฒƒ์„ ๋งž์ดํ•  ๊ฒƒ์ด๋‹ค.

4
NaN
/Users/mhlab/Develop/study/Wanted/PreOnboard_Back/lecture/wanted-pre-onboarding-challenge-BE-task-JAN.2023/lecture-1/3.js:53
console.log(noCurAdd(1)(3)); //์—๋Ÿฌ ํฌ์ธํŠธ
                       ^

TypeError: noCurAdd(...) is not a function
    at Object.<anonymous> (/Users/mhlab/Develop/study/Wanted/PreOnboard_Back/lecture/wanted-pre-onboarding-challenge-BE-task-JAN.2023/lecture-1/3.js:53:24)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:22:47

๋ณด๋ฉด ์•Œ๊ฒ ์ง€๋งŒ ์ปค๋ฆฌ ๋ฏธ์‚ฌ์šฉ์˜ ๋‘ ๋ฒˆ์งธ ํฌ์ธํŠธ1 ์˜์—ญ์˜ ๊ฒฝ์šฐ NaN์ด ๋œฐ ๊ฒƒ์ด๋‹ค.
๋‹น์—ฐํ•œ ๊ฒƒ์ด ํ•จ์ˆ˜๊ฐ€ ๋‹ค์Œ ์ „๋‹ฌ์ธ์ž๊ฐ€ ์—†์ด ๋„˜์–ด ์™”๊ธฐ์— ์ˆซ์ž๊ฐ€ ์•„๋‹˜์„ ํ‘œ์‹œํ•˜๋Š” NaN์ด ๋œจ๋Š” ๊ฒƒ์ด๊ณ , ์—๋Ÿฌ๊ฐ€ ๋‚œ๋‹ค.

์•„๋งˆ ์ € ์ฃผ์„์˜ ์—๋Ÿฌ ํฌ์ธํŠธ์—์„œ ์—๋Ÿฌ๊ฐ€ ๋‚  ๊ฒƒ์ด๋‹ค. ์ด๊ฑด ๋‹น์—ฐํ•œ๊ฒŒ ์ „๋‹ฌ์ธ์ž๋ฅผ ๋ฐ›๋Š” ๋ถ€๋ถ„์—์„œ noCurAddํ•จ์ˆ˜์˜ ์ „๋‹ฌ์ธ์ž๋ฅผ ๋ฒ—์–ด๋‚˜ ๋˜ ๋‹ค๋ฅธ ๊ฐ’์ด ์™”๋‹ค.

๊ทธ๋Ÿฌ๋ฉด ์™œ ์ปค๋ง์„ ์ ์šฉํ•œ ๊ฒƒ์€ ๋˜๋Š”๊ฐ€?
์ปค๋ง์˜ ๊ตฌํ˜„์ฒด๋ฅผ ๋ณด๋ฉด ์•Œ ์ˆ˜ ์žˆ๋‹ค.

์ปค๋ง์˜ ๊ตฌํ˜„์ฒด์—์„œ ๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋˜์–ด ์žˆ๋‹ค.

func => (a, โ€ฆargs) =>

์ฆ‰ ์ „๋‹ฌ์ธ์ž๊ฐ€ ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž(Spread Operator)๋ฅผ ํ†ตํ•ด ์—ฌ๋ ค ์ธ์ž๋ฅผ ๋ฐ›๊ธฐ์— ๋’ค์— ์žˆ๋Š” ๊ฐ’๋„ ๊ฐ™์€ ์ „๋‹ฌ์ธ์ž๋ผ ํŒ๋‹จํ•œ ๊ฒƒ์ด๋‹ค.

ํ•˜์ง€๋งŒ ํฌ์ธํŠธ2์˜ ๊ฒฝ์šฐ ์ธ์ž๊ฐ€ ํ•˜๋‚˜๊ธฐ์— ์•„๋ž˜์™€ ๊ฐ™์ด ํ•จ์ˆ˜๋กœ ํ‘œํ˜„๋˜์–ด ๋‚˜ํƒ€๋‚˜์ง„๋‹ค.

4
[Function (anonymous)]
4

๊ทธ ์™ธ ์ฒซ๋ฒˆ์งธ๋Š” ๋ฐ”๋กœ ์•Œ ์ˆ˜ ์žˆ๊ณ , ๋งˆ์ง€๋ง‰์€ ๊ทธ๋ƒฅ ์ „๋‹ฌ์ธ์ž๋ผ ๋ณด๋ฉด ๋œ๋‹ค.

console.log(curAdd(1)(3)(5))

์œ„ ์ฝ”๋“œ๋Š” ๋‹น์—ฐํžˆ ์—๋Ÿฌ๊ฐ€ ๋‚œ๋‹ค.
์™œ๋ƒํ•˜๋ฉด ์ปค๋ฆฌ ์•ˆ์— ์žˆ๋Š” ํ•จ์ˆ˜์˜ ์ธ์ž๋ฅผ ๋ฒ—์–ด๋‚ฌ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๊ทธ ์™ธ์—๋Š” ์ด๊ฒƒ์„ ์‘์šฉํ•œ ๊ฒƒ์„ ์†Œ๊ฐœํ•˜๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค.
์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ํ•ด๋‹น ๋‚ด์šฉ์„ ๋”ฐ๋กœ ์ถ”๊ฐ€ํ•˜์ง„ ์•Š๊ฒ ์ง€๋งŒโ€ฆ
์‹œ๊ฐ„์ด ๋˜๋ฉด ์—…๋ฐ์ดํŠธ ํฌ์ŠคํŒ…์„ ํ•  ์˜ˆ์ •์ด๋‹ค.


1์ผ์ฐจ ํ›„๊ธฐ

์Œโ€ฆ๊ฐœ์ธ์ ์œผ๋กœ ํ˜„์—…์„ ๋‚ด๋ ค๋†“์€์ง€ ์•ฝ 2๋…„? 3๋…„ ์ •๋„ ๋œ๊ฑฐ ๊ฐ™์€๋ฐ ๋‹ค์‹œ ํ•œ๋ฒˆ ์›Œ๋ฐ์—…? ํ•˜๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค.
๋‚ด๊ฐ€ ์ตœ๊ทผ์— ๋งŒ๋“ , ๊ทธ๋ฆฌ๊ณ  ๋งŒ๋“ค๊ณ  ์žˆ๋Š” ์„œ๋น„์Šค ์ฝ”๋“œ๋„ ์ง„์งœ ์—‰๋ง์ธ๋ฐโ€ฆ

์ด๋ฒˆ์— ํ•จ์ˆ˜ํ˜•์„ ๋ฐฐ์›Œ์„œ ์ข€ ๊ฐœ์„ ํ•ด ๋‚˜๊ฐ€๋ณด๊ณ  ์‹ถ๋‹ค.
์ฝ”๋“œ์Šคํ…Œ์ด์ธ  ๋ธ”๋ก์ฒด์ธ + ์˜จ๋ณด๋”ฉ ๋ฐฑ์—”๋“œ + ์˜จ๋ณด๋”ฉ ํ”„๋ก ํŠธ์—”๋“œ = ๊ณ ํ†ต์˜ ์‚ผ์œ„์ผ์ฒด

์ข€ ๋นก์„ผ๋ฐโ€ฆํ•ด๋ณด์ž.
ํž˜๋“ค์–ด์•ผ ์„ฑ์žฅํ•˜๋”๋ผ(?)


2์ผ์ฐจ ๊ฐ•์˜๋Š” ์ด๊ณณ ํฌ์ŠคํŒ… ์ฐธ์กฐ


์ฐธ๊ณ  ์ž๋ฃŒ


Written by@MHLab
Lamborghini Huracan STO / Ferrari 488 Pista
Hardcore life
๐Ÿ‘‡๋กœ๋˜ ์ปค๋ฎค๋‹ˆํ‹ฐ

๐ŸŽฒ ํ‘์šฐ์ง‘ํ•ฉ์†Œ| ย ๐Ÿ‘ป ์ผ์ƒ ๋ธ”๋กœ๊ทธ| ย ๐Ÿ“ธ Instagram| ย ๐Ÿ’ป GitHub