関数宣言、関数式、Arrow Function

[azu]

#17 基本文法
#112 関数のうち "関数宣言" について

• function declaration
• function expression
• Arrow function
• その他
  • 関数宣言
    • 関数宣言はセミコロンがいらない
    • セミコロンは文を区切るための構文
    • 関数宣言自体は文で終わっているワケではないため
  • 関数式
    • 関数は値である
    • ファーストクラスである関数
    • const fn = function(){}ができる
  • Arrow Function
    • 関数式の現代版といえるもの
    • 関数式を利用する場合は多くのケースでこちらを使ったほうが良い
    • this(see スコープ)の問題などがおきにくいため
    • また、Arrow Functionに名前を付けるにはletやconstを使わないと行けない。
    • そのためvarはやっぱりダメ
    • 短く誤解がない表現なので、function式よりはArrow Functionを使いましょう
  • メソッド
    • ES2015まではメソッドはただの関数が値として入ってるプロパティの事だった(定義は今も同じ)
    • JavaScriptのメソッドは var obj = { method(){} } で定義できる
    • var obj = { method : function(){} } と書くこともできるがこれは関数式と同じ
    • なので現在的にはメソッド定義をする方法はメソッド定義の記法でやる

[azu]

Let’s Learn JavaScript Closures — Free Code Camp
この記事、クロージャーとArrow Functionを理解するのにすごくよく書けてる

[azu]

• The names of functions in ES6
• Function#nameについて - JS.next

const f4 = () => {}

とかにもちゃんと名前付くようになったのも、ES6での違い。
でもfn.nameはIEのせいで実際に使うのが結構難しい

[azu]

ASI 自動セミコロン挿入については関数宣言がでてきたら話す必要がある。
どういう時にセミコロンがいるのか、いらないのかは慣れるまで分からない感じがする。
逆にどういう時にセミコロンのありなしの区別ができるのか調べる必要がある。

ステートメントは必要で、宣言は不要という認識だったけど

Most ECMAScript statements must be terminated with semicolons.
....
Because the convention for C-like languages is that the elements of a statement list (statements and declarations) each terminate with a semicolon unless their last token is a } such as FunctionDeclaration and Block (or if the syntactic tail of the statement is another statement). ES6 applied the same convention to ClassElementList.

tc39/ecma262#341

これを一言で説明して理解できる文章が必要

[azu]

Arrow Functionは式しかなれない関数という言える?

[azu]

関数の種類ってどういう分類になるんだろ?
ES5以下では一つの関数の書き方の違いと言えたけど、今は明確使える機能が違ったりするから結構種類がありそうな気がするけど、どういう分類になるんだろ?

[[Construct]] と [[Callable]]] があるかという組み合わせなのかな?

• new && Callable - function declaration, expression, constructor function
• Callable - shorthand method, Generator
• New - class
• super - class, shorthand method

[azu]

話の流れ的に次のような形にするとすっきりするかも。

• JavaScriptの関数宣言は function でおこなえる
• JavaScriptの関数は値として利用できるので const fn = function(){} function式が使える
• JavaScriptの関数式としてfunction式とArrow Functionがある
• 短く誤解がない表現なので、function式よりはArrow Functionを使いましょう
• JavaScriptのメソッドは var obj = { method(){} } で定義できる
• 先ほども書いたようにJavaScriptで関数は値なので、var obj = { method : function(){} } と書くこともできる

[azu]

http://www.ecma-international.org/ecma-262/7.0/#sec-function-definitions
"関数宣言" と呼ぶのがいいのかなー。
関数宣言文だとStatementっぽくてセミコロンが不要となる話がよくわからない

[azu]

JavaScript ／ function文でセミコロン - スタック・オーバーフロー

[yumetodo]

関数とはなにか？という議論がjQueryのIssueで出てきている。jQuery.isFunctionとpromiseとGenerator Functionと実行可能なDOMを巡って。

• Deferred: behavior different from ECMAScript Promise for objects with [[Call]] jquery/jquery#3596 : Deferred: behavior different from ECMAScript Promise for objects with [[Call]]
• Core: use instanceof and typeof instead of jQuery.type in jQuery.isFunction jquery/jquery#3601 : Core: use instanceof and typeof instead of jQuery.type in jQuery.isFunction
• Deprecate jQuery.isFunction jquery/jquery#3609 : Deprecate jQuery.isFunction
• Internal API succeeding to jQuery.isFunction jquery/jquery#3610 : Internal API succeeding to jQuery.isFunction

