JavaScript(ES6)メモ

「=> ってなんだ?」と思った人は、ちょっと古いJavaScript使いでしょう。アロー関数と呼ばれ、ECMAScript2015で導入された無名関数の省略記法

自覚はなかったのですが、ちょっと古いJavaScript使いなってしまったのでJavaScriptできになった書き方などをメモしたい

無名関数(旧)

var fn = function(x) {
  console.log(x);
};

無名関数(ECMAScript2015 es6 アロー関数)

var fn = x => {
  console.log(x);
};
  • 中括弧の省略も可能
var fn = x =>  console.log(x);

mapを使って配列内のデータを加工して、新しい配列を作る

var numArr = [1, 2, 3, 4, 5];

let res = numArr.map(num => {
  // 2倍にして加工する
  return num * 2;
});

console.log(res); // 結果:[2, 4, 6, 8, 10]

filterを使って特定の配列内のデータを削除して、新しい配列を作る

var numArr = [1, 2, 3, 4, 5];
let res = numArr.filter(num => {
  // 偶数だけにする。必要なデータのときはtrue、不要なデータはfalse
  return num % 2 == 0;
});

const / let / var

以前はvarのスコープがグローバルのため、変数の汚染がひどい、現在はローカルスコープをあつかうlet、定数を扱うconstが新たに定義されている

varとletの上書きについて

const test = () => {
  var hoge = 'hoge';
  let foo = 'foo';
  let bar = 'bar';
  if (true) {
    var hoge = 'hoge2';
    foo = 'foo2';
    let bar = 'bar2';
  }
  console.log(hoge);  // hoge2
  console.log(foo);   // foo2
  console.log(bar);   // bar
}
  • hoge、fooはそれぞれ上書きされます。barはif文の中でも再定義している。この場合、別変数として扱われ、ローカルスコープの扱いになる。

letの同じスコープで定義して例外になる例

  • varはどこでも再定義が可能、しかしletは同じスコープ内で定義すると例外が発生する
var foo = 'foo';
var foo = 'foo2'; // OK 

let bar = 'bar';  
let bar = 'bar2'; // NG    Uncaught SyntaxError: Identifier 'bar' has already been declared

constを変更しようとした例

  • constはletと同じようにローカルスコープを扱うが、定数なので変更が不可能です。
const foo = 'foo'
foo = 'foo'       // NG   VM3083:2 Uncaught TypeError: Assignment to constant variable.at <anonymous>:2:5