これは何？

気になった・実際に使ってみたいと思った Javascriptのテクニックをまとめてみました！！

参考にした記事

配列の初期化

配列のlengthプロパティを0にすることで、配列の中身を空にすることができる。

let array = [0, 1, 2, 3, 4]

array.length = 0
console.log(array); //[]

また、他の配列の初期化方法として、単に[]を代入する方法がある。

let array = ["a", "b", "c"];

array=[];
console.log(array); //[]

lengthを0にする場合との違いは、再代入するのか・ただ、配列の中身を変更するのかである
letではなく、constを使用すると分かりやすい。

// lengthの場合
const array1 = [0, 1, 2, 3, 4]

array1.length = 0
console.log(array1); //[]

// 再代入の場合
const array2 = ["a", "b", "c"];

array2=[]; // Uncaught TypeError: Assignment to constant variable. とエラーが出る
console.log(array2);

constは、再代入できないため、[]を代入する方法だとエラーが出る。
const、letの違いはこちらの記事でまとめています。

条件をシンプルに

以下のようなコードで、dataプロパティが確実に存在するか確認するために、プロパティ名が重複してしまうケースがある。
上記の重複を解決するために、?. = オプショナルチェイニングを使用するとコードが短く簡潔になり重複もなくなる。

// プロパティ名が重複してしまう場合
if(data && data.name && data.name.length === 4) {
  ...
}

// オプショナルチェイニング
if(data?.name?.length === 4) {
  ...
}

分割代入

分割代入を使うことで、「配列の要素」や「オブジェクトのプロパティ」を分解・分割して、変数や定数に値を代入することができる。
分割代入を使用することで、タイプ量と行数を削減できる！

オブジェクトの場合

const obj = { firstName: "Hoge", lastName: "Jhon" };

// 通常
const firstName = obj.firstName;
const lastName = obj.lastName;

console.log(firstName); // Hoge
console.log(lastName); // Jhon

// 分割代入の場合
// １行でかける
const { firstName, lastName } = obj;

console.log(firstName); // Hoge
console.log(lastName); // Jhon

配列の場合

const arr = ["Hoge", "John"]

// 通常
const firstName = arr[0]
const lastName = arr[1]

console.log(firstName); // Hoge
console.log(lastName); // Jhon

// 分割代入
const [firstName, lastName] = arr;

console.log(firstName); // Hoge
console.log(lastName); // Jhon

テンプレートリテラル

テンプレートリテラルを使うことで文字列を連結する際に、わざわざ+演算子を使ってつなげずに一行で書くことができる。

テンプレートリテラルの書き方は、バッククオート(`~`)で囲む

const myName = 'hoge'

// 通常の場合
const greeting = "こんにちは、私は" + myName + "です。"

// テンプレートリテラルの場合
const greetingWithTemplateLiteral = `こんにちは、私は${myName}です。`

console.log(greeting);
console.log(greetingWithTemplateLiteral);
// 上記同じ出力になる

二重否定

const name = 'hoge'

console.log(!!name) 

// true

一見、!!は、true -> false -> trueの様に元に戻るので、意味はないだろ！となるのですが、上記のコードの様にFalsy/Truthyが絡んでくると話は違ってくる。
以下処理の流れである。
1. "hoge"：文字列 = truthyで、最初の否定で結果は'false'になる
2. 更に、2個目の否定で結果は、'false' -> 'true'になる

最終的な結果は、trueになりBoolean型に変換される！

まとめ

どれがベストプラクティスなのか状況によって変わってきますが、これらのテクニックを知ることで選択肢が増え、自分の中である程度ベストプラクティスが組めれるようになればと思っております。
いろんな書き方があって面白い!!!

Javascriptのテクニック集①