【JavaScript】「式」と「文」の違い

はじめに

JavaScriptの式と文について理解が曖昧だったのでまとめます。

問題

関数で値を返す時に返せるものとそうでないものがあり、その違いを調べたら式と文にたどり着いた。

解決

結論から書くと

• 式とは何らかの値を返すもの（文字列、数値、関数など）
• 文とは値を返さないもの（if文、for文、swich文）
  になります。

分かりやすい見分け方としては変数に代入出来るものが式で代入出来ないものが文になります。

式

式は評価されて値となり、変数や引数で使うことが出来ます。
以下は式の例です。

1 // 数値

"文字列" //文字列

1++ // インクリメント・デクリメント

1 + 1 // 式 + 演算子

1 == 1 // 等価演算子 

[...ary] // スプレッド構文

const fn = function() { // 関数式
    return 1;
};

fn(); // 関数の実行

1 ? true : false // 三項演算子

文

文は特定の処理を行うための命令でそれ自体を変数や引数で使うことは出来ません。
以下は文の例です。

let a; // 変数宣言

if() {} // if文

for(){} // for文

while(){} // while文

swich(){} // swich文

関数で返せるのは式のみ

値を返す/返さないの違いから関数でreturn出来るのは式のみになります。

問題無い書き方の例

const isLogin = true;
function fn () {
    // 三項演算子は式なのでreturnで返せる
    return isLogin ? console.log("ようこそ！") : console.log("ログインしてください");
}

エラーになる例

const isLogin = true;
function fn () {
    // if文は文なのでreturnで返せない
    return if(isLogin) {
        console.log("ようこそ！");
    } else {
        console.log("ログインしてください");
    }
}

そのため、JSX内でも式のみが使用できます。

式のみ書ける例

const MyComponent = ()=> {
  const isLogin = true;

  return (
    <div>
      {/* 三項演算子（式なのでOK） */}
      {isLogin ? <p>ようこそ！</p> : <p>ログインしてください</p>}
    </div>
  );
}

文を入れて書けない例

const MyComponent = () => {
  const isLogin = true;

  return (
    <div>
      {/* 構文エラー：ifは「文」なので中に入れられない */}
      {
        if (isLogin) {
          return <p>ようこそ！</p>
        } else {
            return <p>ログインしてください</p>
        }
      }
    </div>
  );
}

おわりに

バニラのJSを書く時は式と文について全く意識してませんでしたが、ReactでJSXを書く時は理解してないと思わぬところで躓きますね。（自戒）

参考