めんどうくさがりのためのコンマ演算子を使ったデバッグ術

,演算子(コンマ演算子)を利用したデバッグ方法を紹介します。

返り値をすり替える

たとえば、ある関数の返り値を固定したくなる場面はよくあります。そういうとき、下のように書いてしまうとLinterに怒られがちです。

const isABTarget = () => {
  return true; // デバッグ用
  return targetList.includes(userId);
};

こんなときはコンマ演算子の出番です。

const isABTarget = () => {
  return targetList.includes(userId), true;
};

コンマ演算子は左辺の項を無視して右辺を返します。つまり、 targetList.includes(userId) , true === true です。タイプ数も少ない上、Linterに怒られません。

console.log を挟む

たとえばReactのFCのテストをしたいとき、いちいち波括弧を開いてconsole.logを差し込んでいませんか？

const Component = ({name}) => <h1>Hello {name}!</h1>;

// こうしがち
const Component = ({name}) => {
  console.log(name);
  return <h1>Hello {name}!</h1>;
};

しかし、タイプ数がとんでもなく多くてめんどうです。そこで、コンマ演算子を使います。

const Component = ({name}) => (console.log(name), <h1>Hello {name}!</h1>);

意味としては全く変わっておりません。

注意点としては、この方法が使えるのは式を挿入したい時のみということです。たとえば以下のようなことはできません。

let first = true;
const Component = ({name}) => (if (first) { console.log(name); first = false }, <h1>Hello {name}!</h1>);

この例くらいなら頑張って式に落とし込めなくはないですが、そこまでするなら素直に波括弧で開きましょう。