每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day12

tags: ItIron2021 Javascript

前言

昨天我们快速带过闭包的概念，俗话说打铁要趁热，不吃饭会肚子饿(?) 马上来道题目练习吧!

本日题目与解释

请你写一个mul函数，这个函数会有以下的输出结果

console.log(mul(2)(3)(4)) // 24
console.log(mul(4)(3)(4)) // 48

防雷图又来罗! 有朋友居然跟我说这才是每天文章的亮点?

题目不算困难，主要是要先经过一些拆解，我们知道在变数後加上()是呼叫函数的办法，那也就表示

mul       => 这玩意是个函数(废话)
mul(2)    => 这玩意也是个函数
mul(2)(3) => 这玩意还是个函数 

也就是说，你传入第1个 & 第2个参数时都会回传一个函数，这不就是昨天提到的function return function吗? 而每次你都能传入一个参数，这麽一想结构就简单多罗!
先从第一步开始吧，写一个mul函数并接受一个参数，且我们知道它会回传另一个接受一个参数的函数

function mul(x) {
  return function (y) {
    
  }
}

看到这边我想你知道接下来要怎麽接了，没错，就是再串一层就好! 只是记得最後就不是再回传一个函数，而是回传最终相乘的结果罗!

function mul(x) {
  return function (y) {
    return function (z) {
      return x * y * z
    }
  }
}

console.log(mul(2)(3)(4)) // 24
console.log(mul(4)(3)(4)) // 48

也许你能轻易写出这个函数，但你有意识到关键吗? 函数一旦执行後就会从main stack中跳出，里面的变数自然也不存在了，为什麽内层的函数仍有x & y的值呢? 没错，这样内部函数存取外部环境的值就是非常典型的闭包! 藉由闭包的特性我们才能达成这样的函数(顺带一提，mul(x)(y)(z)这样的玩意其实有个专有名词currying，有兴趣可以自己去探究，没什麽特别的)

如果是面试碰到这样的题目，写出上方的写法基本上就没问题了，但确实可以透过箭头函数让它变得更精简一些，若以下看不懂...那就等将近Day20讲到箭头函数的时候吧:D

const mul = x => y => z => x * y * z

console.log(mul(2)(3)(4)) // 24
console.log(mul(4)(3)(4)) // 48

本日核心观念与总结

核心观念

闭包(closure)、currying

总结

• 了解currying背後其实是透过闭包的概念达成

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!