How does two variables with same name inside a function and the function's statement can have differ values?

I’m learning Javascript block scope and encountered following code in the examples,

const logSkyColor = () => {
  const dusk = true;
  let color = 'blue'; 
  if (dusk) {
    let color = 'pink';
    console.log(color); // pink
  console.log(color); // blue 

I can’t wrap my head around how color var can get pink value inside statement and blue value outside statement.

Can anyone explain me in low level aka compiler level how this possible??

If I remove let keyword inside statement block, it does affect the function’s color var value, but If I keep the let keyword inside statement block, it does not affect.

I’m interested to learn what’s going on exactly in lower level view point.

What you’re witnessing is scope. The term should not alarm you as it relates only to the environment in which a variable can exist. This is called a namespace.

Blocks all have their own namespace which means we can define variables that apply only within them, and no other.

To gain a grasp of scope and namespace, don’t be afraid to google those terms. Add js to the search phrase.

scope js
namespace js

Let us know what you find. We will all be interested, and in full abeyance…

1 Like

Can you explain me how this let keyword with same name in both function and statement works in memory level?

javascript is probably not the language to use when learning about memory. it’s a stupid language with extremely nice interpreters and everyone’s got an interpreter installed which is why it’s got such nice interpreters and why people at all use it. It’s also got the rather rare feature of being sandboxed, making it safe to run untrusted code.

You have two separate variables.
They have the same name, but they’re separate, as if they had different names.
When you use that name, you will search from the innermost scope outwards until a variable by that name is found, and if that search goes past the outermost scope then … you’ll get some error message for trying to read something that isn’t there.

And then how exactly javascript implements that… is less important, and may vary between interpreters and if you wanted to make a case study of it then … yeah pick another language, for example C, where, unlike javascript, the program has access to its own memory including its own (compiled) code, where the memory model of a program very well may be part of the logic of the program.

Anyway, when initially compiled (which is a rather loose term and happens in several stages some of which happens after the program has started running), each scope is a frame of variables in it, and any scopes nested inside another scope still has those available (because it is still inside the surrounding scope) and if the inner scope declares a variable then that will hide those by the same name in surrounding scopes. Uses of variables are rewritten to point directly at the innermost found variable, meaning they from this point on have different names. This is done to avoid costly searching, to make it a direct lookup. You might note that a missing variable would therefore be identified at compile time, and most sane languages would report this before even running the code, but javascript isn’t a sane language so you get that error message if you run that line instead.

So when the compiler is reading the code and creating an internal representation of it, it will start with the outermost scope, gather all variables into a list. Then scopes within that receive the same treatment, and uses of non-existing ones result in a search outwards and get rewritten, and then it keeps going inwards until it’s all done.

Again, compiler and compiling are very loose terms, really only means turning one thing into another. Your code has multiple intermediary representations, starting with text and then turned into other data structures. Some languages eventually create a representation in the form of a binary executable of a specific format that some operating system knows how to launch, others keep the representation in memory and then starts running it directly.

1 Like

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.