概要

Javascriptを使う上で便利な書き方をまとめます。ここで紹介する書き方を使えば、コードもスッキリしますし無駄な記述も減るのでぜひ使ってみてください。

?. 演算子

[新しい書き方]

const user_1 = { name: "太郎" };
console.log(user_1?.name);

[古い書き方]

const user_1 = { name: "太郎" };
if (user_1 !== null || user_1 !== undefined) {
  console.log(user_1.name);
}

?? 演算子

[新しい書き方]

const user_2 = null;
console.log(user_2 ?? console.log("値がありません"));

[古い書き方]

const user_2 = null;
if (user_2 === null || user_2 === undefined) {
  console.log("値がありません");
}

&& 演算子

[新しい書き方]

const isTrue = true;
isTrue && console.log("&&演算子！");

|| 演算子

[新しい書き方]

const isExist = false;
isExist || console.log("||演算子！");

スプレッド構文

配列編

配列のコピー

配列のコピーも可能です。

const array_1 = [1, 2, 3, 4, 5];
const array_2 = [6, 7, 8];
const array_copy_2 = [...array_1, ...array_2];
console.log(array_copy_2); => [1, 2, 3, 4, 5, 6]

コピーした配列に要素を加えても、コピー元の配列には影響を与えません。これはメモリ上のアドレス（変数を格納している場所を示すタグ）が異なるからです。

const array_3 = [1, 2, 3, 4, 5];
const array_4 = [...array_3];
array_4.push(6);
console.log(array_3); => [ 1, 2, 3, 4, 5 ]
console.log(array_4); => [ 1, 2, 3, 4, 5, 6 ]

多重配列のコピー（シャローコピーに注意！！）

ネストさせた配列の場合、1段階の深さ（spec以下はコピーされない）までしか行われません。ですので、2段階目の変数の中身を更新すると、コピー元の値も変更されてしまいます。

const array_5 = [
  [1, 2],
  [3, 4],
];
const array_6 = [...array_5];
array_6[0][0] = 5;
console.log(array_5); => [ [ 5, 2 ], [ 3, 4 ] ] え!? コピー元も変わっている!
console.log(array_6); => [ [ 5, 2 ], [ 3, 4 ] ] 

オブジェクト編

オブジェクトのコピー

配列同様にオブジェクトのコピーも可能です。

const user = {
  name: "John",
  age: 26,
};

const user_copy = { ...user };
console.log(user_copy); => { name: 'John', age: 26 }

ネストしたオブジェクトのコピー（シャローコピーに注意！！）

ネストさせたオブジェクトの場合、1段階の深さ（spec以下はコピーされない）までしか行われません。ですので、2段階目の変数の中身を更新すると、コピー元の値も変更されてしまいます。

const user_7 = {
  name: "John",
  spec: {
    height: 180,
    weight: 75,
  },
};

const user_7_copy = { ...user_7 };
user_7_copy.name = "山田";
user_7_copy.spec.height = 160;
console.log(user_7); => { name: 'John', spec: { height: 160, weight: 75 } } え!? コピー元も変わっている!
console.log(user_7_copy); => { name: '山田', spec: { height: 160, weight: 75 } }

JavascriptのオブジェクトをJSON文字列に変換する方法だと、ディープコピーが可能です。

const user_8 = {
  name: "John",
  spec: {
    height: 180,
    weight: 75,
  },
};

const user_8_copy = JSON.parse(JSON.stringify(user_8));
user_8_copy.name = "山田";
user_8_copy.spec.height = 160;
console.log(user_8);
console.log(user_8_copy);

分割代入

配列編

[新しい書き方]

const user_5 = ["太郎", "二郎", "三郎"];
const [a, b, c] = user_5;
console.log(a); => "太郎"
console.log(b); => "二郎"
console.log(c); => "三郎"

配列のコピー

const array = [1, 2, 3, 4, 5];
const array_copy = [...array];
console.log(array_copy);

オブジェクト編

const user_3 = {
  name: "太郎",
  age: 26,
};

const { name, age } = user_3;
console.log(name); => "太郎"
console.log(age); => 26

解説は以上です！

参考

https://zenn.dev/luvmini511/articles/722cb85067d4e9