React前に押さえておくべきJavaScript知識

アロー関数でオブジェクトを返す時

丸括弧の中にオブジェクトリテラルを書く

const fn = num => ({ result: num });

mapメソッドのコールバック関数の引数について

map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

const arry = [10, 20, 30, 40];
const newArry = arry.map((val, i, arry) => val * 2);
// val: 配列内で現在処理中の要素
// i: 現在処理中の要素の配列内における添字
// arry: map() が呼び出された配列                    

分割代入

オブジェクトの場合はプロパティで管理されるため、順番通りである必要ない

const { z, x } = { x: "obj1", y: "obj2", z: "obj3" };
console.log(x); // => "obj1"
console.log(z); // => "obj3"              

スプレット演算子

別の新しい配列を作成することができる

let arr1 = [1, 2, 3];
let arr2 = arr1;
// 参照先が同じなので
console.log(arr2 === arr1); // => true
let arr3 = [...arr1];
console.log(arr3 === arr1); // => false

残余引数

関数が不定数の引数を配列として受け入れることができる

const restA = (...argA) => console.log(argA);
restA(1, 2, 3)
 // => [1, 2, 3]

const restB = (n, ...argB) => console.log(argB);
restA(1, 2, 3)
// => [2, 3]

非同期処理(await/async)

async function 宣言は非同期関数を宣言し、その中で await キーワードを使うことができる。すると、プロミスベースの非同期の動作を、プロミスチェーンを明示的に構成する必要なく、よりすっきりとした方法で書くことができる。

let num = 0;

init(); // => 1

// awaitをつけることで resolve が呼ばれるまでまってくれる
async function init() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      num = 1;
      resolve(num) // numがresultに入る
     }, 2000);
  })
  console.log(result);
}