みなさんこんにちは、かじりです。この記事はJavaScriptのpromise, async, awaitを説明するために、functionの説明からやっていこうと思い、記載しています。 まずは、パソコンで開きましょう。スマホだとコードを実行できませんし、コードが読みづらいと思います。スマホだったら、一回ブックマークして、パソコンで開き直しましょう。 あとは、上が簡単で下にいくほど難しいので上から呼んでみてください。
まず、コードを実行できるように準備します。ブラウザならdevtoolを使ったり、playgroundを使ってください。
あとはコード例がたくさんあるので、実行してどのように動いているか確認しながら読んでみてください。
また、注意点として、ブラウザ実行する場合、前の履歴が残っていると失敗することがあるので、失敗したらブラウザをリロードしてみてください。その後に実行するとうまくいくことがあります。
あと、先に間違ったコードを記載しておくことがあるので、読みながら先にそれはおかしい！と気づけると良いです
まずはhello worldからやっていきます。
function helloWorld () {
console.log('hello world')
}
これを実行すると、hello worldと出力されません。 正しくは下記です。
function helloWorld () {
console.log('hello world')
}
helloWorld()
このようにfunctionは定義して実行する必要があります。 以下に定義と実行を分けて記載します。
function helloWorld () {
console.log('hello world')
}
helloWorld()
ではfunctionを定義しないで実行してみましょう。
undefinedFunction()
これを実行するとUncaught ReferenceError: undefinedFunction is not definedと表示されると思います
では、エラーを発生させずに実行するにはどうすれば良いでしょう？
function undefinedFunction () {}
undefinedFunction()
これでエラーなく実行できるはずです。
function argumentFunction (x) {
console.log(x)
}
argumentFunction(1)
こうすることで画面に1と表示されると思います。ではxをyに変更したらどうなるでしょう。
function argumentFunction (y) {
console.log(y)
}
argumentFunction(1)
1が表示されたと思います。では、100を表示するにはどうすれば良いでしょう。
function argumentFunction (y) {
console.log(y)
}
argumentFunction(100)
これで100が表示されたと思います。
複数の引数を使ってみましょう
function multipleArgumentFunction (x, y) {
console.log(x, y)
}
multipleArgumentFunction(1, 2)
こうすることで画面に1, 2と表示されると思います。では1, 2, 3と表示するにはどうすれば良いでしょう？
function multipleArgumentFunction (x, y, z) {
console.log(x, y, z)
}
multipleArgumentFunction(1, 2, 3)
1, 2, 3が表示されたと思います。他の方法として
function multipleArgumentFunction (x, y) {
console.log(x, y, 3)
}
multipleArgumentFunction(1, 2)
これでも1, 2, 3が表示できたと思います。
function returnNumberFunction () {
return 1
}
returnNumberFunction()
はい、これでreturnNumberFunctionというfunctionで数値を返すことができました。確認してみましょう。
function returnNumberFunction () {
return 1
}
const result = returnNumberFunction()
console.log(result)
これで1と表示されたはずです。
これはさっきと同じです。
function returnNumberFunction () {
return 1
}
const result = returnNumberFunction()
console.log(result)
これを少し変更してみましょう。
const result = function returnNumberFunction () {
return 1
}()
console.log(result)
これでも同じ結果が表示されたと思います。 さらにまとめてみましょう。(みづらいのであまり実用的ではないです)
console.log(function returnNumberFunction () {
return 1
}())
これでも同じ結果になると思います。 ではさらにまとめてみましょう。
console.log(function () { return 1 }())
これも同じ結果だと思います。ずいぶん小さくなりましたね。 もっとまとめてみましょう。
console.log((() => 1)())
これも同じ結果を返します。このようにいろんな書き方ができます。
上で出てきた特殊な書き方を解説していきます。
function returnNumberFunction () {
return 1
}() // ← ??
最後の行の()をみることがあまりないです。これはfunctionをそのまま実行しています。例えば以下はどうでしょう。
function returnNumberFunction () {
return 1
}
returnNumberFunction()
いつも通りのfunctionに見えます。returnNumberFunctionを呼び出すときは()を後ろにつけると思います。
ですが、functionを定義して、後から呼び出すのではなく、functionを定義した時に呼び出すことができます。なので
function returnNumberFunction () {
return 1
}()
このような書き方が可能になります。
また、()は結構なんでもできます。以下に色々書いたので、こんな書き方もできるんだなくらいに思ってください。
(console.log('hello'));
(function(){console.log('hello')}());
function hello () {
return function () {
return function () {
console.log('hello')
}
}
}
hello()()()
const hello2 = () => () => () => console.log('hello')
hello2()()();
(()=> console.log('123'))()
;(function(){console.log('123')})()
functionを変数に代入してみましょう。
functionの結果を変数に代入するのではありません。
functionを変数に代入します。
function sum (x, y) {
return x + y
}
const result = sum
これで、functionを変数に代入できました。 では実行してみましょう。
function sum (x, y) {
return x + y
}
const result = sum
console.log(result(1, 2))
console.log(sum(1, 2))
このように、resultもsumも両方使うことができます。
callback functionを使ってみます。
function callback (func) {
func()
}
function greet () {
console.log('hello')
}
callback(greet)
helloと表示されたかと思います。これがcallback functionです。JavaScriptを4年経験しましたが大変読みづらいです。
callbackを取り除いて同じ結果を出力しようとするとこうなります。
console.log('hello')
じゃあそう書いてくれ。そう思います。でも、callbackは使うんです。もう使っているかもしれません。例えばsetTimeoutです。
setTimeout(function () { console.log('hello') }, 1000)
setTimeout(function () {
console.log('hello') }
, 1000)
上記２つはどちらも同じsetTimeoutです。改行の有無だけが違います。
setTimeoutという関数の１つ目の引数にfunction(){console.log('hello')}
２つ目の引数に1000を渡しています。
これはsetTimeout functionに1秒後にfunction(){console.log('hello')}を実行してねという意味です。なので、functionにfunctionを渡しています。もう一つmapというfunctionを例えに使います。
// function
[1,2,3].map(function (x) {console.log(x)})
// arrow function
[1,2,3].map((x) => {console.log(x)})
上記はどちらか見たことがあるかもしれません。これもmapというfunctionの引数にfunction (x) {console.log(x)}を渡しています。
例題は以上にしてcallback functionを定義して実行します
function callback (func) { // 1
func() // 2
} // 3
function greet () { // 4
console.log('hello') // 5
} // 6
callback(greet) // 7
これの処理順としては
という流れです。
以下の記事も参考になるかもしれません