私たちが普段目にしているWebサイトではたくさんのJavaScriptのコードが記述されている。その中のコードの管理方法としては関数を用いるのが有効的である。今回は、そんな関数についてまとめてみた。
今回まとめること
- JavaScriptでの関数定義
- 無名関数と即時関数
- アロー関数
1.JavaScriptでの関数定義
基本形
function 関数名( 引数 ){
//関数内の処理
}
戻り値
戻り値とは、最終的に出力される値のことを指す。
JavaScriptでは戻り値をreturnを用いて明示する。
function calc(num1,num2){
return num1*num2
}
const num1 = 3
const num2 = 4
console.log(calc(num1,num2))
※num1 * num2 の値が出力される。
関数宣言
function 関数名( 引数 ){
//関数内の処理
}
こちらは冒頭で記述した基本形。
関数式
変数 = function( 引数 ){
//関数内の処理
}
こちらは関数名を指定しない（常に無名関数となる）
変数に対してfunctionから関数内の処理までを代入する。
関数宣言と関数式との違いとは
まずはコードを書いてみる。
//関数式
const hello = function(){
console.log('hello')
}
//関数宣言
hello()
function hello(){
console.log('hello')
}
結論、関数式は呼び出しもとのhello()が先に呼び出され、関数宣言では呼び出しもとのhelloが後から呼ばれる（Rubyの出力と同じ）
つまり、この場合正しく出力されるのは関数宣言となる。
考察
関数宣言はRubyの出力と同じだと記述したが、Rubyは日本人が作成したことから結論を最後にもってきているのではないかと考えた。
逆に関数式は英語と同じで結論を先にもってくる。こういった言語の違いがあるのではないだろうか。
2. 無名関数と即時関数
無名関数
無名関数は関数名なしで関数を定義することができる。
先程ちらっと記述したが、関数式は常に無名関数である。
const calc = function(num1,num2){
return num1*num2
}
const num1 = 3
const num2 = 4
console.log(calc(num1,num2))
即時関数
関数を定義すると同時に実行される構文。
呼び出しもとが不要で、一つの構成で出力できる。全体を（）で囲むといった特徴がある。
// 無名関数
const countNum = function(num) {
console.log(num)
}
countNum(1)
// 即時関数
(function countNum(num) {
console.log(num)
})(1)
3. アロー関数
functionの記述を省略し、代わりに ( ) => という記述によって関数を定義する。
// 無名関数
const 変数名 = function(){
処理
}
// アロー関数
const 変数名 = () => {
処理
}
このようにより短い記述で関数を定義することが可能となる。
最後に
ここまで記事を読んでいただき、ありがとうございました。
Webアプリケーションのみならず、Webサイトやゲームなど、幅広く利用されているJavaScript。是非使いこなせるようになりたいです。
幅広く利用されているのは、それなりの理由があるからだと思っていて、使いこなすことでプログラミングの幅を広げていきたいと考えています。
今回の記事はここまでです。最後まで読んでいただき、本当にありがとうございました!