#Javascriptの関数定義とは
Javascriptの関数定義とは、Rubyでいうメソッドの部分になります。
以下を参考に考えてみましょう。
def メソッド名
end
Rubyではメソッドを関数として定義することができます。
一方でJavaScriptの場合は下記のような記述方法をとります。
function 関数名(引数) {
// 処理
}
つまり、Javascriptでは、functionを使用して関数の定義をすることができます。
functionの後に関数名を記述し、( )内に引数を取ることができるのがJavaScriptの記法になります。
そして、{ }の中に実行したい処理を記述していきます。
Rubyを学習したことのある方は引数などのイメージを持つことができると思います。
それでは、実際にコードを見ながらJavaScriptの関数定義を見ていきましょう。
function hello () {
console.log('こんにちは')
}
hello();
このように記述することで、コンソール上に"こんにちは"と表示されます。
#関数宣言と関数式の記述方法
上記で説明した記法は関数宣言となっており、この記述方法の他に関数式があります。
では、関数宣言と関数式を比べてみましょう。
・関数宣言
function 関数名(引数) {
// 処理
}
・関数式
変数 = function(引数){
// 処理
}
関数式では、関数宣言とは異なり、「function(引数){ }という無名関数を「変数」に代入して関数定義をする方法となります。
#関数宣言と関数式の違いについて理解する
それでは、関数宣言と関数式の違いについて理解しましょう。
両者の違いを理解しておくことで、JavaScriptでコードを記述するときに明確に分けて使用していくことができます。
まず、ここでJavaScriptの仕組みをしっておくことが必要になります。JavaScriptでは、コードは上から下に読み込まれるため、コードを記述していくときに規則があります。
まず、関数式から見ていきましょう
hello('jon');
const hello = function(name){
console.log('hello' + name)
}
このように記述した場合では、コンソール上で「hello jon」と表示はされずにエラーが起きてしまいます。
この理由は、関数式では上から関数定義が読み込まれるため、一行目に関数定義をする必要があります。
const hello = function(name){
console.log('hello' + name)
}
hello('jon');
では関数宣言ではエラーは起こるのでしょうか？
関数宣言ではコードが先に読み込まれるため、下記のような記述方法で読み込まれます。
hello('jon');
function hello(name){
console.log('hello' + name)
}
関数宣言では、後から関数定義をしてもコンソール上ではエラーが起こらず出力されます。
#アロー関数で記述を省略する
アロー関数では、「function」を省略して記述することができます。記述を簡単にすることができるので、簡略化してコードの記述をしていきたい人は使用してみて下さい。
では、実際にコードを見てイメージを持ちましょう。
//アロー関数なしの記述方法
const hello = function(name){
console.log('hello' + name)
}
hello('jon');
//アロー関数の記述方法
const hello = (name) => {
console.log('hello' + name)
}
hello('jon');
//処理が一行で完結する場合
const hello = (name) => console.log('hello' + name)
hello('jon');
アロー関数では上記のように、functionを省略する代わりに、**( ) =>**を使用して関数定義ができます。
関数定義はこのように記述していくことができます。これからJavaScriptを使用してコード記述するときは、関数定義が基本になるので関数宣言や関数式などを覚えて使用していきましょう。