Table of Contents
「=> ってなんだ?」と思った人は、ちょっと古い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