无法理解JavaScript中的词法范围

Question

I'm reading some books, learning javascript, and i see that javascript uses lexical scope.

Lexical scoping means whatever variables are in scope where you define a function from (as opposed to when you call it) are in scope in the function

I tried some basic example:

function f() {
  console.log(x);
}
const x = 10;
f(); // 10

Then how does this work, and why does it log value 10? Variable x doesn't exist when I define the function. I'm javascript noob, so maybe I'm missing something here. Thanks in advance.

Answer 1

This is due to a concept named Hoisting. Essentially, any declaration is moved to the top of the scope, and hence is always accessible anywhere in the scope.

During the time your function id being defined, a lexical scope captures the reference to x.

Post which x is assigned 10.

Read more about hoisting in JS here. (JavaScriptisSexy.com) More specifically about Hoisting and const here.