Statement is a same word for « Instruction » or « Declaration » ?

[MachinisteWeb]

I work on French translation of Vue.

All was clear from guide/syntax.md but with event.md I'm not really sure to have well understand.

This is my current comprehension

In the document syntax.md at line 74, we can read

<!-- this is a statement, not an expression: -->

to describe this {{ var a = 1 }}

For Linguee, Statement means Declaration : http://www.linguee.fr/francais-anglais/search?source=anglais&query=statement
For Google Translate, Statement means Declaration : https://translate.google.fr/?um=1&ie=UTF-8&hl=fr&client=tw-ob#en/fr/statement

So I understant this :

Instruction is Instruction
Statement is Declaration
Expression is Expression

So, I can describe this :

var num = 20 + true, 
    bool;
str = "Hello World"; 
delete str; 
if (num === 21) { 
    bool = true;
} else {
    bool = false;
    num = 0;
}

like this :

┌──────────────────────────────────────────────────┬───────────────────────────────┬───────────────────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Instruction                                      │ Instruction                   │ Instruction       │ Instruction                                                                                                       │
├──────────────────────────────────────────────────┼──────────────────────────┬────┼──────────────┬────┼───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│                                                  │                          │    │              │    │ Control Flow                                                                                                      │
│                                                  │                          │    │              │    ├────────────────────────────────────────────────────────┬──────────────────────────────────────────────────────────┤
│ (Declaration) statement                          │                          │    │              │    │ Block statement                                        │ Block statement                                          │
├─────┬───────────────────────────────────────┬────┤                          │    │              │    ├──────┬────────────────┬─────┬──────────────────────┬───┼────────┬───────────────────────┬─────────────────────┬───┤
│     │ Expression                            │    │ Expression               │    │ Expression   │    │      │ Expression     │     │ Instruction          │   │        │ Instruction           │ Instruction         │   │
│     ├─────┬────┬────┬────┬──────┬────┬──────┤    ├─────┬────┬───────────────┤    ├────────┬─────┤    │      ├─────┬─────┬────┤     ├─────────────────┬────┤   │        ├──────────────────┬────┼────────────────┬────┤   │
│     │     │    │    │    │      │    │      │    │     │    │               │    │        │     │    │      │     │     │    │     │ Expression      │    │   │        │ Expression       │    │ Expression     │    │   │
│     │     │    │    │    │      │    │      │    │     │    │               │    │        │     │    │      │     │     │    │     ├─────┬────┬──────┤    │   │        ├──────┬────┬──────┤    ├─────┬────┬─────┤    │   │
│     │ var │ op │ od │ op │ od   │ op │ var  │ sc │ prp │ op │ operand       │ sc │ op     │ var │ sc │      │ od  │ op  │ od │     │ var │ op │ od   │ sc │   │        │ var  │ op │ od   │ sc │ var │ op │ od  │ sc │   │
│     │     │    │    │    │      │    │      │    │     │    │               │    │        │     │    │      │     │     │    │     │     │    │      │    │   │        │      │    │      │    │     │    │     │    │   │
│ var   num   =    20   +    true   ,    bool   ;    str   =    "Hello World"   ;    delete   str   ;    if (   num   ===   21   ) {   bool  =    true   ;    }   else {   bool   =    true   ;    num   =    0     ;    } │
└─────┴─────┴────┴────┴────┴──────┴────┴──────┴────┴─────┴────┴───────────────┴────┴────────┴─────┴────┴──────┴─────┴─────┴────┴─────┴─────────────────┴────┴───┴────────┴──────────────────┴────┴────────────────┴────┴───┘

and that means

These lines are one « Expressions » and work

<!-- data: { num: NaN, bool: false } -->
{{ num = 20 + true, bool }} <!-- 21 -- >
<div v-if="num = 20 + true, bool"></div> <!-- 21 evaluated to true so this is injected in DOM -- >

<!-- data: { str: "" } -->
{{ str = "Hello World" }} <!-- "Hello World" -- >
<div v-if="str = 'Hello World'"></div> <!-- "Hello World" evaluated to true so this is injected in DOM -- >

<!-- data: { str: "" } -->
{{ delete str }} <!-- true -- >
<div v-if="delete str"></div> <!-- true evaluated to true so this is injected in DOM -- >

and same for num === 21, bool = true and num = 0

That means also

These lines are not only « expressions » but « declaration » and « controle flow » and don't work

