プログラミング入門 どっちのコードが読みやすい？

以下のコードをみてください

以下のコードを１０秒間で読んでください。

const convertStr = str => {
  let upper = str.toUpperCase()

  let newArr = []
  for(let i = 0; i<upper.length; i++){
    if(!newArr.includes(upper[i])){
      newArr.push(upper[i])
    }
  }

  let newStr = newArr.join('')

  return `${newStr} Hello`
}

console.log(convertStr('hogeeeh'))

どんな処理か分かったでしょうか。

次に、同様に以下のコードを１０秒間で読んでみてください。

const u = addHello(excludeDuplicate(toUpper('hogeeeh')))
console.log(u)

どちらも同じ処理が書かれていますが、二つ目のコードの方が何が書かれているか分かりやすかったと思います。

実は二つ目のコードはこれですべてではありません。実際は以下のような複数の関数に分かれています。

const toUpper = str => {
  return str.toUpperCase();
}

const excludeDuplicate = str => {
  const result = [...str].reduce((prev, current) => {
    if(!prev.includes(current)) return [...prev, current]
    return prev
  }, []);
  return result.join("");
}

const addHello = str => {
  return `${str} Hello`;
}

コードの合計量をみると、二つ目のコードの方が多いですが、二つ目のコードはそれぞれの役割で分かれているため、それぞれを理解するのが容易です。

さらに、何をやっているのかを知るだけであれば、はじめに見せた以下で十分です。

addHello(excludeDuplicate(toUpper('hogeeeh')))

もし詳しく知りたいのであれば、さらに各関数を読めば良いのです。

まとめ

処理を細かくわけることで、コードの可読性が上がります。

また、分けた各関数はシンプルな処理になるので、再利用もしやすくなります。

JavaScript, プログラミング入門, リファクタリング

Posted by たみぼうず