字幕列表 影片播放
-
[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 Anjana” to appear on the screen.
屏幕上出現 “嗨,我是Anjana”
-
I could assign a variable, I call it “name”
我可以分配一個變量 我稱之為“名稱”
-
and have it store the text “Anjana.”
並存儲文字 “Anjana”
-
I could have a greeting like “Hi, I'm” or “Hello, 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 adds “Hi, 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 output “Hi, 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 input “cool”
輸入 “cool”
-
and get a function that's called coolifier.
並獲得一個稱為coolifier的函式
-
So, now when I pass a string to coolifier,
當我將字串傳遞給coolifier時
-
I get “cool” added 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 like “for” or “while”, 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,
也許你們以前看過