JavaScriptの構成要素である式と文の違いについて学習しました。ReactやJSXを扱うときに必要になってきたのでしっかり理解したいです。
結論
結論を簡潔に述べると、
式とは、何らかの値を生成し、変数に代入できるものです。
文とは、for文、if文、switch文やセミコロンで区切るものです。
以降よりそれぞれについて詳しく見ていきます。
式（expression）とは
数値や文字列などのリテラル値や変数や関数などの識別子、1 + 1のような式と演算子の組み合わせが式になります。
式の特徴として、式を評価すると結果の値を得ることができます。 この結果の値を評価値と呼びます。
以下は式の例です。
1; // これも式
"文字列"; // これも式
const one = 1; // 1という式を変数oneに代入する(代入式)
const number = one;// 式である変数oneを変数numberに代入（代入式）
const fn = () => { //実行されると1を返す関数を変数fnに代入(関数式)
return 1;
};
const callFn = fn(); // fn()という式を呼び出し（実行）、1という値を変数callFnに代入
const plus = 1 + 1; // 式＋演算子「式を評価する」のイメージ動画です↓
1が入力されてEnterを押すと、式が評価されて1という値を返していることが分かります。
その他の式について↓
文（statements）とは
ある特定の処理を行うための1工程が1つの文です。文の末尾にはセミコロン;を使用し、それによって文を区切ることができます。ただし、if(条件式) {処理}のように{}で終わる文には、セミコロン不要です。
また文は、処理の一部に式を含むことができます。
以下は文の例です。
const isTrue = true; // trueを返す式。constからtrueまでの全体も文と呼ぶ。(変数宣言文)
if(isTrue) {処理} // isTrueがtrueならブロックの中に書かれた処理を実行する。また、文は変数に代入できないため式にはなれません↓
const a = const b = 1; //Uncaught SyntaxError: Unexpected token 'const'
const c = if(true) {処理} //Uncaught SyntaxError: Unexpected token 'if'その他の文について↓
文と式の違いは？
「式は文になれるが、文は式になれない」ということです。
文になれる式のことを式文と呼びます。式文は必ずしもプログラムに直接影響を与えるとは限りません。
以下は式文の例です。
1;// 変数に代入とかしてないため、何も影響なし
console.log(1);//関数呼び出しその他の式文について↓
違いを意識する場面は？
式と文の違いを意識する例として、JSX構文を使用するときが挙げられます。JSXとは、簡単に説明するとJavaScriptファイルにHTML（XML）が記述できる構文です。
例えば、ログインの状態の有無によって表示を変えたいときに、JSX内でif文を使用するとエラーになります↓
function Login() {
・・・
return (
//文は使用できないためエラー
{if(isLogin) {
<p>ログイン中です</p>
} else {
<p>ログインしてください</p>
}
}
)
}JSX内で条件によって表示を変えたいときは、三項演算子を使用します↓
function Login() {
・・・
return (
<p>{isLogin ? "ログイン中です":"ログインしてください" }</p>
)
}学習サイト
