Javascript

【JavaScript】アロー関数の書き方

  /

こんにちは、ともです。

この記事でアロー関数の書き方について理解をまとめて置こうと思います。

この記事の参考にしてものは

アロー関数とは

ES2015から追加されたアロー関数という関数記法があります。

アロー関数を利用することで

  • 関数を短く定義
  • thisを束縛せず定義

することが可能です。

function命令やFunctionオブジェクトを利用して関数を定義する方法について下記の記事にまとめてみました。

あわせて読みたい

基本的な定義

(arguments) => {statements}

let showName3 = (name, family) => {
    console.log('My Name is ' + name + ' ' + family);
};

このように(arguments) => {statement}の形式で記述することができます。

function記法で記述した場合に比べて、functionの記述が必要ないです。

(arguments) => statement

1行のステートメントの場合{}を省略することが可能です。

let showName = (name, family) => name + family;

console.log(showName('太郎', '田中'));

{}を省略した場合、returnを書かずとも値が返されます。

argument => {statements}

let showName = name => {
    return name + 'です。';
}

console.log(showName('太郎'));
//Out：太郎です。

このように引数が１つの場合は()を省略することが可能です。

argument => statement

let showName = name => name + 'です。'
console.log(showName('田中'));
// Out：田中です。

引数が１つで、コードも１行で書けるような短いものの場合は次のように書けます。

オブジェクトリテラルを返す場合

JavaScriptのデータ型にオブジェクトと呼ばれるものがあります。

そちらについてはオブジェクト初期化子 – JavaScript | MDNを参照してみてください。

記述の{}を省略する記法があると説明しましたが、この記述方法でオブジェクトリテラルを返す場合に問題があります。

let func = () => { hoge: 'ほげ' };
console.log(func());
// Out：undefined

これは{ hoge: 'ほげ' };の{}部分内を関数として解釈してしまっているためです。

この場合、

let func = () => ({ hoge: 'ほげ' });
console.log(func());

このように記述してあげることで、オブジェクトリテラルを返すことができます。

() => (Object literal);とすることで、オブジェクトリテラルを返すことが可能です。

まとめ

JavaScriptのアロー関数の記述方法について理解をまとめました。

引数部分や記述部分を少し省略することが可能で便利ですね。

JavaScriptの関数についてこれからも理解を進めていきたいです。

関連記事はこちら