Placeholder Image

字幕列表 影片播放

  • [Applause]

    [掌聲]

  • Hi!

    你好!

  • First of all,

    首先

  • I just want to give a big shout-out to the organizers of this conference.

    我只想向這次會議的主辦單位表达致意

  • I feel like this has been a fantastic smooth experience from start to finish,

    我覺得從開始到尾, 這都是非常棒的體驗

  • so...

    所以

  • [Applause]

    [掌聲]

  • Amazing job.

    真棒

  • Hi! I'm Anjana Vakil.

    大家好!我是Anjana Vakil

  • I am an English teacher turned computational linguist

    我是一名英語老師 後成為計算語言學家

  • turned software developer

    然後再轉為軟件開發人員

  • and as I mentioned a little bit earlier today,

    正如我剛才提到的

  • about six months ago, I knew nothing about functional programming

    大約六個月前, 我對函式編程一無所知

  • and very little about JavaScript.

    只略知小許JavaScript

  • So, what I want to do today is kind of

    今天想做的

  • take you guys along on some of the things I've learned

    帶你們走一遍 看看我學過的東西

  • about doing functional programming in JavaScript

    關於使用JavaScript進行函式編程

  • and I am not an expert in any of this,

    我不是這方面的專家

  • so this is going to be me taking you along on my learning journey

    所以這將是我帶你們 一起走過我的學習旅程

  • and nothing more.

    僅此而已

  • I'm going to try and save a little time for questions at the end,

    到最後,我會盡量擠出一些時間 來回答一些問題

  • but we'll see how that turns out.

    看看等下如何吧

  • So, how did I end up standing here

    那 我為什麼會站在這

  • talking to you guys about functional programming in JavaScript?

    與你們分享有關JavaScript函式編程?

  • About six months ago in the fall of 2015,

    大約六個月前, 在2015年秋季

  • I went to a programming community in New York City

    我去找了紐約的一個編程團體

  • called The Recurse Center

    叫做 The Recurse Centre

  • which quick plug

    它的快宣傳會

  • is probably the best programming community I've ever experienced

    應該是我參加最棒的一個編程團體經驗

  • and it's a programming retreat

    是個編程退修會

  • where you can go and learn about

    你可以去那裡學習

  • whatever is interesting to you in the world of computer science

    在計算機科學界對你來說有趣的事

  • and so I got there

    所以我到了那裡

  • and a lot of people were talking about functional programming,

    很多人在談論函式編程

  • functional programming, Haskell, Clojure, all this cool stuff,

    函式編程,Haskell、Clojure, 所有這些很棒的東西

  • a lot of people were working in JavaScript getting into node

    很多正在使用JavaScript的人開始進入節點

  • and these were some really interesting topics

    這些都是一些非常有趣的話題

  • and so I started talking to people there

    所以我開始和那裡的人聊了起來

  • and finding out what is all this stuff.

    想知道這些東西是什麼

  • So, what is functional programming?

    那函式編程是什麼?

  • Few different ways that question can be answered.

    這個問題可以用幾種不同的方式回答

  • First of all, it's a programming paradigm.

    首先,這是一個編程範例

  • Some other paradigms are like imperative programming

    其他範例包括命令式編程

  • where you say do this and then do that

    像是一直說 做這個 然後做那個

  • or object-oriented programming

    或面向對象的編程

  • which maybe a lot of you write object-oriented JavaScript

    也許你們當中很多人 編寫了面向對象的JavaScript

  • where you have objects and they have methods on them

    你有對象, 而它們上有方式

  • and you change them, etc., etc.

    然後你更改它們 等等

  • Functional programming is also a paradigm

    函式編程也是一種範式

  • where functions are king

    函式為王

  • and we'll talk about what that means in a little bit.

    我們稍後會討論 這意味著什麼

  • It's also a style of coding,

    這也是一種編碼風格

  • of organizing your code,

    組織代碼

  • writing your code,

    編寫代碼

  • style of approaching projects

    接近項目的風格

  • and really more than that it's kind of a mindset you can get into,

    不僅限於此, 是個可進入的一種心態

  • a way of thinking about a problem,

    一種思考問題的方式

  • a way of approaching a task

    一種接近任務的方式

  • and it's also a really sexy trend

    這也是一個非常有趣的趨勢

  • with lots of buzzwords that'll make you super popular

    有很多流行詞

  • when you're talking with people at the pre-conference party or whatever it is.

    當會前聚會時與人交談或其他場合 會讓你超受歡迎

  • No, just kidding.

    我開玩笑的

  • But it is something that's gotten a lot of attention

    但這引起了很多關注

  • and, so yeah, I thought it was important

    所以我認為這是很重要的一點

  • to find out why everybody was so excited about it.

    去找出每個人都對此 感到如此興奮的原因

  • So, why do functional programming in JavaScript specifically?

    為什麼要專門使用JavaScript進行函式編程呢?

  • Well, I don't know about for all of you,

    我不知道你們是否有相似經驗

  • perhaps more experienced JavaScript developers,

    也許對更有經驗的JavaScript開發人員

  • but when I started learning JavaScript

    但我開始學JavaScript時

  • having had some object-oriented programming experience with Java, C-Sharp,

    有些面向對象編程經驗在Java,C-Sharp

  • that kind of thing,

    那些東西

  • I found object-oriented JavaScript super confusing,

    我發現面向對象的JavaScript 非常令人困惑

  • prototypal inheritance, how does that work?

    原型繼承, 如何運作?

  • How many of you guys, quick show of hands,

    你們當中幾個人, 舉舉手來看

  • have ever run into a bug or a problem or something unexpected with this,

    誰曾經遇到過錯誤, 問題或意外情況

  • doing something...

    做某事...

  • Yeah, exactly. Right?

    是咯,對吧?

  • So, I found that really tricky and confusing

    我發現那確實很棘手和令人困惑

  • and so I thought, all right, I know I want to get more into JavaScript

    所以我想,好吧, 我知道我想進一步了解JavaScript

  • but let me set aside the object orientation

    但讓我放開對象方向

  • and try to think about things in a functional way

    嘗試用函式去思考問題

  • which is maybe simpler in some ways

    在某些方面可能更簡單

  • and avoid some of these problems

    而避免其中一些問題

  • like bugs introduced by binding this to the wrong thing.

    因為把這與錯的東西綁定 而造成了錯誤

  • So, functional JavaScript to me at least is a bit safer,

    因此至少對我而言 函式JavaScript更安全一些

  • a bit less tricky,

    沒那麼棘手

  • a bit easier to debug

    比較容易調試

  • but easier to maintain as you're building a project

    但在構建項目時 更易於維持

  • and we'll take a look at some of the features

    我們稍後會看一些功能

  • that make that easier in a bit.

    會變得容易

  • Also, there is already a huge community of developers

    而且,已經有一個龐大的開發者團體

  • who are doing JavaScript in a functional style,

    他們以函式風格編寫JavaScript

  • so there's a lot of libraries out there

    外面很多程序庫

  • to help you write functional JavaScript.

    幫助你編寫函式JavaScript

  • There's a lot of people out there that are experts in this,

    有很多人是專家

  • for example, there was a talk in the next room over earlier today on Ramda

    例如,在隔壁庭有個 關於Ramda的演講

  • and there are people here you can talk to

    這裡也有人可以與你交談

  • that probably know a lot more about functional JavaScript than I do,

    而他們可能會比我 更加了解函式JavaScript

  • but the point is there's already a community,

    但關鍵是已經有一個團體

  • so this isn't necessarily something you'd be doing on your own,

    所以這不一定需要你憑一己之力完成的事

  • grappling you versus JavaScript,

    與JavaScript搏鬥

  • there's other people to support you,

    還有其他人支持你

  • which I found really helpful.

    而我發現這真的很有幫助

  • Okay.

    好的

  • So, hopefully by now I've convinced you

    希望到現在我已經說服了你

  • that functional programming is at least interesting

    函式編程至少有趣

  • and that we could do it in JavaScript to avoid these headaches, etc.

    並且我們可以使用JavaScript來編

  • How can we do it?

    我們要怎麼做?

  • What does it mean?

    這是什麼意思?

  • This is what I was asking myself.

    這就是我在問自己的問題

  • So, the main thing

    最主要的

  • and maybe it sounds like a tautology or obvious is that

    也許聽起來像是重言式或顯而易見的是

  • in functional programming

    在函式編程中

  • you want to do everything with functions,

    你會想用函式來做所有事情

  • so we want to express everything in our program in terms of functions.

    所以我們想用函式來表達 程序中的所有內容

  • And a function of course is just something

    當然,函式只是一個

  • that takes an input and gives an output.

    接受輸入並給出輸出的東西

  • So, we want to be thinking about

    所以 我們要想的是

  • kind of the flow of data of inputs and outputs through the program,

    程序輸入和輸出的數據流的種類

  • instead of thinking about objects and how they interact

    而不是考慮對象及其相互作用

  • and how they manipulate

    以及它們如何操縱

  • or thinking about steps in a recipe like in an imperative style.

    或想食譜上的步驟 比較命令式的步驟

  • Here we're really thinking about how we can express everything

    在這,我們在考慮如何表達這一切

  • in terms of functions,

    以函式來說

  • taking inputs, giving outputs.

    接受輸入,提供輸出

  • So, for example,

    舉例說

  • this would be a non-functional way for me to get the text

    這將是一種非函式性的方式取得文字

  • Hi, I'm Anjanato appear on the screen.

    屏幕上出現 “嗨,我是Anjana”

  • I could assign a variable, I call itname

    我可以分配一個變量 我稱之為“名稱”

  • and have it store the textAnjana.”

    並存儲文字 “Anjana”

  • I could have a greeting likeHi, I'm” orHello, I'm”, whatever,

    我可以有個招呼, 例如 “嗨,我是” 或 “你好,我是”,什麼的

  • and then I could log that to the console.

    然後將其記錄到控制台

  • This is sort of an imperative style.

    這是一種命令式風格

  • First do this, then do that, then do this other thing,

    先做這,後做那,再後做這其他的

  • we don't have functions here,

    這裡沒有函式

  • we're not expressing this in terms of how inputs are transformed into outputs.

    我們不是在以 如何輸入會轉換為輸出 來表達這一點

  • So, maybe a more functional way of doing the same thing

    也許是一種更實用的方法來做同樣的事情

  • and this is a really simple example, just for the sake of it,

    這是一個非常簡單的例子

  • is to define a function called greet

    是定義一個叫做greet的函式

  • which takes a parameter name

    帶有參數名稱

  • and returns a string which addsHi, I'm”

    並返回一個字串, 其中添加 “嗨,我是”

  • to the beginning of that name.

    到該名稱的開頭

  • So, for example, if I type greet,

    舉例來說, 如果我輸入greet

  • the string Anjana,

    字串Anjana

  • feeding that as input

    作為輸入

  • then I get the outputHi, I'm Anjana”,

    然後我得到輸出 “嗨,我是Anjana”

  • that's a more functional way expressing this in terms of functions.

    這是一種從函式上 表達此函式的方法

  • Okay. So, another...

    好,所以...

  • maybe the main thing about functional programming

    也許關於函式編程的主要問題

  • is to avoid side effects

    就是避免副作用

  • and instead to use pure functions.

    而是使用純函式

  • So, what does that mean?

    那是什麼意思呢?

  • A side effect is anything that a function might do

    副作用是函式可能會做的任何事情

  • that isn't computing its output from the inputs you've given

    沒有在用你的輸入 來計算它的輸出

  • and returning that output.

    以及返回該輸出

  • So, for example,

    例如

  • printing something to the console is not returning an output,

    在控制台上打印一些內容 不是返回輸出

  • it's doing something else,

    它在做其他事情

  • something that's on the side of the function

    函式副面的東西

  • or if you have a function that uses some globally defined variable

    或者如果你的函式使用一些全局定義的變量

  • to compute its output

    來計算其輸出

  • that doesn't depend only on the input to that function,

    這不僅僅取決於該函式的輸入

  • so that's not pure.

    所以那不是純的

  • It's taking something from outside the function

    它從函式外部獲取了一些東西

  • and involving it in some way in what the function does.

    並以某種方式將其 包含在函式的功能中

  • So, this is just a really quick explanation of what a pure function

    那只是對什麼是純函式的快速解釋

  • that avoids side-effects would do.

    可以避免副作用就好

  • For more information on that

    有關更多信息

  • there's excellent Wikipedia articles on these sorts of things,

    Wikipedia上有很多關於這類事情的文章

  • but basically the idea is that

    但基本上

  • you want your function to do nothing

    你想要你的函式什麼都不做

  • except take its input, use that and only that

    除了接受輸入, 僅使用那個輸入來

  • to compute an output

    計算輸出

  • and then return it.

    然後返回

  • That's pure.

    那才是純的

  • So, for example, this function here,

    例如,此函式

  • we have this globally defined variable name

    我們有這個全局定義的變量名

  • which gets used in the function

    會在函式中使用

  • as you can see in the last line there,

    你在這 最後一行所看到的

  • it gets used, so there's no input,

    它被使用了,所以沒有輸入

  • we don't have name as an argument to this function,

    我們沒有名稱作為此函式的參數

  • it's just reading something in from the global state.

    它只是從全局狀態中 讀取一些信息

  • That's not pure.

    那不是純的

  • Also, not pure because

    它不純的原因是因為

  • the return value of this function here isn't what we care about,

    而這個函式的返回值不是我們所在乎的

  • we care about doing something,

    我們在乎做某事

  • changing the world in some way

    以某種方式改變世界

  • other than the return value,

    除了返回值

  • in this case, printing to the console.

    在這種情況下, 打印至控制台

  • So, this is a not pure function here.

    這不是一個純函式

  • A pure function might look like this.

    一個純函式可能會長這樣

  • Here we have,

    在這裡

  • the only thing that matters

    對此輸出唯一重要的

  • to the output of this function is its input,

    是它的輸入

  • the argument that we pass to it

    我們傳遞給它的論點

  • and the only thing that it does is return its output.

    它唯一要做的就是返回其輸出

  • Okay, so I've been talking for a while now about pure functions

    我好像說了很多純函式

  • that's because this is really like a key thing at least for me,

    因為至少對我而言, 這確實是一件關鍵的事情

  • something I've taken as one of the key parts of functional programming

    一件我當成函式編程的關鍵部分

  • is thinking about things as purely as possible.

    就是以最純粹的方式去思考問題

  • Another key point would be using higher-order functions.

    另一個關鍵點是 使用高階函式

  • So, this means functions that can take as inputs other functions

    因此,這在指一些可以 納其他函數為輸入的函式

  • or a function that can return a function as its output.

    一個可以返回函式為輸出的函數

  • So, basically, we're treating functions kind of as objects themselves.

    基本上就是將函式本身視為對象

  • They can be passed to other functions.

    它們可以傳遞給其他函式

  • You can have layers of functions within functions within functions, etc.,

    你可以在函式中有層層的函式

  • and these are what's called higher-order functions,

    這就是所謂的高階函式

  • they come up a lot in functional programming.

    在函式編程中經常出現

  • This is a bit of a random example,

    這是一個隨機的例子

  • but let's say we have this function at the top here,

    假設我們在這有此函式

  • makeAdjectifier

    makeAdjectifier

  • where we give it an adjective

    我們給它一個形容詞

  • and it returns actually a function.

    它實際上給回一個函式

  • It doesn't return a string or a number or anything like that,

    它不會給回字串,數字或類似的東西

  • it returns us a function

    它給回我們一個函式

  • which adds that adjective to a string that you give it.

    這會將形容詞添加到 你提供的字串中

  • So, for example, I can use the makeAdjectifier function

    例如,我可以使用makeAdjectifier函式

  • feed it the inputcool

    輸入 “cool”

  • and get a function that's called coolifier.

    並獲得一個稱為coolifier的函式

  • So, now when I pass a string to coolifier,

    當我將字串傳遞給coolifier時

  • I getcooladded to that string.

    該字串中就會添加 “cool” 字

  • So, if I pass conference, I get cool conference.

    如果我寫 "會議" conference), 我會得到"很棒的會議" (cool conference )

  • So, the idea here is that we have a higher-order function

    概念就是我們有一個高階函式

  • which returns a function.

    給回一個函式

  • And this kind of wrapping your head around this

    大概消化一下這個概念

  • at least for me

    至少對於我來說

  • is one of the key things to being able to write in a functional style

    是能夠以函式風格進行寫碼的關鍵之一

  • because as we'll see a bit later,

    因為我們之後會看到

  • we need these higher-order functions

    我們需要這些高階函式

  • in order to avoid some of the tricks

    為了避免一些花招

  • that we're used to using from other paradigms.

    我們習慣於從其他範例中使用

  • So, learning the thing to get into that functional mindset

    想融入函式性思維要學習的

  • for me really involved wrapping my head around this concept.

    對我而言就是 儘快熟悉這個概念

  • Okay.

  • So, one of these things that we're going to avoid

    我們要避免的其中一個東西是

  • that we're used to doing is iterating,

    我們習慣做的是迭代

  • using likefororwhile”, these sort of things.

    使用像 “for” 或 “while” 之類的東西

  • We're used to going over lists and doing things to all the items in it.

    我們習慣於遍歷列表 並對其中的所有項目執行操作

  • Instead, in a functional style,

    以函式風格

  • we might use higher-order functions like Map or Reduce or Filter

    我們可能會使用高階函式, 例如地圖 (Map) 或減少 (Reduce) 或過濾 (Filter)

  • which often take as an input

    通常作為輸入

  • not only the list that you want to do something to in some way

    不僅是某種方式做某事的列表

  • but also a function that then you're going to apply to it.

    但也是要應用的函式

  • In the interest of time I'm not going to go into too much detail

    為了時間的關係, 我不仔細贅述

  • about what Map, Reduce, and Filter do,

    Map,Reduce和Filter的功能

  • but I found and also thanks to my colleague Khalid up there,

    但因為我的同事Khalid, 我找到了

  • a really cool graphic that I think expresses Map and Reduce pretty well,

    一個很酷的圖, 適當的解釋Map和Reduce

  • maybe you guys have seen it before,

    也許你們以前看過