【Use Arrow Functions to Write Concise Anonymous Functions】フリーコードキャンプを日本語で解説!

フリーコードキャンプ

おいーす、もりたけです。

フリーコードキャンプを日本語で解説!の第115弾です。

JavaScript Algorithms and Data Structures Certification (300 hours)の中の、

Introduction to the ES6 Challengesの中の、

Use Arrow Functions to Write Concise Anonymous Functions

です。

さっそく見ていきましょう。

まずは本文から。

In JavaScript, we often don’t need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don’t need to name these functions because we do not reuse them anywhere else.

To achieve this, we often use the following syntax:

const myFunc = function() {
  const myVar = “value”;
  return myVar;
}

ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use arrow function syntax:

const myFunc = () => {
  const myVar = “value”;
  return myVar;
}

When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:

const myFunc = () => “value”;

This code will still return value by default.

 


Rewrite the function assigned to the variable magic which returns a new Date() to use arrow function syntax. Also make sure nothing is defined using the keyword var.


 

 

解説していきます。

今回はアロー関数についてです。

アロー関数とは、名前をつける必要がない(再利用する必要がない)関数を名前を省略して矢印で代用して書く方法です。

例を見てみましょう。

const myFunc = function() {
  const myVar = “value”;
  return myVar;
}
このような普通の関数を以下のようにアロー関数をつかって書き換えることができます。
const myFunc = () => {
  const myVar = “value”;
  return myVar;
}
さらに、本体がなく戻り値のみある場合は1行に短縮でき、returnや{}も省略できます。
const myFunc = () => “value”;
このコードはデフォルトでvalueを返します。
普通の関数を短縮できるのがアロー関数ってことです。
では課題を見てみましょう。
アロー関数を使ってnew Date()を返す変数magicに書き換えろ。
また、varを使ってはいけない。
単純にアロー関数を使って書き換えてあげるだけですね。
答えはこうです。
const magic = () => new Date();
1行でスッキリですね!
では次回!
タイトルとURLをコピーしました