<!-- data: { num: NaN, bool: false } -->
{{ var num = 20 + true, bool }} <!-- avoid using JavaScript keyword as property name: "var" -- >
<div v-if="var num = 20 + true, bool"></div> <!-- avoid using JavaScript keyword as property name: "var" -- >

<!-- data: { num: NaN, bool: false } -->
{{ if (num === 21) { bool = true; } else { bool = true; num = 0 ; } }} <!-- avoid using JavaScript keyword as property name: "if" -- >
<div v-if="if (num === 21) { bool = true; } else { bool = true; num = 0 ; }"></div> <!-- avoid using JavaScript keyword as property name: "if" -- >

All is clear for me

BUT

Maybe I'm not really understand Statement word ?

In the document guide/events.md at line 107, we can read

Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:

to describe this <button v-on:click="say('hi')">Say hi</button>

and at line 144 in the same document we can read

Sometimes we also need to access the original DOM event in an inline statement handler

to describe this <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

So if I refer to my previous explaination/comprehension, say('hi') and warn('Form cannot be submitted yet.', $event) are not statement but expression**

So I think. Maybe the correct line are

Instead of binding directly to a method name, we can also use methods in an inline JavaScript expression:
Sometimes we also need to access the original DOM event in an inline expression handler

or

Instead of binding directly to a method name, we can also use methods in an inline JavaScript instruction:
Sometimes we also need to access the original DOM event in an inline instruction handler

Because I'm not sure there is an error in two different place I think « maybe statement means instruction and not declaration »

So I ask to Google statement javascript and I see in first result this (http://www.w3schools.com/js/js_statements.asp) :

JavaScript Statements

document.getElementById("demo").innerHTML = "Hello Dolly.";

and I say « No ! It's not a statement, it's an instruction that only contain an « expression » (an affectation), not a « declaration (statement) ».

But where is the thuth ?

So if I decide to say « ok, statement is not declaration, but instruction in general »

In this case the

<!-- this is a statement, not an expression: -->

should be

<!-- this is a declaration, not an expression: -->

Someone for help me to really correctly understand ?

[chrisvfritz]

@posva may have some thoughts here.

[posva]

Thanks for the ping @chrisvfritz

So I think. Maybe the correct line are

Instead of binding directly to a method name, we can also use methods in an inline JavaScript expression:
Sometimes we also need to access the original DOM event in an inline expression handler

Yes, it should be expression instead as above. @chrisvfritz WDYT?

In this case the

<!-- this is a statement, not an expression: -->

should be

<!-- this is a declaration, not an expression: -->

No, it's a statement, as you said before. Declaration could be the french equivalent for it, though

[MachinisteWeb]

Thx @posva. So a will keep my initial comprehension and we will translated that keeping this source in mind :

Instead of binding directly to a method name, we can also use methods in an inline JavaScript expression:
Sometimes we also need to access the original DOM event in an inline expression handler

I will also to be more attentive when I see a « false » usage of « statement », and also in a well referenced page (http://www.w3schools.com/js/js_statements.asp)

I'm glad to know exactly the difference with no doubts thanks to you.

[posva]

Thanks for pointing it out. I submitted a PR to fix that very specific line

[chrisvfritz]

@haeresis @posva I don't think that distinction between expression and statement is completely correct. See here for my explanation.

[posva]

@haeresis Hey, actually v-on accepts statements so it was correct from the beginning

[MachinisteWeb]

So we have:

Instruction
= Statement or Expression.

Statement
= (Declaration) Statement or Block Statement or {...} Statement : sothing that return a value undefined which can not be affected with =.

>  if (test) { true; } else { false; }
<· undefined

>  var test = (if (test) { true; } else { false; })
<· Uncaught SyntaxError: Unexpected token if

Expression
= operands and operators that return an operand value. Because void 0 return a value undefined which can be affected with =, it's an expression.

>  void 0
<· undefined

>  var test = void 0
<· undefined

So to resume: my comprehension is ok, and the explaination of @posva too. But in the specific case of v-on, a statement is ok and not only an expression. This is not the case for v-if or {{ that require an expression. It's why:

In the document syntax.md at line 74, we can read <!-- this is a statement, not an expression: --> to describe this {{ var a = 1 }} (because that return an error).

and Instead of binding directly to a method name, we can also use methods in an inline JavaScript **statement**: to describe this <button v-on:click="say('hi')">Say hi</button> (because <button v-on:click="if (true) { say('hi') }">Say hi</button> works also).

Understood. So all is ok for me. Thx a lot.