Why does function getVehicleName prints the global variable vehicleName instead of variable vehicleName inside the Vehicle object?

Question

I declared a vehicleName variable in the global scope as well as inside the Vehicle object and the fucntion printVehicleName in the global scope and getVehicleName inside the Vehicle object. When i call the two functions both prints the vehicleName declared on the global scope. Why does it happen?

//declaring a global variable
let vehicleName = "Dodge";

//declaring  a method to print vehicleName
function printVehicleName(){
    console.log(vehicleName);
}

//declaring a object using object literal notation
let Vehicle = {
    vehicleName : "Ferrari",
    getVehicleName : printVehicleName
};

//executing printVehicleName function
printVehicleName();

//executing getVehicleName function
Vehicle.getVehicleName();

I expected the getVehicleName function to print "Ferrari" but When i call the two functions both prints the vehicleName declared on the global scope "dodge". Can anyone explain the reasons for this and a way to print "Ferrai"?

Answer 1

You need to actually create a method and use this to set the context to the vehicleName inside the Vehicle object.

An object can refer to its self property before it is created

 let vehicleName = "Dodge"; //declaring a method to print vehicleName function printVehicleName() { console.log(vehicleName); } //declaring a object using object literal notation let Vehicle = { vehicleName: "Ferrari", getVehicleName: function() { return this.vehicleName } }; //executing printVehicleName function printVehicleName(); //executing getVehicleName function console.log(Vehicle.getVehicleName()); 

You can resuse printVehicleName . This line printVehicleName(vcName = vehicleName) will take default vehicleName but when calling from the getVehicleName you can can pass the context

 //declaring a global variable let vehicleName = "Dodge"; //declaring a method to print vehicleName function printVehicleName(vcName = vehicleName) { return vcName; } //declaring a object using object literal notation let Vehicle = { vehicleName: "Ferrari", getVehicleName: function() { return printVehicleName(this.vehicleName) } }; //executing printVehicleName function printVehicleName(); //executing getVehicleName function console.log(Vehicle.getVehicleName()); 

Answer 2

In your function use the keyword this.

this.vehicleName

Use this to access the object properties.

Answer 3

Below are the reason why you're getting Dodge .

1. printVehicleName() will always refer to global variable (even if it gets assigned to a method within an object)

2. Vehicle.getVehicleName() is the same as printVehicleName()

    //declaring a global variable let vehicleName = "Dodge"; //declaring a method to print vehicleName function printVehicleName(){ console.log(vehicleName); // vehicleName is global variable } //declaring a object using object literal notation let Vehicle = { vehicleName : "Ferrari", getVehicleName : printVehicleName // Referring to the global function }; //executing printVehicleName function printVehicleName(); //executing getVehicleName function Vehicle.getVehicleName(); // This is == to printVehicleName() 

To have a Vehicle object that prints its own variable, you need to use this variable.

In short, you cannot reuse printVehicleName for a method within an object since it will no longer work properly if you print this.vehicleName .

You need a different method within an object like so.

    let Vehicle = {
        vehicleName: "Ferrari",
        getVehicleName: function() { console.log(this.vehicleName); }
    };

Answer 4

i changed vehicle declaration part first change the value of vehicleName then call printVehicleName function

  let vehicleName = "Dodge"; //declaring a method to print vehicleName function printVehicleName( ) { console.log(vehicleName); } //declaring a object using object literal notation let Vehicle = { vehicleName:"Ferrari", getVehicleName: function () { vehicleName = this.vehicleName; printVehicleName() } }; //executing printVehicleName function printVehicleName(vehicleName); //executing getVehicleName function Vehicle.getVehicleName();