Reactを学ぶ前のJavaScriptのお作法をおさらい(ES6)

経緯

Reactを学び直ししています。いや、ちゃんと学んだことはなかったので初学に近いです。これをもとに一丁前にできるようになろうかと思っております。そのためにもJavaScirptのES6な書き方を身につけるべくReactで使う考え方や構文、メソッドをおさらいしています。
これはUdemyの特定の動画を見ながら復習しているので、その動画をやったことある方は「あれね」とわかるかなと思います。

変数

変数	再宣言	再代入	スコープ
var	◯	◯	関数内
let	×	◯	ブロック内
const	×	×	ブロック内

※まあ、varは使わないに越したことないということですね

分割代入

普通の代入

const myProfile = {name : "hoge" , age : 11};

const massage1 = `私の名前は${myProfile.name}です。年齢は${myProfile.age}です`;

オブジェクトの場合の分割代入

const {name2, age2} = myProfile;

const massage2 = `私の名前は${name2}です。年齢は${age2}です`;

配列の場合の分割代入

//配列で分割代入する場合は順番が大切になってくるのでそこを間違えないよう注意
const [name3, age3] = myProfile;
const massage3 = `私の名前は${name3}です。年齢は${age3}です`;

初期値(デフォルト値)

const sayHello = (name = "ゲスト") => console.log(`Hello,${name}さん`)

sayHello()

// 関数への引数が未設定の場合、
// (上記のコードだと)"ゲスト"が自動で入力されて
// Hello,ゲストさん
// となる

スプレッド構文

配列の中身が可変長となっている時に全ての要素を自動で処理してくれる

const arr1 = [2, 5, 9];

const sumFunc = (num1, num2, num3) => console.log(num1 + num2+  num3);

// 処理A
sumFunc(arr1[0], arr1[1], arr1[2]);
// 処理B
sumFunc(...arr1);

// 16(処理A)
// 16(処理B)

const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2;

console.log(num1);
console.log(num2);
console.log(arr3);

// 3つ目で分割代入される値は配列としてまとめて受け取る
// 受け渡し元は中身が５つあるが、分割代入先では3つしか変数がなく、3つ目で全ての値を配列として受け取る
// 1
// 2
// (3) [3, 4, 5]

スプレッド構文でコピーした配列は参照渡しにならず、値渡しの扱いになる。

map、filterでの配列の処理

const nameArr = ["田中", "山田", "加藤"];

下記のmapメソッドはFor文で回しているコメントアウトしている内容と同じ
// for (let index = 0; index < nameArr.length; index++) {
//   console.log(nameArr[index])
// }

const nameArr2 = nameArr.map((name) => {
  return name;
});

// console.log(nameArr2);

nameArr.map((name)=> console.log(name))


// 田中 
// 山田 
// 加藤 

mapメソッドで第２引数を与えるとそこにindex番号を取ることができる

index番号を取得してmap処理

const nameArr = ["ito", "suzuki", "yamamoto"];
nameArr.map((name, i) => console.log(`配列の${i}番目は${name}です`));

// 配列の0番目はitoです 
// 配列の1番目はsuzukiです 
// 配列の2番目はyamamotoです 

filterメソッド

returnに条件式を記述する。
下の処理では条件式に対してTrueだった場合に値を返す。
その返した値は新しい配列にして返す。
下記の場合は

const numArr = [1, 2, 3, 4, 5, 6, 7];
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
});

console.log(newNumArr);

論理演算子

パイプライン（||）のとき

const flg1 = false;
const flg2 = null;

const hoge = flg1 || "ほげー！";

console.log(hoge);
// パイプライン2つの実際にやっている処理は
// 左側の処理がfalseならば右側の処理を返す

const fuga = flg1 || flg2 || "ふがー！";
console.log(fuga);
// ちなみにnullの判定もfalseになる

const flg1 = true;
const flg2 = true;

const hoge = flg1 && "とぅるーん！！";

console.log(hoge);
// アンパサンド(&)2つの際にやっている処理は
// 左側の処理がtrueならば右側の処理を返す

const fuga = flg1 && flg2 && "とぅっとぅるーん!!";
console.log(fuga);


// とぅるーん！！ 
// とぅっとぅるーん!! 

処理が左から右へ移っていく！

reduce

reduceって言葉の意味で言うと「減らす」なんだけど、なぜ合計値になるのか。減らしてんじゃないよ

reduce

const testPoint = [40,70,80]

const sum = testPoint.reduce(((pre, cur) => pre + cur))

console.log(`sum is ${sum}`) 
//sum is 190

reduceメソッドは第２引数が与えられた場合、初期値としてそれを加えることができます。下の処理だとpreに50が入力されることになります

reduce(第２引数ありの場合)

const testPoint2 = [10,30,60]

const sum2 = testPoint2.reduce(((pre, cur) => pre + cur),50)

console.log(`sum2 is ${sum2}`) 
//sum2 is 150

追加メモ(ここら辺のショートハンドを理解して使えるようにしたい。特にfin)