Search

検索したいワードを入力してください

2019年04月10日

JavaScriptの無名関数の使い方やメリットの解説

今回はJavaScriptでの無名関数についてご紹介しています。無名関数の基本的な書き方と使い方や無名関数のメリット、即時関数としての使用方法から使用される理由についてもご紹介しています。無名関数に興味のあるかたは是非読んでみてください。

JavaScriptの無名関数とは

一連の処理をまとめて定義したものが関数です。何度も同じ処理を行う時にメインの処理のソースコードから切り離すことで、ソースコードの可読性が増しメンテナンス性が上がります。

今回は無名関数にスポットを当ててご紹介しますが、JavaScriptでの関数定義の方法は複数ありますので、ここでおさらいしておきます。

関数宣言

他のプログラミング言語でもよく見かける関数名を付けて定義する方法です。呼び出す場合は関数名を使用します。

function example() {
//一連の処理
}


上記の例では「example」という関数名を付けて定義しています。

無名関数

関数名を付けずに式として定義する方法です。

var exvar = function(){
//一連の処理
}


上記の例では「exvar 」という変数に代入する形で関数を定義しています。このように定義した関数を呼び出す場合は、変数名を使用します。

無名関数のメリット

関数は何度も同じ処理を行う時にメインの処理のソースコードから切り離すことで、ソースコードの可読性が増しメンテナンス性が上がるとご紹介しました。

無名関数として定義すると、まとまった処理をメインの処理のソースコードから切り離すことができるメリットがあります。何度も同じ処理は行わないが、可読性を上げるためなどの理由で、まとめておきたい処理がある場合に便利です。

また関数名を決める必要がないというのもメリットです。関数の引数として無名関数を使用できるというメリットもあります。

無名関数の基本的な書き方と使い方

無名関数の基本的な書き方と使い方をご紹介します。

setTimeout関数で引数に無名関数を指定する方法

無名関数のメリットとして、関数の引数として無名関数を使用できるとご紹介しました。JavaScriptでのタイマー処理で用いられる関数の1つであるsetTimeout関数での無名関数の使い方をご紹介します。

setTimeout(function(){
//一連の処理
},3000);


これは以下のように書いても同じ処理になります。

var exvar = function(){
//一連の処理
};
setTimeout(exvar,3000);


関数定義を用いて同じ処理を記述すると以下のようになります。。

function example(){
//一連の処理
};
setTimeout(example(),3000);

即時関数で引数に無名関数を指定する方法

関数定義に()を付加することで、その場で実行することができます。これを即時関数と呼びます。即時関数はすぐに実行され、再利用もないため無名関数として定義されることが多いです。定義例をご紹介します。

var exvar = (function(){
//一連の処理
}());
console.log(exvar);


この例では変数exvarに無名関数の実行結果が入っていて、それをコンソール出力しています。即時関数を使用しない場合は以下のようになります。

var exvar = function(){
//一連の処理
};
console.log(exvar());


この例では変数exvarをコンソール出力する時点で、無名関数が実行され実行結果が格納されます。

即時関数を使用する理由はJavaScriptの変数スコープにあり

JavaScriptにおける変数のスコープ(有効範囲)は、以前はグローバルと関数内の2種類でした。違いを下記のコードでご紹介します。

変数スコープの違いの例

変数exvarを関数外のグローバルと関数内で定義して実行した結果です。

var exvar ="hello JavaScript Global";
console.log(exvar);
(function (){
var exvar ="hello JavaScript Function";
console.log(exvar);
}())
console.log(exvar);

上記のコードの実行結果は以下のようになります。

hello JavaScript Global
hello JavaScript Function
hello JavaScript Global

グローバル変数は少ない方がいい

関数内で定義された変数の有効範囲は、関数内に限定されるため同じ変数名を使用していても関数外の処理の影響を受けません。一度しか実行しない処理で変数を使用する場合、即時関数を使用せずにコーディングをするとグローバル変数を定義することになってしまいます。

そのグローバル変数は後の処理で参照されることがないことが多いので好ましくありません。そこでグローバル変数の定義をむやみに増やすことを抑制するために即時関数を使用します。

現在のJavaScriptではletとconstが使えます

変数定義で使用できるletとconstは変数スコープをブロック({~})内に限定できるため即時関数を使う必要性は少なくなりました。上記のコードをletで書き換えると以下のようになります。

var exvar ="hello JavaScript Global";
console.log(exvar);
{
let exvar ="hello JavaScript Function";
console.log(exvar);
}
console.log(exvar);

実行結果は同じです。

hello JavaScript Global
hello JavaScript Function
hello JavaScript Global

無名関数を使用する際の注意点

functionキーワードから始まる定義を書くことはできない

function(){
//一連の処理
}());


上記のようにfunctionキーワードから始まる記述は、関数宣言とみなされ関数名の記述がないのでエラーとなってしまいます。無名関数は式として変数に代入するか、関数の引数として指定する必要があります。

即時関数を再度呼び出すことはできない

即時関数は関数としては再利用できません。

var exvar=function(p1){
console.log(p1);
}('hello JavaScript');
console.log(exvar('hello'));


上記のコードを実行するとコンソール出力には

hello JavaScript
Uncaught TypeError: exvar is not a function


と表示されexvarは関数ではないので呼び出せないというエラーとなります。exvarは変数としては有効なのでその値を参照でます。

var exvar=function(p1){
console.log(p1);
return p1;
}('hello JavaScript');
console.log(exvar);


上記のコードを実行するとコンソール出力にはエラーとはならずに表示されます。


hello JavaScript
hello JavaScript

JavaScriptではよく見かける無名関数をマスターしよう

ここまでJavaScriptにおける無名関数のメリットや、書き方と使い方についてご紹介しました。無名関数はJavaScriptでは頻繁に使用されます。無名関数の使い方をマスターすれば、他の人がコーディングしたJavaScriptのソースコードの理解もはかどるようになります。

興味を持たれた方は実際に無名関数をコーディングして、実行結果を確認してみてください。JavaScriptをコーディングして、実行結果を確認できるWebサービスが複数あるのでそうしたサービスを利用するのがおすすめです。

1つリンクをご紹介するので興味があればクリックしてみてください。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related