Variable globally scoped but why function unable to access?

Why execution failed at first console log despite globally scoped variable exist?

const message = 'starts with mssg #1'; //Global scope

function scopeTest() {
  console.log('1. test #1: ', message); // <-- why unable to read Global scope here?

  const message = 'changed to mssg #2';
  console.log('2. test #2: ', message);

  if (true) { //Code block is OK
    const message = 'changed to mssg #3';
    console.log('3. test #3: ', message);
  }

  { //Another code block is OK
    const message = 'changed to mssg #4';
    console.log('4. test #4: ', message);
  }

  console.log('5. test last: ', message);
}
scopeTest();

Alternative coding solution not required. Just wanted to understand why JS can't access the global variable at the start of this particular function.

Please shed light. Thank you

Solution

Variables in JavaScript are hoisted when declared. This means that even if you declare them later in the code, they will still be accessible in earlier calls: it is like the declaration (not the assignation of the value!) would’ve been written in the first line of the block where you’ve declared it.

In your code, you have declared your message variable in the body of the function so it is trying to access that one because of hoisting, instead of the one declared in the global scope.