公開日

【JavaScript】関数の書き方

この記事では、JavaScriptでの関数の基本的な書き方からES6で導入されたアロー関数まで、様々な関数の定義方法について解説します。関数はJavaScriptにおいて非常に重要な要素であり、コードを効率的かつ簡潔に記述するために役立ちます。

著者
  • avatar
    名前
    Lan oo
    Twitter
    @Lan_o_sir
  • Freelance IT Engineer
目次

関数宣言(Function Declarations)

関数宣言は、functionキーワードを使って関数を定義する方法です。この方法では、関数名を指定して関数を宣言します。関数宣言は関数スコープまたはグローバルスコープに配置されます。関数スコープとは、その関数内でのみアクセス可能なスコープを指し、グローバルスコープはどこからでもアクセス可能なスコープを意味します。関数宣言はホイスティングされるため、コード内のどこからでも呼び出すことが可能です。

console.log(greet('Alice')); // "Hello, Alice!"
function greet(name) {
    return `Hello, ${name}!`;
}

関数式(Function Expressions)

関数式では、関数を変数に割り当てることができます。これは無名関数または匿名関数としても知られています。関数式は実行時に評価されるため、定義前には呼び出せません。

// console.log(greet('Alice')); => 宣言前に実行するとエラーになる
const greet = function(name) {
    return `Hello, ${name}!`;
};
console.log(greet('Alice')); // "Hello, Alice!"

アロー関数(Arrow Functions)

ES6で導入されたアロー関数は、より短く簡潔な構文で関数を記述できます。アロー関数は、thisの挙動が従来の関数と異なります。アロー関数内のthisは、その関数が定義された時点でのコンテキストを保持し、実行時のコンテキストには影響されません。これは特にコールバック関数やイベントハンドラー内でthisを扱う際に有用です。

const person = {
	name: "Alice",
	greet: function () {
		console.log(`Hello, ${this.name}!`);
	},
};
person.greet(); // "Hello, Alice!"

即時実行関数式(IIFE: Immediately Invoked Function Expressions)

即時実行関数式は、定義された直後に実行される関数です。これは、プライベート変数や関数を作成する際に役立ちます。

(function () {
	const message = "Hello, Alice!";
	console.log(message);
})(); // "Hello, Alice!"

コンストラクタ関数(Constructor Function)

JavaScriptでは、newキーワードを使用して新しいオブジェクトを作成するためのコンストラクタ関数を定義することができます。これは主にオブジェクト指向プログラミングで使用されます。

function Person(name) {
    this.name = name;
    this.greet = function() {
        return `Hello, ${this.name}!`;
    };
}
const alice = new Person('Alice');
console.log(alice.greet()); // "Hello, Alice!"

まとめ

JavaScriptの関数は柔軟性が高く、コードの再利用性を高めるために非常に役立ちます。関数宣言、関数式、アロー関数、即時実行関数式、コンストラクタ関数といった様々な関数の定義方法を理解し、適切な場面で使用することが重要です。また、関数スコープ、グローバルスコープ、およびアロー関数のthisの挙動を理解することで、より効果的なコードを記述することができます。