Arrow FunctionはES6で導入されたJavaScriptの新しい関数記法で、簡潔に記述できる点が特徴です。従来のfunctionキーワードを使用する代わりに、=>記号を使います。

基本的な構文は以下の通りです：

const 関数名 = (引数) => { 処理 }

例：

const greet = (name) => {
    return `こんにちは、${name}さん！`;
};
console.log(greet("太郎")); // "こんにちは、太郎さん！"
    

使いどころ | 構文の詳細 | Arrow Functionとthis | 応用例 | 注意点

Arrow Functionの使いどころ

Arrow Functionは主に以下の場面で便利です：

• 簡潔な関数の記述
• コールバック関数の使用
• 配列の処理

例えば、配列の要素を2倍にする処理を簡潔に記述できます：

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]
    

構文の詳細

1つの引数がある場合

引数が1つだけの場合、括弧を省略できます。

const square = x => x * x;
console.log(square(4)); // 16
    

引数がない場合

引数がない場合、空の括弧を使用します。

const sayHello = () => "こんにちは！";
console.log(sayHello()); // "こんにちは！"
    

複数の引数がある場合

複数の引数がある場合、括弧で囲む必要があります。

const add = (a, b) => a + b;
console.log(add(3, 5)); // 8
    

Arrow Functionとthis

Arrow Functionの大きな特徴の1つは、thisの挙動です。通常の関数ではthisは呼び出し元によって変わりますが、Arrow Functionでは定義された場所でのthisを保持します。

例：

function TraditionalFunction() {
    this.name = "Traditional";
    setTimeout(function() {
        console.log(this.name); // undefined
    }, 100);
}

function ArrowFunction() {
    this.name = "Arrow";
    setTimeout(() => {
        console.log(this.name); // "Arrow"
    }, 100);
}

new TraditionalFunction();
new ArrowFunction();
    

Arrow Functionの応用例

1. 配列のフィルタリング

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
    

2. オブジェクトのプロパティをマッピング

const users = [
    { name: "太郎", age: 20 },
    { name: "花子", age: 25 }
];
const names = users.map(user => user.name);
console.log(names); // ["太郎", "花子"]
    

3. ネストされた関数の簡略化

const outerFunction = () => {
    const innerFunction = () => "Inner Function";
    return innerFunction();
};
console.log(outerFunction()); // "Inner Function"
    

Arrow Functionの注意点

Arrow Functionには以下のような制約があります：

• thisが動的に変化しないため、オブジェクトメソッドには不向き。
• argumentsオブジェクトを持たない。
• コンストラクタとして使用できない。

例：

// コンストラクタとしての使用はエラー
const Person = (name) => {
    this.name = name;
};
const john = new Person("John"); // TypeError
    

トップに戻る