JavaScript: The difference between expressions and statements [Translation]_javascript skills

1. Statements and Expressions

There is a difference between expressions and statements in JavaScript. An expression will produce a value, and it can be placed anywhere a value is required, for example, as a function call Parameters. Each line of code below is an expression:

myvar3 The xmyfunc("a", "b") statement can be understood as a behavior. Loop statements and if statements are typical statements. A program is It consists of a series of statements. Wherever a statement is required in JavaScript, you can use an expression instead. Such a statement is called an expression statement. But the reverse is not true: you cannot use an expression in a place where an expression is required. Put a statement. For example, an if statement cannot be used as a parameter of a function.

2. Other syntax

Look at the following two pairs of similar syntax. After understanding these, it can help us Better understand the relationship between statements and expressions.

2.1 If statement and conditional operator
The following is an example of an if statement:

Copy code The code is as follows:

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

An expression similar to the if statement function is called a conditional operator. The above statement is equivalent to the following .

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

The code between the equal sign = and the semicolon; is the conditional expression. The parentheses on both sides Not required, but I think parentheses make conditional expressions more readable.

2.2 Semicolon and comma operators
In JavaScript, use a semicolon to connect two statements:

foo(); bar() To connect two expressions, the uncommon comma operator is used:

foo(), bar() The comma operator will evaluate the two expressions before and after , and then returns the calculation result of the expression on the right. For example:

Copy code The code is as follows:

> "a", "b"
'b'

> var x = ("a", "b");
> x
'b'

> console.log(("a", "b"));

3. Expressions that look like statements

Some expressions look like statements, which may cause some trouble.

3.1 Object literals and statement blocks
The following is an object literal, which is an expression that can generate an object value Formula.

Copy code The code is as follows:

{
foo: bar(3, 5)
}

But at the same time, it is also a completely legal statement. The components of this statement are:

• A code block: a block surrounded by braces Sequence of statements.
•A label: You can place a label in front of any statement. Here foo is a label.
•A statement: Expression statement bar(3, 5).
You might I'm shocked that JavaScript can actually have independent code blocks (common code blocks are based on loops or if statements). The following code demonstrates the function of this code block: you can set a label for it and jump out of this Code block.

Copy code The code is as follows:

function test(printTwo) {
printing: {
console.log("One");
if (!printTwo) break printing;
console.log("Two");
}
console.log(" Three");
}
> test(false)
One
Three
> test(true)
One
Two
Three

3.2 Function expression and function declaration
The following code is a function expression:

function () { } You can also give this function expression a name and transform it For a named (non-anonymous) function expression:

function foo() { }The function name (foo) of this function only exists inside the function. For example, you can use it to do recursive operations:

Copy code The code is as follows:

> var fac = function me(x) { return x > fac(10)
3628800
> console.log(me)
ReferenceError: me is not defined

On the surface, a named function expression is no different from a function declaration. But their effects are different: a function expression produces a value (a function). A function declaration Perform an action: assign a function to a variable. In addition, only function expressions can be called immediately, function declarations cannot.

3.3 Resolving conflicts
As can be seen from 3.1 and 3.2, some expressions There is no apparent difference between expressions and statements. This means that the same code will have different effects when it appears in an expression context and when it appears in a statement context. Normally, there is no overlap between the two contexts. . However, if it is an expression statement, there will be an overlap: that is, there will be some expressions that appear in the context of the statement. To resolve this ambiguity, JavaScript syntax prohibits expression statements from curly brackets or the keyword " function" starts with:

Copy code The code is as follows:

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

So, what if you want to write an expression statement that starts with those flags? You can put it in a bracket Internally, this does not change the result of the operation, it just ensures that the expression is parsed in the expression context. Let's look at two examples. The first example: eval will parse its parameters according to the statement context. If you want eval returns an object, you must add a bracket around the object literal.

Copy code The code is as follows:

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

Second example: The following example is a function expression that is executed immediately.

Copy code The code is as follows :

> (function () { return "abc" }())
'abc'

If you omit the parentheses, you get A syntax error (function declaration cannot be anonymous):

Copy code The code is as follows:

> function () { return "abc" }()
SyntaxError: function statement requires a name

If you add a function name, you will also get a syntax error (function statement cannot understood and executed):

Copy code The code is as follows:

> function foo() { return "abc" }()
SyntaxError: syntax error

Another way to make an expression parsed in expression context is to use unary operators, such as or! .However, unlike using parentheses, these operators will change the result of the expression. If you don’t care about the result, you can use:

Copy code The code is as follows:

> function () { console.log("hello") }()
hello
NaNNaN

is the result of acting on the return value undefined after function execution.

Translator’s Note: I didn’t think the translation was clear, so I drew a picture with a poor level.


Original text (English):http://www.2ality.com/2012/09/expressions-vs-statements.html