why code after the return statement is reachable in javascript

Question

I am new in JavaScript , and i have one confusion.
As we always taught that code after the return statement is unreachable.
But this is not true in below case and i am not able to understand why its so.

function foo() {

  //define bar once
  function bar() {
      return 3;
  }

  //redefine it
  function bar() {
      return 8;
  }

  //return its invocation
  return bar(); //8
}
alert(foo());

http://jsfiddle.net/jainhimanshu/euga4mcy/
and output is 8 but it should be 3.

So can anyone clear me the concept.

Essentially, you are saying: x = 3 then x = 8. So why are you expecting x == 3? — Johan
– Johan, Commented Sep 9, 2015 at 9:37
@Johan Sorry, but no. It never says x = 3. The first function is never called as it's overwritten by the second one. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 9, 2015 at 9:40
@Archer fine, bar = 3 then bar = 8 then return bar... is exactly what I said and what is written out above. — Johan
– Johan, Commented Sep 9, 2015 at 9:42
@Johan - no you're misunderstanding me. The first bar() function doesn't exist as it's overridden by the second. Literally, it is never called so there is never a return value of 3. It's 8 and only 8. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 9, 2015 at 9:43
Hi @Johan if we do like this jsfiddle.net/jainhimanshu/euga4mcy/1 then also its output is 8 , why its so — Himanshu Jain
– Himanshu Jain, Commented Sep 9, 2015 at 9:44

Tushar · Accepted Answer · 2015-09-09 09:41:13Z

4

This is because you've to call the function to get the return value from it.

The function bar is not called, it is only defined.

So, when the function foo() is called

return bar();

from foo is executed and 8 is returned.

The Compiler sees the foo as follow(after overriding the bar):

function foo() {
    function bar() {
        return 8;
    }

    return bar();
}
alert(foo());

When return bar() is reached, the function bar is called and it's value is returned.

After invocation of bar

function foo() {
    return 8;
}
alert(foo());

edited Sep 9, 2015 at 9:41

answered Sep 9, 2015 at 9:34

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Himanshu Jain Over a year ago

Hi @Tushar , i understand the hoisting , but cannot able to mug one thing that how one function override the definition of another function definition and suppose if the definition of two function is different but there name is same ,then what the result. Please explore

Tushar Over a year ago

@HimanshuJain The function which is defined earlier is overriden by the later, this is what is happening in your case

Himanshu Jain Over a year ago

yes @Tushar that i understand but what happened if the function definition is totally different but the function name is same then again they earlier is overriden by later function

Tushar Over a year ago

@HimanshuJain Yes. Run this in console. function a(a, b) { alert('In first'); } function a () { alert('In second'); }a();

Himanshu Jain Over a year ago

one last question @Tushar , now i understand that earlier function is overridden by later function . but what we have done in earlier function is still exist or it will completely be overridden by later function i.e we get combine part of two function or the only later function in result when we call the function

|

Nermin · Accepted Answer · 2015-09-09 11:23:46Z

0

function foo(){
  // ....
}

creates new Function object, and assignees name foo to it. It is still no where called, just created, so any return statement will not be triggered.

When inside this function you create new Functions, like

function foo(){
  function bar() {
    return 3;
  }
  return 4;
}
// after you execute foo
console.log(foo()); // will log 4

But very important that inside this lexical scope, function bar is created, but no where executed. See also Lexical scope

But when you have this

function foo(){
  function bar(){
    return 3;
  }
  function bar() {
    return 8;
  }
  return bar();
}
// after you execute foo
console.log(foo()); // will log 8

When you execute function foo inside global scope, it creates Function object named bar, then it creates new Function object named bar, the old one is redefined, same as assigning new value to variable, value changes, but in this context function body that is assigned to Function name has change.

Because your function foo has return keyword, it returns that value. Value that it returns is value that returns function bar, as return bar(); will execute function bar and return value it receives from function bar, in example it is value 8.

Compare variable redefinition with function redefinition

var a;
a = "some string";
a = 5; // a has value 5, no mater older values
// same goes for functions
function bar(){ .... }
function bar(){ .... }
function bar(){ .... }
// invoke bar
bar(); // last function bar will be executed, no mater other function's bar definitions

edited Sep 9, 2015 at 11:23

answered Sep 9, 2015 at 9:44

Nermin

6,11016 silver badges23 bronze badges

1 Comment

Himanshu Jain Over a year ago

Hi @Nermin , I understand your point but what happened if the definition of two functions bar which is defined inside the function foo is totally different then , how they will be redefined and what will be the output.

Collectives™ on Stack Overflow

why code after the return statement is reachable in javascript

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related