CODEWITHSUNDEEP
javascriptjavascript-objects
Sandeep Gadhiya
Sandeep Gadhiya

Reputation: 57

Javascript return undefined And Object fact

I just checked javascript functions behavior And i also want to know everyone to check it and tell me the difference between those two javascript function behavior

Sample Code is As follows

document.write("Hello");


var one = foo1();
var two = foo2();

document.writeln(two);
document.writeln(one);


function foo2 (){
   return 
   {
            bar:"hello"
   };

}

function foo1 (){
   return {
            bar:"hello"
   };

}

And OUTPUT is

Hello undefined [object Object]

I just want to know How ??

Upvotes: 0

Views: 132

Answers (5)

Marco
Marco

Reputation: 198

Ahah! This is one of Javascript problem (or trick?)

As you might noticed, you don't always have to insert the final semicolon at the end of your instructions. For exemple, 

let x = '3'

is the same as let x = '3'; Actually, the browser will always reads it like the second line. This is due to the ASI (Auto Semicolon Insertion) that tries to insert semicolon in an intelligent way.

But the problem is that we do not see the real action of ASI, making it harder to debug.

Here's how the first function is transformed :

function foo1 (){
   return {
            bar:"hello"
   };
}

And here's how the second function is transformed :

function foo2 (){
   return ;
   {
            bar:"hello"
   };

}

(Note the ";" just after the return )

And that's why identation is much more important than you can think!

You may want to interest you about the ASI :

Upvotes: 0

Andrei Todorut
Andrei Todorut

Reputation: 4536

The body of the return statement has to stay on the same line.

You get undefined in foo1() because you don't return nothing, that's because of ASI.

return // this returns undefined
{
    "foo": "bar"
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return#Automatic_Semicolon_Insertion

Upvotes: 0

nikos fotiadis
nikos fotiadis

Reputation: 1085

In javascript you dont need ; to end a line of code so foo2() returns with no value(undefined) when it reaches the return statement, that is why you see undefined, and parses the rest like a block of code, but never reaches it. The second function does what you expect it to and returns the object. If you write document.writeln(one.bar); you should see Hello.

Upvotes: 0

nadavvadan
nadavvadan

Reputation: 4190

The following does not work as you expect:

function foo2 (){
   return 
   {
            bar:"hello"
   };

}

the return statement is executed, and then { bar:"hello" }; is just a code block; an unreachable one, because it comes right after the return statement is evaluated. To fix it, make sure the return statement is on the same line as the object's opening curly bracket:

function foo2 (){
   return {
            bar:"hello"
   };

}

Now for the printing part - document.writeln() accepts calls .toString() on its argument, which for objects means printing [object object].
run JSON.stringify() on the objects before printing them, like so:

function toJSON(arg) {
    return JSON.stringify(arg, null, 2)
}

document.writeln(toJSON(two));
document.writeln(toJSON(one));
  • Note that I've used JSON.stringify(arg, null, 2) instead of just JSON.stringify(arg), because the 2 argument indicates spacing, causing it to be pretty-printed and more human readable.

Upvotes: 1

chintuyadavsara
chintuyadavsara

Reputation: 1569

The JavaScript specification describes a feature called Automatic Semicolon Insertion. Read more about this here 

document.write("Hello");


var one = foo1();
var two = foo2();

document.writeln(JSON.stringify(one));
document.write(JSON.stringify(two));


function foo2 (){
   return {
            bar:"hello"
   };

}

function foo1 (){
   return {
            bar:"hello"
   };

}

Upvotes: 0

Related Questions