CODEWITHSUNDEEP
javascript
deeFall
deeFall

Reputation: 1

Javascript: Lexical and execution scope

Just trying to wrap scoping around my head :-)

How can I refactor this code in order to be able to output 'a', 'b' and 'c' within function third()?

Any explanation without confusion and unnecessary theory would help.

var a = 1;

first = () => {
  let b = 2;
  second = () => {
    let c = 3;
    console.log(a, b); // Output 1, 2
    third(); // Output 1, 2, 3
  }
  console.log(a); // Output 1
  second();
}

third = () => {
  console.log(a, b, c);
}

first();

Upvotes: 0

Views: 56

Answers (5)

Sergey
Sergey

Reputation: 7682

In comments it's written right that you have to pass your variables. Function third has an access to the variable a but not to b and c, since they are scoped locally in function first and second.

Functions look for a variable within themselves, then within parent and so on towards the global.

So function second contains variable c, but not a and b. It looks within it's parent which has variable b and then global variable a. However, function third is not nested, so the next scope it looks for a variable is global scope which contains only variable a

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68433

Any explanation without confusion and unnecessary theory would help

b and c are not locally scoped to first, so either define third where b and c are accessible 

var a = 1;

first = () => {
  let b = 2;
  second = () => {
    let c = 3;
    console.log(a, b); 
    third = () => { //defined it inside second
      console.log(a, b, c);
    };
    third(); 
  }
  console.log(a); 
  second();
}

first();

Or, pass a, b and c as an argument to third while invoking the same.

var a = 1;

first = () => {
  let b = 2;
  second = () => {
    let c = 3;
    console.log(a, b);
    third(a,b,c); // pass a, b and c as parameters
  }
  console.log(a); 
  second();
}

third = (a,b,c) => { //accept a, b and c
  console.log(a, b, c);
}

first();

Upvotes: 0

sandeep chauhan
sandeep chauhan

Reputation: 66

Hope, this is what you are looking for =>

var a = 1, b, c;

first = () => {
    b = 2;
    second = () => {
        c = 3;
        console.log(a, b); // Output 1, 2
        third(); // Output 1, 2, 3
     }
    console.log(a); // Output 1
    second();
}

third = () => {
    console.log(a, b, c);
}

first();

Upvotes: 0

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

The simplest answer is to simple make all three variables global by defining them outside of any function and just fill them with values when you need to.

var a = 1;
let b;
let c;

first = () => {
  b = 2;
  second = () => {
    c = 3;
    console.log(a, b); // Output 1, 2
    third(); // Output 1, 2, 3
  }
  console.log(a); // Output 1
  second();
}

third = () => {
  console.log(a, b, c);
}

first();

Upvotes: 0

Garrigan Stafford
Garrigan Stafford

Reputation: 1403

b is not defined in the scope of the function third(). You will also get the same error for c. If you move the definition of third inside of second it will gain access to the scope of first and second since it would become a closure of them and then you will get expected behavior.

var a = 1;

first = () => {
  let b = 2;
  second = () => {
    let c = 3;
    console.log(a, b); // Output 1, 2
    third = () => {
        console.log(a, b, c);
    }
    third(); // Output 1, 2, 3
  }
  console.log(a); // Output 1
  second();
}


first();

EDIT: Typo

Upvotes: 1

Related Questions