Article Categories

Selected Reading

JavaScript symbol.@@toPrimitive() function

Javascript Web Development Object Oriented Programming

The Symbol.toPrimitive method defines how an object should be converted to a primitive value when used in operations that require type coercion. This method is called automatically by JavaScript when an object needs to be converted to a primitive type.

Syntax

object[Symbol.toPrimitive](hint)

The hint parameter specifies the preferred type of conversion:

"number" - when numeric conversion is preferred
"string" - when string conversion is preferred
"default" - when no specific preference (used in == comparison)

Basic Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Symbol.toPrimitive Example</title>
</head>
<body>
    <div id="result"></div>
    
    <script>
        let obj = {
            value: 42,
            [Symbol.toPrimitive](hint) {
                console.log(`Hint: ${hint}`);
                if (hint === 'number') {
                    return this.value;
                }
                if (hint === 'string') {
                    return `Value: ${this.value}`;
                }
                return this.value; // default
            }
        };

        // Different conversion scenarios
        let result = '';
        result += 'Number conversion: ' + (obj + 10) + '<br>';
        result += 'String conversion: ' + String(obj) + '<br>';
        result += 'Default conversion: ' + (obj == 42) + '<br>';
        
        document.getElementById('result').innerHTML = result;
    </script>
</body>
</html>

Number conversion: 52
String conversion: Value: 42
Default conversion: true

Advanced Example with Custom Object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom toPrimitive</title>
</head>
<body>
    <div id="output"></div>
    
    <script>
        class Temperature {
            constructor(celsius) {
                this.celsius = celsius;
            }
            
            [Symbol.toPrimitive](hint) {
                switch (hint) {
                    case 'number':
                        return this.celsius;
                    case 'string':
                        return `${this.celsius}°C`;
                    default:
                        return this.celsius;
                }
            }
        }

        let temp = new Temperature(25);
        let output = '';
        
        // Mathematical operations trigger 'number' hint
        output += 'Temperature + 5 = ' + (temp + 5) + '<br>';
        
        // String concatenation triggers 'string' hint
        output += 'Today is ' + temp + '<br>';
        
        // Comparison triggers 'default' hint
        output += 'Is 25°? ' + (temp == 25) + '<br>';
        
        document.getElementById('output').innerHTML = output;
    </script>
</body>
</html>

Temperature + 5 = 30
Today is 25°C
Is 25°? true

When Symbol.toPrimitive is Called

JavaScript automatically calls Symbol.toPrimitive in these situations:

Mathematical operations (+, -, *, /)
String concatenation
Equality comparisons (==)
Explicit type conversions (Number(), String())

Comparison with Other Conversion Methods

Method	Priority	Use Case
`Symbol.toPrimitive`	Highest	Custom conversion logic
`valueOf()`	Medium	Numeric conversion fallback
`toString()`	Lowest	String conversion fallback

Conclusion

Symbol.toPrimitive provides fine-grained control over object-to-primitive conversion. It takes precedence over valueOf() and toString(), making it the preferred method for custom conversion behavior.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

172 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next