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

Javascript – Why can I redeclare a variable of the same name as a function parameter within an if statement?

Below is a trivialized version of a solution I came across while trying to implement a version of the Jquery CSS function.

function CSS(prop, value) {
   ...

        if (value === undefined) {
          // No matching elements.
          if (element == null) {
            return undefined;
          }

          const value = element.style[prop]; // <-- Why is this allowed?
          return value === "" ? undefined : value;
        }

   ...
}

I noticed that the function param value was being redeclared and automatically raised an eyebrow to the solution. I threw it in a code sandbox and it worked. I checked the docs and found exactly what I expected:

"Redeclaring the same variable within the same function or block scope using let is not allowed in JavaScript."

Now this specified let but even chaging to that still works.

If I bring the declaration out of the if statement, I get the duplicate error I’d expect so this clearly has to do with the block scope of the if statement. However, because it inherits the function scope outside of that which includes a variable of the same name a redeclartion should be illegal still, no?

What am I missing?

Tags:

2

Answers


  1. 0

    This works because let and const do allow you to redeclare variables/constants in nested blocks of code. They are treated like different variables so as soon as you exit that if statement, value will refer to the function parameter again with whatever value it had. The redeclared variable will go out of scope.

    Look at this modified version of your code:

    function CSS(prop, value) {
    const element = document.getElementById('#someElement');

    // assigning i here
    let i = 1;
    if(value === undefined) {
        // this works
        let i = 2;

        if (element == null) {
            return undefined;
        }

        const value = element.style[prop];
        return value === "" ? undefined : value;
    } else {
        // this still works
        const i = 3;
    }

    // i === 1 here
    console.log(i);
}

    Note how i is equal to 1 at the end since the only time it was set (in that scope) was before the if statement.

    Obviously, this is odd behaviour for some and it makes for code that’s difficult to read, so you should avoid it.

    You can read more about what’s going on under the hood here: https://tc39.es/ecma262/#sec-block

    Login or Signup to reply.
  2. 0

    This problem is caused due to Scoping rules of variable in JS

    For var
    Variables declared with var are function-scoped. This means they are scoped to the nearest function block, regardless of block constructs like if, for, etc.

    For let and const
    Variables declared with let and const are block-scoped. This means they are scoped to the nearest block they are declared in (e.g., inside an if, for, etc.).

    The const value inside the if block is allowed because it is scoped to the block and shadows the function parameter value within that block. This does not conflict with the function-scoped parameter value. If you were to try redeclaring let or const with the same name in the same block scope, that would result in an error, but different scopes (function vs. block) handle this without issue.

    for example

    function example(param) {
  if (true) {
    const param = "block scope value";
    console.log(param); // Logs: "block scope value"
  }
  console.log(param); // Logs: original parameter value
}

example("function scope value");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search