scope of variables and functions inside if block in javascript

Question

Variables defined inside if block, are accessible outside the if block also

console.log(name) // undefined

if (true) {
  var name = "harry"
  console.log(name) // harry
}

console.log(name) // harry

I got this:

if (true) {
  sayHello() // hello
  
  function sayHello() {
    console.log("hello")
  }

  sayHello() // hello
}

sayHello() // hello

Got this too.

But what's happening here

sayHello() // TypeError: sayHello is not a function

if (true) {
  sayHello()

  function sayHello() {
    console.log("hello")
  }

  sayHello()
}

sayHello()

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… have a look at this page — boxdox
– boxdox, Commented Aug 11, 2021 at 6:00
With ES6 functions are now block scoped. "variables defined inside if block, are accessible outside the if block also" that is only true for var declared variables. — VLAZ
– VLAZ, Commented Aug 11, 2021 at 6:13
Have a look at the differences between strict and non-strict mode as suggested above and know the differences between var, let and const. Also, spend some time understanding how hoisting works in javascript. — nontechguy
– nontechguy, Commented Aug 11, 2021 at 6:17

Yousaf · Accepted Answer · 2021-08-13 04:48:30Z

1

Hoisting of function declarations inside blocks has confusing semantics.

The last code example is similar to the code as shown below:

var sayHello1;
sayHello1();   

if (true) {
  let sayHello2 = function() {
     console.log("hello");
  }

  sayHello2();

  // assigned to outer variable at the place
  // of function declaration in your code
  sayHello1 = sayHello2;

  sayHello2();
}

sayHello1()

As seen in the above code, there are actually two variables in your code: one inside the block is a let declaration and one outside the block is a var declaration.

Variable defined outside the block is assigned the function declared inside the block at the place where it is actually defined in your code.

Invoking the outer sayHello1 variable as a function before it is assigned the function inside the block will throw an error.

Related Questions:

edited Aug 13, 2021 at 4:48

answered Aug 11, 2021 at 6:16

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yousaf Over a year ago

No, function declarations are hoisted. Hoisting of function declaration is a bit different as explained in my answer and the related questions listed at the end of my answer.

Paras Bisht Over a year ago

sorry, I meant function expression

Yousaf Over a year ago

yes, function expressions are not hoisted.

Yash Ratnaparkhi · Accepted Answer · 2023-02-21 09:58:00Z

0

If we check the global execution context for the code, the "sayHello" on line 1 is hoisted and assigned as a variable and not as a function resulting in the type error. If we do the following modification in the code, we will get the sayHello as undefined and the code will not give the type error. Below is the code for the same.

console.log(sayHello) // prints "undefined" and not the type error.

if (true) {
  sayHello()

  function sayHello() {
    console.log("hello")
  }

  sayHello()
}

sayHello()

answered Feb 21, 2023 at 9:58

Yash Ratnaparkhi

1

Collectives™ on Stack Overflow

scope of variables and functions inside if block in javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related