前提
プログラミングを始めたて(1~2ヶ月)の自分が学習した内容をまとめています。
実際の現場では通用しないことや間違いなどあるかもしれません。
お気づきの際はコメントにてご報告いただければ幸いです。
JavaScriptの関数定義
JavaScriptの基本構成の１つで、同じ処理をまとめて定義し、何度も使えるような形にしたものです。
RubyでいうメソッドがJavaScriptでの関数っていうイメージです。
JavaScriptの関数には大きく分けて２つあります。
関数宣言と関数式です。
注意点
JavaScriptの関数では戻り値に関してルールがあります。
戻り値はreturnで明示する必要があります。
関数宣言
以下で定義されるものを関数宣言といいます。
function 関数名(引数){ 処理 }
関数式
関数名の定義なしで定義すること
変数 = function(引数){ 処理 }
関数宣言と関数式の違い
読み込まれるタイミングが異なります。
関数宣言は先に読み込まれ、関数式は先に読み込まれない。
例えば、
関数宣言の場合
good()
function good(){
console.log('good')
}
エラーなく以下の出力がされます。
good
関数式の場合
good()
const good = function(){
console.log('good')
}
以下のようなエラーがでます。
Uncaught ReferenceError: good is not defined
at <anonymous>:1:1
以上の結果からも関数宣言は定義した関数が先に読み込まれるため、表示されます。
一方で関数式の場合は定義した関数が先に読み込まれないため、変数が定義されていないというエラーが発生しました。
###関数式には更に３種類ある
関数式にはさらに３種類に分けられます。（これもあくまでざっくりなのでより細かく分けるともっとあります。）
・無名関数
・即時関数
・アロー関数
無名関数
function(引数){}
で記述されている式を無名関数と呼びます。
より簡潔なコードが書けるらしい？です。
下記比べてみました。
無名関数
const calc = function(num1,num2){
return num1*num2
}
const num1 = 3
const num2 = 4
console.log(calc(num1,num2))
関数宣言
function calc(){
return num1*num2
}
const num1 = 3
const num2 = 4
console.log(calc(num1,num2))
この場合だと関数宣言のほうが簡単なような？
簡単すぎる記述ではそこまで差がでないのかと思いました。
また関数名がないって具体的にイメージできなかったので、これから学習を進めてアップデートしたいと思います。
即時関数
関数を定義すると同時に実行される構文
関数を呼び出す手間を省くことができます。
(function 関数名() {
console.log(num)
})(1)
()の中にfunctionから始まる関数定義をのものを配置することで、その関数を即実行できるようになります。
アロー関数
functionの記述を省略し、()=>という記述で関数を定義できる構文
書き比べてみます。
// 無名関数
const 変数名 = function(){ 処理 }
// アロー関数
const 変数名 = () => { 処理 }
まとめると
| 関数定義 | 構文 | 特徴 |
|---|---|---|
| 関数宣言 | function 関数名(引数){処理} | 標準的な関数の定義 |
| 関数式(無名関数) | function(引数){処理} | 関数名の重複を避けることができる。関数を多く使用するコードである時に使用する。 |
| 関数式(即時関数) | (function 関数名(引数){処理}) | 別途関数を定義する手間がない。流用する可能性のない関数を定義する時に使う。 |
| 関数式(アロー関数) | (引数) => {処理} | 無名関数や即時関数において、より省略した記述をしたい時に使用する。 |
JavaScriptにおけるセミコロンのルール
セミコロン(;)は記述の終わりを示すために付与する。
基本的には省略可ではあるが、開発現場によってルールが様々となっているようです。
セミコロンをつける場合
・変数の定義
const name = "Nako";
・メソッド
console.log(name);
・関数式（無名関数）
const good = function(){};
・関数式（即時関数）
(function good(){})();
・関数式（アロー関数）
const good = () => {};
セミコロンをつけない場合
・関数宣言
function good(){}
・if文
if(true){}els{}
セミコロンについては開発現場によるということのため、
学習段階ではあまり固定化した考えをもたないほうがよさそうです。
まとめ
JavaScriptでの関数の定義は大きく２種類
・関数宣言と関数式
・２つの大きな違いは読み込まれるタイミングの違い
セミコロンの有無は開発現場による