JavaScript CleanCodeで参考になった個人的学びのまとめ（WIP）

概要

JavaScript CleanCodeを読んで、個人的に実務に活かせそうだと思った点をまとめる。
定期的に追加する予定。

※サンプルコードはChatGPTで生成。

Object.assignでデフォルトオブジェクトをまとめる

普段Object.assignはオブジェクトをシャローコピーする際に使用していたので第一引数を空オブジェクト"{}"にしていたが、
新しいオブジェクトを生成する際の第一引数にデフォルト値を設定できる。

const defaults = {
  name: 'Bob',
};

function createObject(obj) {
  const result = Object.assign({
    name: 'John Doe',
    age: 30,
    city: 'Tokyo',
  }, obj);
  return result
}

console.log(createObject(defaults))

出力結果

{ name: 'Bob', age: 30, city: 'Tokyo' }

副作用のないプロパティの書き換え

オブジェクトのプロパティをそのまま書き換えてしまうと副作用のあるコードになってしまい、
どこで変更されたか分かりづらいコードになってしまう。

プロパティを書き換える際には新しいオブジェクトを生成して値を書き換える。

const defaults = {
  name: 'John Doe',
  age: 30,
  city: 'Tokyo',
};


const newObj = {
    ...defaults,
    name: 'Bob',
}

console.log(newObj)

出力結果

{ name: 'Bob', age: 30, city: 'Tokyo' }

関数内からグローバル変数にアクセスしない

関数の中でグローバル変数を使用してしまうと、グローバル変数にどんな値が入っているか想定しづらくバグの温床となってしまう。
関数はできるだけ純粋関数として引数で渡された値を使用して新しい値を生成し、それを返す構造にすること。

自分はよく内部関数を作成した際に、外部の関数の変数にアクセスできるからといって内部関数の引数を減らす傾向があるが、
コードの分量が長くなってきたり、外部と内部で同じ変数名の変数を使用しているとどの変数にアクセスしているか非常にみづらいので関数内ではその関数内で定義したローカル変数もしくは引数のみアクセスするようにしたい。

let labelName = 'sample'

const updateLabelName = () => {
    labelName = 'test1'
}

updateLabelName()
console.log(labelName)

引数で渡された値を書き換えない

オブジェクトのプロパティを書き換えたり、追加したい時に"add〇〇~"のような関数を作成するケースが多い。
その場合、引数で渡されたオブジェクトに直接書き換えるのではなく、Object.assignやスプレッド構文などでコピーしてコピーしたオブジェクトを書き換え、その値を返すようにする。
引数で渡されたオブジェクトを直接書き換えると副作用のあるコードになり、意図しない変更を防ぐため。

const defaults = {
    name: 'John Doe',
    age: 30,
    city: 'Tokyo',

}
  
const addMessage = (obj, message) => {
    const newObj = Object.assign({}, obj)
    newObj.message = message
    return newObj
}
 
console.log(addMessage(defaults, 'hello'))

実行結果

{ name: 'John Doe', age: 30, city: 'Tokyo', message: 'hello' }