Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript date.@@toPrimitive() function
The JavaScript @@toPrimitive method (accessed via Symbol.toPrimitive) converts a Date object into a primitive value based on the specified hint. This method is called internally during type coercion but can also be invoked explicitly.
Syntax
date[Symbol.toPrimitive](hint)
Parameters
The hint parameter specifies the preferred type of conversion:
-
"default"- Returns string representation (same astoString()) -
"string"- Returns string representation -
"number"- Returns numeric value (milliseconds since Unix epoch)
Example: Using Symbol.toPrimitive with Different Hints
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date toPrimitive Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
margin: 20px 0;
}
.output {
background: #f5f5f5;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>JavaScript Date @@toPrimitive Function</h1>
<div class="result"></div>
<button class="btn">Convert Date to Primitives</button>
<script>
let resultDiv = document.querySelector(".result");
let date = new Date('2024-01-15T10:30:00');
document.querySelector(".btn").addEventListener("click", () => {
let defaultHint = date[Symbol.toPrimitive]("default");
let stringHint = date[Symbol.toPrimitive]("string");
let numberHint = date[Symbol.toPrimitive]("number");
resultDiv.innerHTML = `
<div class="output">
<strong>Original Date:</strong> ${date}<br>
<strong>Hint = "default":</strong> ${defaultHint}<br>
<strong>Hint = "string":</strong> ${stringHint}<br>
<strong>Hint = "number":</strong> ${numberHint}
</div>
`;
});
</script>
</body>
</html>
Output
When you click the button, you'll see:
Original Date: Mon Jan 15 2024 10:30:00 GMT+0000 (UTC) Hint = "default": Mon Jan 15 2024 10:30:00 GMT+0000 (UTC) Hint = "string": Mon Jan 15 2024 10:30:00 GMT+0000 (UTC) Hint = "number": 1705314600000
Comparison of Hint Types
| Hint | Return Type | Description |
|---|---|---|
"default" |
String | Human-readable date string |
"string" |
String | Same as default for Date objects |
"number" |
Number | Milliseconds since January 1, 1970 UTC |
Automatic Conversion Example
<!DOCTYPE html>
<html>
<body>
<script>
let date = new Date('2024-01-15');
// Automatic conversion in different contexts
console.log("String context:", "Today is " + date);
console.log("Numeric context:", date - 0);
console.log("Comparison:", date > new Date('2023-01-01'));
document.write("<p>String context: Today is " + date + "</p>");
document.write("<p>Numeric context: " + (date - 0) + "</p>");
document.write("<p>Comparison result: " + (date > new Date('2023-01-01')) + "</p>");
</script>
</body>
</html>
Key Points
- For Date objects,
"default"and"string"hints produce the same result - The
"number"hint returns the timestamp value - This method is called automatically during type coercion
- Useful for understanding how JavaScript converts dates in different contexts
Conclusion
The @@toPrimitive method provides control over how Date objects are converted to primitive values. Understanding this method helps explain JavaScript's automatic type conversion behavior with dates.
Updated on: 2026-03-15T23:18:59+05:30
122 Views
Advertisements