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
Built-in javascript constructors?
In this article, we are going to discuss about the Built-in JavaScript constructors with appropriate examples in JavaScript.
JavaScript has provided some built-in constructors for native objects. These built-in functions include Object(), String(), Boolean(), RegExp(), Number(), Array(), Function(), and Date().
Note: We cannot include the Math object in those built-in constructors because Math is a global object. The new keyword cannot be used with Math.
Let's understand this concept in a better way with the help of examples further in this article.
String() Constructor
The String() constructor converts values to strings. Here's an example demonstrating string conversion:
<!DOCTYPE html>
<html>
<head>
<title>Built-in JavaScript Constructors</title>
</head>
<body style="text-align: center">
<h3>String() - Built-in JavaScript Constructor</h3>
<p id="valueToString"></p>
<script>
var value1 = 3.14;
var value2 = String(value1);
document.getElementById("valueToString").innerHTML = "The converted value to string is: " + value2 + " (type: " + typeof value2 + ")";
</script>
</body>
</html>
The converted value to string is: 3.14 (type: string)
Number() Constructor
The Number() constructor converts various data types to numbers. It handles strings, booleans, dates, and arrays:
<!DOCTYPE html>
<html>
<head>
<title>Built-in JavaScript Constructors</title>
</head>
<body style="text-align: center">
<h3>Number() - Built-in JavaScript Constructor</h3>
<p id="numberResults"></p>
<script>
let a = Number("100");
let b = Number("100.234");
let c = Number(true); // returns 1 for true, 0 for false
let d = Number("true"); // returns NaN for non-numeric strings
let e = Number(new Date()); // returns milliseconds since Jan 1, 1970
let f = Number([1.2]);
document.getElementById('numberResults').innerHTML =
`Number("100") is ${a} <br/>
Number("100.234") is ${b} <br/>
Number(true) is ${c} <br/>
Number("true") is ${d} <br/>
Number(new Date()) is ${e} <br/>
Number([1.2]) is ${f}`;
</script>
</body>
</html>
Number("100") is 100
Number("100.234") is 100.234
Number(true) is 1
Number("true") is NaN
Number(new Date()) is 1735076234567
Number([1.2]) is 1.2
Boolean() Constructor
The Boolean() constructor converts values to true or false. Falsy values include 0, empty strings, null, undefined, and NaN:
<!DOCTYPE html>
<html>
<head>
<title>Built-in JavaScript Constructors</title>
</head>
<body style="text-align: center">
<h3>Boolean() - Built-in JavaScript Constructor</h3>
<p id="boolResults"></p>
<script>
var value1 = 0;
var value2 = '';
var value3 = null;
var value4 = 'Hello';
var value5 = 1234;
document.getElementById("boolResults").innerHTML =
"Boolean(0) is: " + Boolean(value1) + '<br/>' +
"Boolean('') is: " + Boolean(value2) + '<br/>' +
"Boolean(null) is: " + Boolean(value3) + '<br/>' +
"Boolean('Hello') is: " + Boolean(value4) + '<br/>' +
"Boolean(1234) is: " + Boolean(value5);
</script>
</body>
</html>
Boolean(0) is: false
Boolean('') is: false
Boolean(null) is: false
Boolean('Hello') is: true
Boolean(1234) is: true
Object() and Constructor Types
Every constructor in JavaScript creates objects. When you use the new keyword with built-in constructors, they all return objects:
<!DOCTYPE html>
<html>
<head>
<title>Built-in JavaScript Constructors</title>
</head>
<body style="text-align: center">
<h3>Built-in Constructor Types</h3>
<p id="typeResults"></p>
<script>
const a1 = new String();
const a2 = new Number();
const a3 = new Boolean();
const a4 = new Object();
const a5 = new Array();
const a6 = new Date();
document.getElementById("typeResults").innerHTML =
`new String() type: ${typeof a1} <br/>
new Number() type: ${typeof a2} <br/>
new Boolean() type: ${typeof a3} <br/>
new Object() type: ${typeof a4} <br/>
new Array() type: ${typeof a5} <br/>
new Date() type: ${typeof a6}`;
</script>
</body>
</html>
new String() type: object new Number() type: object new Boolean() type: object new Object() type: object new Array() type: object new Date() type: object
Key Points
When using built-in constructors:
-
Without
new: Functions likeString(),Number(), andBoolean()perform type conversion -
With
new: They create object wrappers around primitive values -
Best Practice: Use constructor functions without
newfor type conversion, and avoid object wrappers for primitives
Conclusion
JavaScript's built-in constructors provide essential functionality for type conversion and object creation. Understanding the difference between using them with and without the new keyword is crucial for effective JavaScript programming.
1K+ Views
