Michael Teifel Michael Teifel - 1 month ago 8
Javascript Question

JS Assigning a New Object to a previously used variable (TypeError: mangoFruit.showName is not a function)

I'm running through a basic tutorial on JavaScript Objects. And I am creating an Object using the function constructor:

function Fruit () {};


Then I am defining a function on that Objects Prorotype:

Fruit.prototype.showName = function () {
console.log("This is a " + this.fruitName);
}


I am then instantiating that object and calling the function on that object.

var mangoFruit = new Fruit();
mangoFruit.showName();


And using Node I get the following error:

TypeError: mangoFruit.showName is not a function


I'm using SublimeText3 with a package that allows me to execute my JavaScript file directly in the console. It does this by making a call to Node.

Edit: I get the same error when running node from my terminal.

My Code:

function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) {

this.color = theColor;
this.sweetness = theSweetness;
this.fruitName = theFruitName;
this.nativeToLand = theNativeToLand;

this.showName = function () {
console.log("This is a " + this.fruitName);
}

this.nativeTo = function () {
this.nativeToLand.forEach(function(eachCountry) {
console.log("Grown in: " + eachCountry);
});
}
}

var mangoFruit = new Fruit("Yellow", 8, "Mango", ["South America", "Central America", "West Africa"]);
mangoFruit.showName(); // This is a Mango.
mangoFruit.nativeTo();

function Fruit () {};

Fruit.prototype.color = "Yellow";
Fruit.prototype.sweetness = 7;
Fruit.prototype.fruitName = "Generic Fruit";
Fruit.prototype.nativeToLand = "USA";

Fruit.prototype.showName = function () {
console.log("This is a " + this.fruitName);
}

Fruit.prototype.nativeTo = function () {
console.log("Grown in: " + this.nativeToLand);
}

var mangoFruit = new Fruit();
mangoFruit.showName();
mangoFruit.nativeTo();


Node JS Error

/Users/michael/Library/Mobile Documents/com~apple~CloudDocs/CodingInterviewPrep/JavaScriptTutorials/ProtoTypes.js:20
mangoFruit.showName(); // This is a Mango.
^

TypeError: mangoFruit.showName is not a function
at Object.<anonymous> (/Users/michael/Library/Mobile Documents/com~apple~CloudDocs/CodingInterviewPrep/JavaScriptTutorials/ProtoTypes.js:20:12)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3


Node Version

node -v
v6.8.1

Answer

It's called Hoisting

Your code as you have written it (simplified for clarity):

function Fruit() {

};

var fruit = new Fruit();
fruit.showName();

function Fruit() {
    console.log('second definition of Fruit');
};

Fruit.prototype.showName = function () {
    console.log("This is a " + this.fruitName);
}

Now as node.js sees it and processes it:

var fruit;
function Fruit() {

};

function Fruit() {
    console.log('second definition of Fruit');
};

fruit = new Fruit();
fruit.showName();

Fruit.prototype.showName = function () {
    console.log("This is a " + this.fruitName);
}

As You can see You have overwritten Fruit function (the second definition has moved above new Fruit() call) while Fruit.prototype.showName did not. So when you called showName it was not defined yet.