[akihikodaki]

そのissueを立てた張本人です. リファレンスが飛んでいた見てみましたが, 気づいたことがあるので報告させていただきます. 全て ECMAScript 2016 Language Specification を斜め読みした結果に沿っています.

[[Construct]] と [[Callable]]] があるかという組み合わせなのかな?

• new && Callable - function declaration, expression, constructor function
• Callable - shorthand method, Generator
• New - class
• super - class, shorthand method

関数は[[Call]]内部スロットを持つ全てのオブジェクトであり, [[Construct]]を持っているかに依りません. つまり, constructorであっても関数ではないオブジェクトというのはありえるように読めます.
しかしECMAScriptで定義されているconstructorは関数です. クラス定義に依るクラスは[[FunctionKind]]内部スロットがclassConstructorであり, 呼び出す際にはこれを確認して例外を投げることになっています. また, 呼べないビルトイン関数は実際には呼ばれると例外を投げる関数として定義されています.

[azu]

#20 (comment) の元ネタはたしか
http://exploringjs.com/es6/ch_callables.html#_cheat-sheet-callable-entities あたりですね。

ECMAScriptの仕様上の関数~クラスの定義は基本的に後付な部分が多いので、そこに直感的に理解できる一貫性があるわけではないですよね。そこが説明する上で問題なんですよね。

関数であっても([[Call]]を持っていても)、Callableとは限らないというのがやっかいですね。
これをJavaScriptを学ぶ人へ上手く説明する方法が難しいなーと思っています。(仕様上の挙動は決っているけど、普通はそこまで読まないとは思うので)

• ljharb/is-callable: Is this JS value callable? Works with Functions and GeneratorFunctions, despite ES6 @@toStringTag.

「Aは関数です。」これ以上の説明しようとした場合に、一般的なユーザーが知る必要がない内部プロパティについて言及しないと説明できなくなってしまうという問題がやっかいだなーと思ってメモってました。(Arrow Functionで定義したものも関数ですが、これはnewで呼び出すことはできませんとかなってしまう)

そういえば以前Callable ConstructorのProposalがあったのを思い出しました(これは却下された)

• Status of callable class constructors proposal · Issue #470 · tc39/ecma262
• ecma262/callconstructor.md at master · tc39/ecma262
• tc39-notes/sept-24.md at master · rwaldron/tc39-notes

[azu]

(jQueryのissueちゃんと見てないですが、関数かを判定したいという用途なら typeof x === "function" する以外の結論にはならない気はします。classを除きたいとかなどは「Callableな関数かを判定する」みたいな異なる意味合いが"関数"という言葉に混ざってしまっている印象)

[akihikodaki]

確かに関数という枠組みの中での一貫性は感じられません. 「関数」としてまとめてしまうのではなく、関数の定義の仕方によって個別にその特徴を記述するのが妥当なように思えます. 例えば, 「呼べる関数を作るアロー関数」「呼ぶと例外になってしまうがconstructorとして使えるクラス定義」「呼ぶのにもconstructorとするのにも使える関数定義」といったようにです.

jQueryのissueではDOMのapplet, embed, object要素が関数でもあることが問題視されています. jQuery内では「渡された値が関数でなければそれをそのまま用いる、関数であればその関数を呼んで戻り値を用いる」というコードが多用されており, 関数そのものが値として用いられることを想定していないのです. 実際には関数もオブジェクトなのでその前提は往々にして成り立ちません.

[yumetodo]

jquery/jquery#3617
どうやらtypeof obj === "function" && typeof obj.nodeType !== "number"という、DOM Elementを除くfunctionを関数と定義する動きがある

[azu]

The Many Faces of Functions in JavaScript - Bocoup

[azu]

JavaScript のもう一つの「関数名」 —— name プロパティ - Qiita
Function.nameについて
"Inferred function names" って呼び方初めて聞いたなー
後は仕様外だとdisplayNameとかかな

[azu]

closed by #112 #119