JavaScript - valueOf() method

revision:

Category : string

The valueOf() method returns the primitive value of a string. The method does not change the original string. It can be used to convert a string object into a string.

Syntax : 

        string.valueOf()

Parameters: none

Examples:

        <p>valueOf() returns the primitive value of a string:</p>
        <p id="demo"></p>
        <script>
            let text = "Hello World!";
            let result = text.valueOf();
            document.getElementById("demo").innerHTML = result;
        </script>

Category : array

The valueOf() method returns the array itself. The method does not change the original array.

Syntax : 

        array.valueOf()

Parameters: none

Examples:

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        const myArray = fruits.valueOf();
        fruits.valueOf() returns the same as fruits.

Category : object

The valueOf() method of Object instances converts the "this" value to an object. This method is meant to be overridden by derived objects for custom type conversion logic.

Syntax : 

        valueOf()

Parameters: none

Examples:

        function MyNumberType(n) {
            this.number = n;
        }
        MyNumberType.prototype.valueOf = function() {
            return this.number;
        };
        const object1 = new MyNumberType(4);
        console.log(object1 + 3);
        // Expected output: 7

Category : number

The valueOf() method returns the wrapped primitive value of a Number object.

Syntax : 

       valueOf()

Parameters: none

Examples:

        const numObj = new Number(42);
        console.log(typeof numObj);
        // Expected output: "object"

        const num = numObj.valueOf();
        console.log(num);
        // Expected output: 42

        console.log(typeof num);
        // Expected output: "number"

Practical examples

example: the valueOf() method returns the primitve value of a string

code: 
                    <div>
                        <p id="value-1"></p>
                        <p id="value-2"></p>
                        <p id="value-3"></p>
                        <p id="value-4"></p>
                        <p id="value-5"></p>
                    </div>
                    <script>
                        let text = "Hello World!";
                        document.getElementById("value-1").innerHTML = "text : " + text;
                        let result = text.valueOf();
                        document.getElementById("value-2").innerHTML = "text valueOf() : " + result;
            
                        let result1 = text;
                        document.getElementById("value-3").innerHTML = "text : " + result1;
            
                        let text1 = new String("Hello World!");
                        document.getElementById("value-4").innerHTML = "text - new String : " + text1;
                        let result2 = text1.valueOf()
                        document.getElementById("value-5").innerHTML = "text-new String -valueOf() : " + result2;
                    </script>

example: get the value of fruits.

valueOf() returns the array itself:

"fruits.valueOf()"" returns the same as "fruits":

code: 
                    <div>
                        <p>valueOf() returns the array itself:</p>
                        <p id="value-6"></p>
                        <p id="value-7"></p>
                        <p>"fruits.valueOf()"" returns the same as "fruits":</p>
                        <p id="value-8"></p>
                        
                    </div>
                    <script>
                        const fruits = [" Banana", " Orange", " Apple", " Mango"];
                        document.getElementById("value-6").innerHTML = "original array : " + fruits;
                        const myArray = fruits.valueOf();
                        document.getElementById("value-7").innerHTML = "fruits.valueOf() : " + myArray;
            
                        const myArray1 = fruits;
                        document.getElementById("value-8").innerHTML = "fruits : " + myArray1;
                    </script>

example: using the valueOf() method on numbers

code: 
                    <div>
                        <p id="value-9"></p>
                        <p id="value-10"></p>
                        <p id="value-11"></p>
                        
                    </div>
                    <script>
                        const numObj = new Number(10);
                        console.log(typeof numObj); // object
                        document.getElementById("value-9").innerHTML = "type of number object : " + typeof numObj;
                        const num = numObj.valueOf();
                        console.log(num); // 10
                        console.log(typeof num); // number
                        document.getElementById("value-10").innerHTML = "number : " + numObj;
                        document.getElementById("value-11").innerHTML = "type of number : " + typeof num;
                    </script>

example: using the valueOf() method on objects.

code: 
                    <div>
                        <p id="value-12"></p>
                        <p id="value-13"></p>
                        <p id="value-14"></p>
                        
                    </div>
                    <script>
                        const num2 = 123
                        const bool = true
                        const str = 'Klaus'
            
                        console.log(num2.valueOf()) // => 123
                        console.log(bool.valueOf()) // => true
                        console.log(str.valueOf()) // => Klaus
                        document.getElementById("value-12").innerHTML = "number : " + num2.valueOf();
                        document.getElementById("value-13").innerHTML = "boolean : " + bool.valueOf();
                        document.getElementById("value-14").innerHTML = "string : " + str.valueOf();
                    </script>