JavaScript: 式とステートメントの違い [翻訳]_javascript スキル

1. ステートメントと式

JavaScript の式とステートメントには違いがあり、式は値を生成するため、関数呼び出しパラメーターなど、値が必要な場所に配置できます。以下のコード行は式です:

myvar3 xmyfunc("a", "b") ステートメントは、ループ ステートメントと典型的なステートメントとして理解できます。 JavaScript でステートメントが必要な場合は常に、そのようなステートメントを式ステートメントと呼びます。ただし、その逆は当てはまりません。式が必要な場所で式を使用することはできません。たとえば、if ステートメントは関数のパラメータとして使用できません。

2. 他の構文を理解した後、次の 2 つの構文を見てください。ステートメントと式の関係をより深く理解するのに役立ちます。

2.1 If ステートメントと条件演算子
次に、if ステートメントの例を示します。

コードをコピーします コードは次のとおりです:

var x;

if (y >= 0) {
x = y;
} else {
x = -y;
}

上記の文は条件演算子と呼ばれます。

var x = (y >= 0 ? y : -y);

等号 = とセミコロンの間のコードは条件式です。両側の括弧 必須ではありませんが、括弧を使用すると条件式が読みやすくなると思います。

2.2 セミコロンとカンマ演算子
JavaScript では、セミコロンを使用して 2 つのステートメントを接続します。

foo (); bar() 2 つの式を接続するには、一般的ではないカンマ演算子が使用されます:

foo(), bar() カンマ演算子は の前後の 2 つの式を評価し、次の計算結果を返します。例:

コードをコピーします。 コードは次のとおりです:

> "a", "b"

> var x = ("a", "b"); >
> console.log(("a", "b"));




のような式

3.1 オブジェクト リテラルとステートメント ブロック
次に示すのは、オブジェクト値の式を生成できる式であるオブジェクト リテラルです。 >

コードをコピー


コードは次のとおりです:


{

foo: bar(3, 5) } しかし、同時に、これは完全に正当なステートメントでもあります。このステートメントの構成要素は次のとおりです。 • コード ブロック: 中括弧で囲まれたブロック。

• ラベル: 任意のステートメントの前にラベルを配置できます。

• ステートメント: 式ステートメント bar(3, 5)。 JavaScript が実際に独立したコード ブロックを持つことができることにショックを受けました (一般的なコード ブロックはループまたは if ステートメントに基づいています)。次のコードは、このコード ブロックの機能を示しています。ラベルを設定して、このコード ブロックから飛び出すことができます。 >



コードをコピー

コードは次のとおりです:


function test(printTwo) {
印刷: {
console.log("One");

if (!printTwo) 印刷を中断します; console.log("Three") ); } > テスト (偽) 1 3 > テスト (true)

1

2
3


3.2 関数式と関数宣言
次のコードは関数式です:

function () { } この関数式に名前を付けて変換することもできます。 ) 関数式:

function foo() { }この関数の関数名 (foo) は関数内にのみ存在します。たとえば、これを使用して再帰操作を行うことができます:





コードをコピーします

コードは次のとおりです。


> var fac = function me(x) { return x <= 1 ? 1 : x * me(x-1) }
> fac(10)
3628800
> console.log(me)
参照エラー: me が定義されていません

表面的には、名前付き関数式は関数宣言と変わりません。しかし、その効果は異なります。関数式は値 (関数) を生成します。アクションを実行します。関数を代入します。また、すぐに呼び出すことができるのは関数式のみであり、関数宣言は実行できません。
3.1 と 3.2 からわかるように、一部の式には式とステートメントの間に明らかな違いはありません。これは、同じコードが式コンテキストに現れる場合とステートメント コンテキストに現れる場合に異なる効果があることを意味します。ただし、それが式ステートメントの場合は重複します。つまり、この曖昧さを解決するために、JavaScript 構文では式ステートメントを中括弧で囲むことや、キーワード「関数」が

コードをコピーします コードは次のとおりです: ExpressionStatement:

[lookahead ∉ {"{", "function" }] Expression ;

では、これらのフラグで始まる式ステートメントを記述したい場合はどうすればよいでしょうか。これは内部的には演算の結果を変更しません。式が式のコンテキストで解析されることを確認するだけです。最初の例を見てみましょう。eval はステートメントのコンテキストに従ってパラメータを解析します。eval がオブジェクトを返したい場合は、オブジェクト リテラルを括弧で囲む必要があります。 .

コードをコピーします コードは次のとおりです。 > 123 }")

123

> eval("({ foo: 123 })")
{ foo: 123 }


2 番目の例: 次の例はすぐに実行される関数式

コードをコピーします コードは次のとおりです。 > (function () { return "abc" }())

'abc'

括弧を省略すると、構文エラーが発生します (関数宣言を匿名にすることはできません):

コードをコピー コードは次のとおりです。 > function () { return "abc" }( )

SyntaxError: 関数ステートメントには名前が必要です

関数名を追加すると、構文エラーも発生します (関数ステートメントを理解および実行できません):

コードをコピーします コードは次のとおりです。 > { return "abc" }() SyntaxError: 構文エラー

式コンテキストで式を解析するもう 1 つの方法は、 or! などの単項演算子を使用することです。ただし、括弧を使用する場合とは異なり、これらの演算子は結果を変更します。式の結果を気にしない場合は、次を使用できます。

コードをコピー

コードは次のとおりです。 > function () { console.log("hello") }() hello

NaNNaN

は、関数実行後の戻り値は未定義です。

翻訳者注: 訳が分かりにくいと思ったので、レベルの低い図を描きました。

原文。 (英語):
http://www.2ality.com/2012/09/expressions-vs-statements.html