JavaScriptのFunction(関数)について

JavaScriptの関数(function)はもらった引数を用いて処理を行うオブジェクトです。
関数の記述は「定義」と「実行」の2段階があります。

var hoge = function() {
  return 'HOGE';
}
hoge(); //=> 'HOGE'を返す

🍣 無名関数(即時関数)について

無名関数(即時関数)を使うとスコープ範囲を限定できるのでグローバルで変数、関数の衝突を避けることができます。

var a = 'a';

// 無名関数
(function() {
  var a = 'new a';
  var b = 'b';

  console.log(a); // => 'new a'
})();

console.info(a); //=> 'a' 無名関数とはスコープが異なる
console.info(b); //=> エラーになる

無名関数を利用したクラスの定義

無名関数を利用してクラス的なオブジェクトを定義できます。

// 無名関数
(function() {
  function Hoge() {
    console.log(Constructor);
  }
  Hoge.prototype.instanceMethod = function() {
    console.log(Instance Method);
  }
  Hoge.classMethod = function() {
    console.log(Class(Static) Method);
  }
  window.Hoge = Hoge;
})();

var hoge = new Hoge();
hoge.instanceMethod(); // => Instance Method
Hoge.classMethod(); // => Class(Static) Method

プライベートメソッドの模倣

クロージャを利用してプライベートメソッド、変数を模倣するサンプルです。

var generateCounter = function() {
  var privateCounter = 0;

  function changeBy(val) {
    privateCounter += val;
  }

  return {
    increase: function() {
      changeBy(1);
    },
    decrease: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
};

var counter1 = generateCounter();
var counter2 = generateCounter();
console.log(counter1.value()); //=> 0
counter1.increase();
counter1.increase();
console.log(counter1.value()); //=> 2
counter1.decrease();
console.log(counter1.value()); //=> 1
console.log(counter2.value()); //=> 0

😼 functionが存在するかチェックする

JavaScriptでfunction(関数)が存在するかをチェックする場合は次のようなコードとなります。

if ( typeof sample == "function") {
  sample();
}

😎 補足：importで別名を設定

インポートしたメソッドに名前空間を設定できます。

import * as myModule from "my-module";

// 使い方
myModule.hoge();

🗻 参考リンク

• これだけ覚えるべきJSの基礎 · takahashiakira/tech_for_web Wiki
• import - JavaScript
• javascriptで関数が存在するかどうかをチェックする方法

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