The JavaScript valueOf() Method – What Does it Actually Do?

This quick tutorial will explain the JavaScript valueOf() Method, what it does, and why you might use it.

The JavaScript valueOf() method gets the primitive value of the object it is called from. Usually you will not need to call it, however it does have its use cases.

Primitives vs Objects

In JavaScript, a value or variable has a type of value. A primitive is a value that is not an object, with no methods or properties, representing only the data that it exists as.

JavaScript has 7 primitive data types:

• string
• number
• bigint
• boolean
• undefined
• symbol
• null

JavaScript valueOf() Method Syntax

The syntax for the valueOf() Method is as follows:

OBJ.valueOf()

Note that:

• OBJ is any object which you wish to receive the primitive value of
• valueOf() will return the primitive value of OBJ
  • If there is no primitive value for OBJ, the object itself will be returned

valueOf() is not something you should need to use often, if at all – it is called automatically where the primitive value of an object is expected.

valueOf() Method Examples

Overriding the valueOf() Method

If you are working with your own custom objects, you may wish to override the value which is returned by valueOf(), for example to return a string representation of an object in a specific format.

This is done by simply assigning a new valueOf() function to the objects class:

CLASS.prototype.valueOf = function() 
{ 
    return VALUE; 
};

Note that:

• CLASS should be the name of the class you wish to update the valueOf() method for
• VALUE should be the value you wish to return when valueOf() is invoked for any object of the given class

Using valueOf()

In the below example, a String object is created, and valueOf() is called – returning the primitive string value.

var myString = "hello";
console.log(myString.valueOf()); // Outputs "hello"

As you can see, it’s not all that useful in this context – you could have just used the original myString variable without valueOf().

ValueOf and Objects

If an object has no primitive value, the object itself will be returned:

var myVar = {name: "Jim" , age: 23};
console.log(foo.valueOf()); // Outputs the original object

If the valueOf() method is overridden a primitive value can be set:

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

customClass.prototype.valueOf = function() {
    return this.name + " is " + this.age;
};

var myVar = new customClass("Jim", 23);
console.log(myVar.valueOf());// Outputs "Jim is 23"

Above, valueOf() returns a string representation of for objects of customClass, joining the information contained in the class into a single string. Objects of customClass now have a primitive value.