How the evaluate operation works in ecmascript?

Question

i've been wondering how the Evaluate operation works in ecmascript.

so i've been learning about context-free grammer but i couldn't understand the exact steps when we evaluate a non-terminal symbol on the spec.

take a look at the following code

var myVar = 10

let's assume only a Statement can be written there.

so my question here is what are the exact steps when we Evaluate Statement in this scenario ?

when we Evaluating the Statement will it go directly to the VariableDeclaration → BindingPattern Initializer production runtime semantics ?

or will it go first to the runtime semantics of this Statement → VariableStatement chain production.

and the implicit runtime semantics for Statement → VariableStatement is Return the result of evaluating VariableStatement

so now when we evaluate VariableStatement it will go to this production's runtime semantics

VariableStatement → var VariableDeclarationList;

and this production runtime semantics will do evaluate VariableDeclarationList

1. Let next be the result of evaluating VariableDeclarationList.
2. ReturnIfAbrupt(next).
3. Return NormalCompletion(empty).

and now when we evaluate VariableDeclarationList it will go to the implicit runtime semantics of this chain production VariableDeclarationList → VariableDeclaration so it will basically do this Return the result of evaluating VariableDeclaration

and finally evaluating VariableDeclaration will bring us in this scenario to this production

VariableDeclaration → BindingIdentifier Initializer runtime semantics

so again my question is when we evaluate the Statement will it go directly to the runtime semantics of VariableDeclaration → BindingIdentifier Initializeror will it go through those steps i've just showed you