CODEWITHSUNDEEP
javascript
Bharath
Bharath

Reputation: 1807

why does this return undefined - javascript

i'm pretty new to js. i'm sorry if this sounds dumb. but why does the following code return "undefined"

function NewPerson(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;

    this.getName = function(){
        //alert(this.name);
        alert("The age is "+this.age);
    };

}

var obj1 = new NewPerson("Mark",25,"Male");
alert("The age is as follows "+obj1.getName());

// output:

The age is 25 The age is as follows undefined

Upvotes: 3

Views: 2538

Answers (6)

Samuel Hulla
Samuel Hulla

Reputation: 7089

@Davenewton 's answer is correct and while I like it for its straightforwardness, it takes that
famous a-ha! moment for you to fully realize why. Here's what's really going on:

So to elaborate If we had something like this:

function i_am(){
  var a = 'very smart person';
  console.log(this.a);
}

var a = 'monkey';
i_am();

Depending on what linter or browser you might be using, this might either return

> "monkey" // (try the snippet)

or also

> "monkey"  
> undefined    // check the sreenshot

enter image description here

This is because of one simple reason, best understood if we go step-by-step how compiler "reads" the code.

  1. hoist the function i_am() declaration to top (undefined)
  2. hoist the var a declaration to top (undefined)
  3. assign 'monkey' to variable a (now string "monkey")
  4. execute/invoke the i_am() a function we have pre-declared
  5. create a local variable a and assign string "very smart person"
  6. console.log(this.a) returns 'monkey', because this refers to var/property a (same thing in this case) of the global object - call-site is from global object : i_am();
  7. Finish execution - but uh oh! We executed function and returned no value!

Now, depending on your environment, either it hides the undefined result from you, or it prints it out! Why? Because functions are looking to return a value. Just like with variable declaration, if you do

var a;
console.log(a);

it has not been assigned a value, hence it results after RHS in undefined.

Similar principle applies to function, where it's looking to return a value, but it doesn't return anything, hence resulting in undefined

In other words, it's not this that returns undefined. It's the invokation of i_am(); that returns undefined!

Hopefully it's clear to everybody now :)

Upvotes: 0

Ryan
Ryan

Reputation: 1557

As stated before, you didn't return anything in getName.

It looks like you don't really want to alert age in getName. Also, adding getName to each instance of the object in the constructor is inefficient. Use the prototype method instead. I am submitting the cleaned-up code for what you are probably going for:

    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    };
    Person.prototype.getName = function() {
        return this.name;
    };
    var obj1 = new Person("Mark",25,"Male");
    alert("The name is: "+obj1.getName());

By placing getName on the prototype, all instances of Person will have access to the same function, thus saving memory :) By using the statement this.getName = ... in the constructor function Person, you are making a new function for each instance of Person.

Upvotes: 0

RobG
RobG

Reputation: 147343

No one else mentioned it so I will - it is more efficient to put functions that will be the same for all instances on the constructor's prototype. Then you only have one instance of the function that is used by all instances, e.g.

function NewPerson(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
} 

NewPerson.prototype.getName = function() {
    alert("The age is "+this.age);
    return this.name;
}

Upvotes: 2

Soundar Rathinasamy
Soundar Rathinasamy

Reputation: 6728

If you want to get some value from called function you must use

return value;

So try 

function NewPerson(name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;

this.getName = function(){
    alert("The age is "+this.age);
    return this.name;
};
}  
var obj1 = new NewPerson("Mark",25,"Male");
alert("The name is as follows "+obj1.getName());

will work as you expected.

Upvotes: 0

Salil
Salil

Reputation: 47462

You have to explixitly return in you function

Following should work

function NewPerson(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;

    this.getName = function(){
        //alert(this.name);
        alert("The age is "+this.age);
    return this.age
    };

}

    var obj1 = new NewPerson("Mark",25,"Male");
    alert("The age is as follows "+obj1.getName());

Upvotes: 2

Dave Newton
Dave Newton

Reputation: 160170

Because you don't return anything.

Upvotes: 8

Related Questions