Scope clarification (Write Higher Order Arrow Functions)

JavaScript
1

Tell us what’s happening:
Hi everyone, I have no issue with the challenge, I understood and solved it, but I am trying to wrap my head around the part regarding scoping.
There is const squaredIntegers within the function and then another on outside of it. These are 2 totally different variables?
Just wanted to ask for a bit of clarification. Sometimes I get hung up on such details, but it seems quite important, looking at the big picture.

Thanks for the help in advance,
Slavko

Your code so far


const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
const squareList = (arr) => {
  "use strict";
  // change code below this line
  const squaredIntegers = arr.filter(one => Number.isInteger(one) && one > 0).map(two => two*two);
  // change code above this line
  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions

2

Yes, they are. This is confusing, which it is best not to have to variables with the same name in overlapping scopes. But they did it here to help you understand that you can have name collisions like this and what happens.

1 Like
3

Yep. They are two different things. If you recall Global vs. Local Scope in Functions

It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedence over the global variable.

4

Thanks for the help @kevinSmith and @ArielLeslie

Just in the next challenge I ran into a similar thing, this time with function calls…

How are we able to call the function with the parameters number, value that is declared within the global-level scope function of the same name? :face_with_raised_eyebrow: Since we declare the first increment variable to be a function without parameters…

const increment = (function() {
  "use strict";
  return function increment(number, value = 1) {
    return number + value;
  };
})();
console.log(increment(5, 2)); // returns 7
console.log(increment(5)); // returns 6
5

The value of increment is a function that takes no arguments and executes immediately. This returns another function with those parameters. So the value of increment is a function with those parameters. And, importantly, that function will execute in strict mode because of that “use strict” statement. Yes, this is super confusing for lots of people: the entire point is that last bit, and it’s not to do with what this part of the curriculum is trying to teach, it’s there for the benefit of the tests

1 Like
6

Scope in 64 lines (mostly comments)

/*
Demonstrating block scope. this holds true for just
about everything but variables defined with "var" and
function declarations. Even they mostly follow it with
a couple caveats, so it is useful to keep in mind 
*/

/*
global variable. Available to any functions declared
in same global space.
*/
const foo = "bar";
let baz = "bing";

/*
For a function, the parameters (input in this case) can
be considered as having a "let" in front of them and
are therefore local to the scope of the function they
are passed into.
*/
const test = (input) => {
  /*
  This "foo" may have the same name as the global "foo"
  but the "const" keyword tells JS that you are
  declaring a new variable with that name for just this
  scope and those inside it, assigning it the vaule of
  input.
  */
  const foo = input;
  /*
  This is a brand new variable defined within the scope
  of "test"
  */
  const inside = "I will not be available outside test";
  {
    /*
    Brackets define scope. This is a scope inside of
    test. the "foo" inside here is the one defined on
    line 29 inside test. The baz is the global baz.
    */
    console.log({"inner scope foo": foo, "inner scope baz": baz});
  }
  /*
  uncomment foo = input next line to demonstrate.
  It will throw an "Assignment to constant" error.
  */
  //foo = input;
  /*
  Assign the value of "input" to "baz" this will be the global "baz" because we never declared a local "baz" with "const" or "let".
  */
  baz = input;
  /*
  Return the local "foo" with the value of "input",
  in the global space this will be seen as the value of
  "test".
  */
  return foo;
}
console.log({"global foo": foo, "global baz": baz, "test function (inner foo)": test("alma"), "global foo after running test()": foo, "Global baz after running test()": baz})
/*
Uncomment console.log(inside) to demonstrate.
It will throw an "inside is not defined" error.
*/
//console.log(inside);