[JavaScript] モダンな書き方

#分割代入
↓${myProfile.name}のように書くのが面倒くさいので、
nameを「どのオブジェクトから参照するか」を先に定義しています。

オブジェクトVer

const myProfile = {
  name: "たかし",
  age: 20,
}

const { name, age } = myProfile;
const message = `名前は${name}、${age}歳です。`;
console.log(message);

配列Ver

const myProfile = ["たかし", 20];
const [name, age] = myProfile;
const message = `名前は${name}、${age}歳です。`
console.log(message);

#デフォルト値

↓「こんにちは、undefinedさん！」と出力されます。

const sayHello = (name) => console.log(`こんにちは、${name}さん！`);
sayHello();

↓引数が設定されていなかった場合、undefinedと出力されてしまうのは望ましくないため、
↓デフォルト値を設定しておきます。

const sayHello = (name = "たかし") => console.log(`こんにちは、${name}さん！`);
sayHello();

#スプレッド構文
#####配列の展開
... + 配列という書き方をすると、中身の要素を順番に処理し、展開してくれます。

const arr1 = [1, 2];

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

#####まとめる
num1, numm2は順番通り受け取って、残りはいくつだろうと、まとめて配列で受け取る

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

#####配列のコピー
const arr6 = [...arr4];とすることで、arr4と全く同じ内容の配列を作ることができます。

const arr4 = [10, 20];
const arr5 = [30, 40];
const arr6 = [...arr4];
console.log(arr4, arr6);

#####配列の結合
const arr7 = [...arr4, ...arr5];とすることで、
arr4とarr5の要素を結合した、新たな配列を作ることができます。

const arr4 = [10, 20];
const arr5 = [30, 40];
const arr7 = [...arr4, ...arr5];
console.log(arr7);

#map
mapの基本的な構文

const nameArr = ["田中", "山田", "佐藤"];
const nameArr2 = nameArr.map((name) => {
  return name;
})
console.log(nameArr2);

↓配列をループ処理する

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

要素が何番目に出力されたかを把握したい場合には、第２引数にindexを追加します。

const nameArr = ["田中", "山田", "佐藤"];
nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です。`));

#filter
条件に一致したものだけ返却して、新しい配列を生成するような関数
returnの後に条件式を書いて、その条件に一致したものだけを返します。

↓奇数だけ取り出す

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

#三項演算子
toLocaleStringは、３桁区切りにして、金額表示のようにしてくれる関数です。
numberに対して使えます。

const num = 1300;
console.log(num.toLocaleString());

↓numがnumberだった場合、３桁区切り。
↓number以外だった場合、"数値を入力してください"と出力する

const num = "1300";

const formattedNum = typeof num === 'number' ? num.toLocaleString() : "数値を入力してください"
console.log(formattedNum);

↓return結果を判定する際にも三項演算子を使ったりします。

const checkSum = (num1, num2) => {
  return num1 + num2 > 100 ? "100を超えています。" : "許容範囲内です。";
}
console.log(checkSum(90, 9));

#論理演算子の正しい意味
|| の意味は、"または"ではなく、"左がfalseの場合、右を返す" です。

↓JavaScriptではnullはfalseを返すので、"金額未設定です"が返ってきます。

const num = null;
const fee = num || "金額未設定です";
console.log(fee);

&&の意味は、"左がtrueの場合、右を返す" です。

const num2 = 100;
const fee2 = num2 && "何か設定されました";
console.log(fee2);

num2 = nullの場合は、nullが返ってきます