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,

也許你們以前看過