最近のJavascriptわかんねってなった人向けチートシート

constとlet

constとletはそれぞれ定数と変数の宣言であり、基本的にvarと読み替えて良いが注意点あり。

const

constは定数の宣言。
再代入、再宣言が不可。

const hoge = 'hoge';
hoge = 'fuga';
// Error

let

letは変数の宣言
再宣言が不可

let hoge = 'hoge';
hoge = 'fuga';
// OK

let hoge = 'hoge';
let hoge = 'fuga';
// Error

アロー関数() => {}

アロー関数の特徴は、

• 無名関数
• thisを継承できる
• ワンライナーで書ける

基本形

const hoge = (fuga) => {
    return fuga;
};

return省略

ワンライナーで書くことができる。

const hoge = (fuga) => fuga;

スプレッド構文...

スプレッド構文により、配列やオブジェクトの結合が簡単になる。

配列

const array1 = ['A', 'B', 'C'];
const array2 = ['D', 'E', 'F'];

const array3 = [...array1, ...array2];
// ['A', 'B', 'C', 'D', 'E', 'F']

オブジェクト

const obj1 = { hoge: 'hoge' };
const obj2 = { fuga: 'fuga' };

const obj3 = { ...obj1, ...obj2 };
console.log(obj3);
// { hoge: 'hoge', fuga: 'fuga' }

分割代入

オブジェクト、配列から変数への受け渡しが簡単にできる。

変数代入（オブジェクト）

const obj = { hoge: 'hoge', fuga: 'fuga' };
const { hoge, fuga } = obj;
// const hoge = obj.hoge;
// const fuga = obj.fuga;

変数代入（配列）

const array = ['hoge', 'fuga'];
const [hoge, fuga] = array;
// const hoge = array[0];
// const fuga = array[1];

引数代入

関数の引数に対しても同様に省略可能。

const objarray = [
    { hoge: 'hoge1', fuga: 'fuga1' },
    { hoge: 'hoge2', fuga: 'fuga2' },
    { hoge: 'hoge3', fuga: 'fuga3' }
];

objarray.forEach(({ hoge, fuga }) => {
    console.log(hoge);
    console.log(fuga);
});
// objarray.forEach((n) => {
//     const hoge = n.hoge;
//     const fuga = n.fuga;
//     console.log(hoge);
//     console.log(fuga);
// });

オブジェクト代入

オブジェクトのキーと変数名が同じ場合、省略可能。

const hoge = 'hoge';
const fuga = 'fuga';
const obj = { hoge, fuga };
// const obj = { hoge: hoge, fuga: fuga };

文字列結合${}

文字列結合に+は使わない。

const hoge = 'hoge';
const str = `this is ${hoge}.`;
// const str = 'this is ' + hoge + '.';