Question 278900 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – What is the difference between the following two code blocks

function greet(name) {
  let hours = 11;
  let time = "";

  if (hours >= 4 && hours < 12) {
    time = "Good Morning";
  } else {
    time = "hi";
  }

  return `${time}, ${name}`;
}

greet("Ali");

The output is correct. It output is "Good morning, Ali"

But when I change the the return statement, just like below. It returns " , Ali".

function greet(name) {
  let hours = 11;
  let time = "";
  let result = `${time}, ${name}`;

  if (hours >= 4 && hours < 12) {
    time = "Good Morning";
  } else {
    time = "hi";
  }

  return result;
}

greet("Ali");

Could anyone please explain this?

Tags:

2

Answers


  1. 0

    The difference is when you use the variable time (the naming of which is somewhat ironic in this case). Look at the first code:

    // 1) initialize time to a default value
let time = "";

// 2) set the correct value
if (hours >= 4 && hours < 12) {
  time = "Good Morning";
} else {
  time = "hi";
}

// 3) use the value
return `${time}, ${name}`;

    Now look at the second example:

    // 1) initialize time to a default value
let time = "";

// 2) use the value
let result = `${time}, ${name}`;

// 3) set the correct value
if (hours >= 4 && hours < 12) {
  time = "Good Morning";
} else {
  time = "hi";
}

    See how you’re using the value before you’ve set the value? You’ve reversed those two steps. Un-reverse them:

    // 1) initialize time to a default value
let time = "";

// 2) set the correct value
if (hours >= 4 && hours < 12) {
  time = "Good Morning";
} else {
  time = "hi";
}

// 3) use the value
let result = `${time}, ${name}`;

    If your expectation is that the use of a variable will automatically re-calculate itself if that variable ever changes, that expectation is false. This line of code executes once:

    let result = `${time}, ${name}`;

    After it’s executed, the result is stored in the variable result. If time or name ever change, the system isn’t going to go back to this line of code and execute it again. The value in result never changes.

    Login or Signup to reply.
  2. 0

    The reason for the different outputs in your two versions of the greet function is the order of your code execution and the way JavaScript works.

    In the first version, you set the time variable based on the hours condition before creating the result variable. So, when you return ${time}, ${name}, it correctly evaluates the time variable to "Good Morning" and then combines it with name.

    In the second version, you set the result variable before you set the time variable. Therefore, time is still an empty string when you create result, and it stays that way because the conditional statement that sets time to "Good Morning" or "hi" only happens after result has been assigned. As a result, result is initialized with an empty string followed by name, which is why you get " , Ali."

    To fix this issue in the second version, you should move the creation of result after the conditional statement that sets the time variable to "Good Morning" or "hi." This way, the time variable will have the correct value before you create result, resulting in the desired output of "Good Morning, Ali."

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search