iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

邁向 JavaScript 核心之路 系列 第 8

[Day 8] JavaScript 語法特性 - Currying

  • 分享至 

  • xImage
  •  

嗨,大家對於昨天的閉包介紹有沒有基礎的概念了呢?
今天要介紹的 Currying 就是閉包的應用,那什麼是 Currying 呢?

Currying 是指 將一個接受多個參數的函式,變成多個只接受一個參數的函式。 這樣的過程。

說了這麼多,以下就讓我們用一些情境來幫助大家理解吧!

    // 計算立方體
    
    function cube(height, width, depth) {
        return height * width * depth;
    }
    
    console.log(cube(3, 2, 1)); // 6
    console.log(cube(3, 2, 2)); // 12
    console.log(cube(3, 2, 3)); // 18
    console.log(cube(3, 2, 4)); // 24
    console.log(cube(3, 2, 5)); // 30

以上是一個計算立方體用的函式,聰明的大家應該有發現,長和寬兩項參數都是固定的,只有高度這項參數再變動,現在我們要簡化函式中參數的處理,使其一次處理一個參數,藉此來提高程式的彈性與可讀性。

那我們應該怎麼做呢?

    // 將參數利用閉包保存
    
    function cube(height) {
        return function(width) {
            return function(depth) {
                return height * width * depth;
            }
        }
    }
    
    console.log(cube(3)(2)(1)); // 6
    
    var square = cube(3);
    var volume = square(2);
    
    console.log(volume(1)); // 6
    console.log(volume(2)); // 12
    console.log(volume(3)); // 18
    console.log(volume(4)); // 24
    console.log(volume(5)); // 30
    

以上這段程式碼充分展現了 Currying 的優點,利用閉包的特性,將參數傳入下一個函式中當作回傳值,把程式碼拆解成更細的片段,這樣有助於重複利用。

現在就讓我們來統整一下 Currying 的優點

  • 簡化了參數的處理,一次處理一個參數,來提高彈性與可讀性。
  • 藉由將程式碼轉為更細的片段來提高其重複利用性。

其實這次再參加鐵人賽時,對於自己有兩項要求:

  1. 一次只介紹一個概念。
  2. 閱讀時間盡量保持在十五分鐘內。

會有這兩項要求是因為我希望能讓各位讀者能在通勤、吃飯、甚至是上廁所時,以一個輕鬆、較沒有負擔的來去理解這些 JS 的觀念,並藉由簡單的範例程式碼來聯想到日常工作中,哪些情境會使用到這些觀念,如果讀者們有什麼建議或想法,也歡迎在下方留言與我分享、交流喔!

參考資料:
Tommy - 深入 JavaScript 核心課程
Summer。桑莫。夏天 - Currying in JavaScript(柯里化)


上一篇
[Day 7] JavaScript 語法特性 - 閉包 ( Closure )
下一篇
[Day 9] JavaScript 語法特性 - Hoisting
系列文
邁向 JavaScript 核心之路 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言