1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【JavaScript】関数多くないですか!?

Posted at

はじめに

こんばんは、プログラミング初心者だいごです。
最近、ちょっとずつJavaScriptの学習を始めています。
学習を進める中でいっぱい関数っていう言葉が出てきます。
関数宣言やら関数式、無名関数などいろんろ出てきて頭がパンク寸前ですw
そんなこんなで今回は関数を簡単にまとめていきます。

様々な関数

今回はこのラインナップです。
1個ずつ簡単に解説していきます。

  • 関数宣言
  • 関数式
  • 無名関数
  • 即時関数
  • アロー関数

関数宣言

function 関数名(引数){
  // 関数内の処理
}

王道中の王道!これが関数宣言です。
特徴としては関数の定義がfunctionから始まるところです。
この関数宣言は、宣言を含むスコープが実行されるまでにfunctionオブジェクトが生成されます。

関数式

変数 = function(引数){
  // 関数内の処理
}

はい!これが関数式です。
特徴としては、無名の関数を変数に定義または代入して関数を定義するところです。
また、この関数式は、その式が実行されるときにfunctionオブジェクトが生成されます。
つまり、関数宣言との違いは、記述の仕方とオブジェクトが生成されるタイミングになります。

無名関数

const countNum = function(num) {
  console.log(num)
}
countNum(1)

はい!これが無名関数です。
関数式と一緒の記述ですね。
厳密に言えば、function(){}が無名関数と呼ばれる部分になります。
この無名関数は、より簡潔なコードを書けるというメリットがあります。
また、特徴としては、関数を多く使用するコードであるときに使用すること関数名の重複を避けることができることです。

即時関数

(function countNum(num) {
  console.log(num)
})(1)

なんか()が多い!って印象ですね。
これが即時関数です。
この関数は、名前通り関数を定義すると同時に実行される構文です。
()の中に無名関数を記述することで、その関数を即実行することができるようになります。
特徴としては、流用する可能性のない関数を定義するときに使用することと別途関数を定義する手間がないことです。

アロー関数

const 変数名 = () => {
  処理
}

近年使用される事例が増えてきてる噂の関数、これがアロー関数です。
この関数は、functionの記述を省略し、その代わりに()=>という記述によって関数を定義する構文です。
特徴としては、無名関数または即時関数において、より省略した記述をしたい時に使用できることです。

終わりに

長くなりましたがなんとかまとめることができました。
それぞれの関数に良さがあるので、使い分けれたらベストだと感じました。
これからも日々の学びを発信していくのでよかったらご覧ください。
ご指摘・コメント等お待ちしてます。
ありがとうございました。

1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?