javascriptの基本からjavascriptを使った動的な動きについて柔軟に対応できる力をつけるjs勉強会 第三回

Transcript

1. 第三講義 関数
2. 関数とは︖ 関数 とはある⼀定の⼿続きを1つの処理としてまとめることが出 来る機能です。 メリットしては、関数は再利⽤可能で⼀度定義すると呼び出すこ とで同じ処理を実⾏することができます。
3. 関数の宣⾔ Javascriptでは、関数を定義する際に function キーワードを使⽤し ます。 下記のように記述します。 // 関数の宣⾔ function 関数名(引数) { // 関数を呼び出されたときの処理 return 関数の返り値 } // 関数の呼び出し const 関数の結果 = 関数名(引数) console.log(関数の結果) // => 関数の返り値
4. 引数についてのアレコレ 引数は複数設定することが可能 function fn(arg1, arg2, arg3, arg4, arg5) { return void 0 }
5. 引数が⾜りない時 引数 の数が⾜りない時は undefined が補完される。 function fn(arg1, arg2) { return arg1, arg2 } console.log(fn(1)) // arg1 => 1, arg2 => undefined
6. 引数が多い時 引数 の数が多い時は単純に無視される。 function fn(arg1, arg2) { return arg1 + arg2 } console.log(fn(1,2)) // => 3 console.log(fn(1, 2, 3)) // => 3
7. デフォルト引数 ES6からは 引数 にデフォルト値を与えることができます。 function fn(arg1, arg2 = 2) { return arg1 + arg2 } console.log(fn(1,3)) // => 4 console.log(fn(1)) // => 3
8. 可変⻑引数 javascriptにおいて、可変な⻑さの引数を渡すことが出来る。 古い書き⽅ function fn() { console.log(arguments) } const test = [1, 2, 3, 4] fn(test) // => [0] => [1, 2, 3, 4] fn(2) // => 2
9. ES6の書き⽅ function fn(...args) { console.log(args) } const test = [1, 2, 3, 4] const test2 = [5, 6, 7, 8] fn(test,test2) /** * => [0] => [1,2,3,4] * => [1] => [5,6,7,8] */
10. argumentsとスプレッド演算⼦引数(残余引数)違い arguments は Argument という Object ...引数名 はただの Array という違いがあるので、地味に扱いには注意。
11. 引数の分割代⼊ const user = { id: 57 } function fn({id}) { console.log(id) } fn(usr) // => 57
12. 引数の分割代⼊は配列も利⽤可能です。 const arr = [10, 20] function fn2([first, second]) { console.log(first) } fn2(arr) // => 10
13. 関数を取り扱う上での注意点 1. 関数は同名定義することで上書き可能である。 const numbers = [1, 2] function sum([arg1, arg2]) { return arg + arg2 } function sum([arg1, arg2]) { return (arg + arg2) * 1.08 } console.log(sum(numbers)) // => 3.24
14. 2. 関数は Object 扱いなので、関数の機能をそのまま変数に代⼊ できる function hello() { return "Hello" } const greeting = hello; // 変数を代⼊している console.log(greeting()) // => Hello
15. 無名関数 javascriptの関数はオブジェクトであると⾔う点を前のスライドで 触れました。 変数に格納できるということは、関数に名前を与えなくとも、関 数に名前を与えることができます。 そのため、javascriptには名前の無い関数を定義する機能がありま す。
16. 下記のような式を関数式、名前のない関数の事を無名関数と呼び ます。 const greeting = function () { return "Hello,World" } // ES6からは下記のようなアロー関数を利⽤する。 const greeting2 = () => { return "Hello, World" } console.log(greeting()) // Hello, World
17. 名前付き関数式 const recFunc = function named() { if (n === 0) { return 1; } // namedを再帰的に呼び出している return n * named(n - 1); } console.log(named(3)) // undefined console.log(recFunc(3)) // 6
18. コールバック関数 jsの特徴として、関数をオブジェクトとして扱う事ができるため、 その場で作成した無名関数を引数として与えることができます。 引数 として渡される関数の事を コールバック関数 コールバック関数 が引数として与えられる関数を ⾼階関数 (ハイオーダー関数)と呼びます
19. 下記のように記述します。 function ⾼階関数(コールバック関数の引数) { //処理 } const recFunc = function named() { if (n === 0) { return 1; } // namedを再帰的に呼び出している return n * named(n - 1); } // 何気なく前項で使⽤してきた”これ”のことです。 console.log(recFunc(3)) 上記の場合は、console.logがHOF(⾼階関数)。 recFuncがコールバック関数であり、⾃⾝を使うHOFです
20. スコープ スコープとはプログラミング⾔語において、変数や関数を範囲の 事を指す。
21. グローバルスコープ グローバルスコープ とは、(該当ファイル内部で)どこからでも参照 できる変数や関数の事を指す 例えば、js/app.jsというファイルで下記の記述がされていれば、 それはグローバルスコープとなる。 var hoge = 1 const fuga = "string" function fn() { console.log(hoge) console.log(fuga) } fn() /* => 1 => "string" */
22. ローカルスコープ ブロック( {} の中⾝のこと)毎に有効なスコープの事を ローカルスコープ と呼びます。 javascriptには２つのローカルスコープがあります。 ブロックスコープ 関数スコープ
23. ブロックスコープ ES６から採⽤。 ※ブロックとは {} のこと 例1) // for⽂のブロックスコープを持つローカル変数 i を定義 for (let i = 0; i < 3; i++) { console.log(i); // -> 0, 1, 2 } // for⽂のブロックスコープの外側からはアクセスできない console.log(i); // -> ReferenceError
24. 例2) if (window) { let scope = 'local'; console.log(scope); // -> local } // ブロックスコープ外のためアクセス不可 console.log(scope); // -> ReferenceError
25. 関数スコープ function fn() { const arg = 1 console.log(arg) // 1 } console.log(arg) // undefined
26. 変数の巻き上げ(var) javascriptの独⾃の仕様として、 変数の巻き上げ という バグの温床機能があります。
27. この場合どうなるか︖ var arg = 1 function fn() { console.log(arg) arg = 0 console.log(arg) } fn()
28. 答え var arg = 1 function fn() { console.log(arg) // => undefined ナンデ!!!? var arg = 0 console.log(arg) // => 0 } fn()
29. 内部で起こっていること var変数の巻き上げ は、 ブロックスコープを無視してもっと近い関数またはグローバルス コープに変数を紐付けます。 そのため、fn関数の直下に宣⾔部分が巻き上げられます。 宣⾔だけが、先頭にすっ⾶んでくるとお考えください。 var arg = 1 function fn() { var arg console.log(arg) // => undefined arg = 0 // 代⼊部分はそのまま console.log(arg) // -> 0 } fn()
30. 関数の巻き上げ 巻数宣⾔でも同様のことが発⽣します。 例) hello() // => Hello, World function hello() { console.log("Hello, World") }
31. 即時関数 即時関数 とはjavascriptの関数式の⼀つで、 即座に実施される関数のことです。 下記のように記述します (function () { // なにか処理 }()) スクリプト全体をこれで囲むことで変数のグローバル汚染を避け ることができます。 現在はより良い記法があるため、 今は使うけど最終的には使⽤しなくなるテクニック と覚えておいてください。
32. ベストプラクティス 1. 名前付き関数を利⽤しない。 2. varを利⽤しない。 3. やむを得なくvarを利⽤する場合は即時関数を利⽤する。 4. 変数のグローバル汚染を避ける。 5. 関数の粒度を⼩さくする。 6. 引数の数を少なくする
33. 名前付き関数を使⽤しない ✘ function fn() { return "Hello, World" } ◦ const fn = () => { return "Hello, World" }
34. varを利⽤しない ✘ var hoge = 1 ◦ const obj = {} // Objectや配列の場合は無条件でこっち let str = "" // ⽂字列や数字などで、再代⼊する場合はこっち。
35. やむを得なくvarを利⽤する場合は即時関数を利⽤ する ◦ 'use strict' // 必ず厳密モードを利⽤する。 (function () { }())
36. 変数のグローバル汚染を避ける ✘ var i = 0 var j = 0 for (i = 0; i < something.length; i++) { } ◦ const loopFunc = function () { for (let i = 0; i < something.length; i++) { } }
37. 関数の粒度を⼩さくする&引数の数を少なくする ✘ function specialBigAndLongSuperAwesomeFunc( arg1, arg2, arg3, arg4, arg5, arg6, arg6, arg7 ) { var sum = arg1 + arg2 var multiple = arg3 * arg4 }
38. ◦ const sum = function (arg1, arg2) { return arg1 + arg2 } const multiple = function (arg1, arg2) { return arg1 * arg2 } const myFuncArgs = { arg1: getArg1() // 引数を⽣成する関数を別途作ったと仮定 arg2: getArg2() // 引数を⽣成する関数を別途作ったと仮定 arg3: getArg3() // 引数を⽣成する関数を別途作ったと仮定 arg4: getArg4() // 引数を⽣成する関数を別途作ったと仮定 // 省略 } const myFunc = function (myFuncArgs) { const localSum = sum(myFuncArgs.arg1, myFuncArgs.arg2) const localMultiple = multiple(myFuncArgs.arg3, myFuncArgs.arg4) }
39. 次回予告 次回は、オブジェクトとクラス、メソッドについて詳しく⾒てい きます。