Does function call is replaced with function definition in javascript?

Question

I have the below code, and it prints 42.

{
  let number = 42;
  function printNumber() {
  console.log(number);
}
function log() {
  let number = 54;
  printNumber();
}
// Prints 42
log();
}

This output brought me to wonder the function call is replaced by function definition or not?

I tried removing the "number" variable declaration in the beginning of the program to see if it reads the "number" defined inside the log() function but it returned reference error,

    { 
//let number = 42;
function printNumber() {
  console.log(number);
}
function log() {
  let number = 54;
  printNumber();
}
// Uncaught ReferenceError: number is not defined
log();
}

I want to understand how the function call is interpreted and how the scope is determined that if a function printNumber() is called inside another function log() then how is it not supposed to use the variable declared inside the function log() from where it is called.

you commented out number and it is now only in the scope of the log function so, you cannot detect it in the scope of the printNumber definition. — Cuong Nguyen, Oct 20 '19 at 12:47
JavaScript scoping rules apply here. As a rule of thumb, the syntactic structure of the source code determines visibility of variables, as opposed to the flow of execution. — collapsar, Oct 20 '19 at 13:13

score 0 · Accepted Answer · answered Oct 20 '19 at 13:02

0

In log() you are creating a new variable named number, not setting the one in the block scope.

{
  let number = 42;
  function printNumber() {
    console.log(number);
  }
  function log() {
    let number = 54;  //< This is a NEW variable.
    printNumber();
  }
  function log2() {
    number = 54;     //< This is using the block-scope variable.
    printNumber();
  }
  
  log();  // Prints 42
  log2(); // Prints 54
}

answered Oct 20 '19 at 13:02

Maxim Paperno

4,485
2
18
22

You are right! in log2() function we are ultimately editing the value of number variable declared at the top which is accessible to printNumber. – Mansi Oct 21 '19 at 05:14

score 0 · Answer 2 · answered Oct 20 '19 at 13:06

This is due to scope and context in Javscript.

{
       let number = 42;
       function printNumber() {
          console.log(number);  //as it does not have number in its function scope it will check for it in global score which is equal to 42 and prints it
       }
    
      function log() {
        let number = 54;  //log defined variable number, but its score is limited to log only, and can not be accessed in printNumber, (see printNumber description)
        printNumber();
      }
      
      log();  // Prints 42
    }

SECOND CASE:

    {
       let number = 42;
       function printNumber(number) {
          console.log(number);  //in this case, it does have a local variable number so it will use that variable
       }
    
      function log() {
        let number = 54;  //log defined variable number, but its score is limited to log only, 
        printNumber(number);  //we are passing number to printNumber
      }
    
      log();  // Prints 54
    }

Does function call is replaced with function definition in javascript?

2 Answers2