JavaScriptで勉強になったこと「スプレッド構文」「map関数」「三項演算子」

未分類

2023.05.27

JavaScriptを勉強していて、知らなかった構文や記法をまとめます。

スプレッド構文

スプレッド構文は「…」とドット３つをつける書き方
「…配列」と書くことで、配列の要素を展開することができます。

let array = [1, 2, 3];
console.log(...array); // 1 2 3

また、配列の中身をまとめて渡したり、配列のコピーもできる

let array1 = [1, 2, 3];

//array2にarray1をコピー
let array2 = [...array1];

console.log(...array2); // 1 2 3

「そんなの『 let array2 = array1;』って書けば良くない？」と思いますが、この書き方だと参照まで引き継がれてしまいます。

let array1 = [1, 2, 3];

//array2にarray1をコピー
let array2 = array1;

//array2にだけ777を代入
array2[0] = 777;

//array1[0]の値も書き変わってしまう
console.log(array1); //[777, 2, 3]
console.log(array2); //[777, 2, 3]

スプレッド構文を使って配列をコピーすれば、参照が引き継がれないので、予期せぬバグを防ぐことができます。

map関数

map関数を使うと、for文の代わりに同じ内容を１行で書くことができます。

//配列を定義
const nameArray = ["斎藤", "田淵", "鈴木"];

//for文を使った場合
for (let index = 0; index < nameArray.length; index++) {
  console.log(`${index + 1}番目は${nameArray[index]}さんです`);
}

//map関数を使った場合
nameArray.map((name, index) => console.log(`${index + 1}番目は${name}さんです`));

//出力結果
//1番目は斎藤さんです 
//2番目は田淵さんです 
//3番目は鈴木さんです

filter関数

「return 条件式」と書くことで、条件式がtrueのものだけを返すことができます。

三項演算子

「条件 ? 条件がtrueの時 : 条件がfalseの時」のように、?, :を使った書き方で、if elseの文を１行で書くことができます。

//if elseを使った場合
const judge = (score) => {
  if (score > 60) {
    return "合格です";
  } else {
    return "不合格です";
  }
};
console.log(judge(70)); //合格です
console.log(judge(60)); //不合格です


//三項演算子を使った場合
const judge = (score) => {
  return score > 60 ? "合格です" : "不合格です";
};
console.log(judge(70)); //合格です
console.log(judge(60)); //不合格です

この三項演算子を使った書き方がすごくいいなと思いました！こんなにスッキリ書くことができるなんてすごい。

以上、JavaScriptで勉強になったことでした。