revision:
In JavaScript there are
5 different data types that can contain values (string, number, boolean, object, and function.),
6 types of objects (object, date, array, string, number, and boolean)
2 data types that cannot contain values (null and undefined).
Examples
<div class="spec">
<a id="id1"></a><br><br>
<a id="id2"></a><br><br>
<a id="id3"></a><br><br>
<a id="id4"></a><br><br>
<a id="id5"></a><br><br>
<a id="id6"></a><br><br>
<a id="id7"></a><br><br>
<a id="id8"></a><br>
</div>
<script>
let score = '100';
score = Number(score);
document.getElementById('id1').innerHTML = "number: " + (score + 1); // number: 101
document.getElementById('id2').innerHTML = "typeof number: " + (typeof score); // typeof number: number
let result1 = Number('hello');
let result2 = String(50);
let result3 = Boolean(100);
let result4 = Boolean(0);
let result5 = Boolean('0');
let result6 = Boolean('');
document.getElementById('id3').innerHTML = "typeof number converted into string: " + (result1, typeof result1); // typeof number converted into string: number
document.getElementById('id4').innerHTML = "typeof string: " + (result2, typeof result2); // typeof string: string
document.getElementById('id5').innerHTML = "typeof Boolean: " + (result3, typeof result3); // typeof Boolean: boolean
document.getElementById('id6').innerHTML = "typeof Boolean: " + (result4, typeof result4); // typeof Boolean: boolean
document.getElementById('id7').innerHTML = "typeof Boolean: " + (result5, typeof result5); // typeof Boolean: boolean
document.getElementById('id8').innerHTML = "typeof Boolean: " + (result6, typeof result6); // typeof Boolean: boolean
</script>
JavaScript variables can be converted to a new variable and another data type: 1/ by using a JavaScript function, and 2/ automatically by JavaScript itself.
The "typeof" operator can be used to find the data type of a JavaScript variable.
Note that:
The data type of NaN is number
The data type of an array is object
The data type of a date is object
The data type of null is object
The data type of an undefined variable is undefined
The data type of a variable that has not been assigned a value is also undefined
The "constructor" property returns the constructor function for all JavaScript variables.
Examples
<div class="spec">
<a id="id9"></a>
</div>
<script>
document.getElementById("id9").innerHTML =
"john".constructor + " ," +'<br>' + // function String() { [native code] } ,
(3.14).constructor + " ," +'<br>' + // function Number() { [native code] } ,
false.constructor + " ," +'<br>' + // function Boolean() { [native code] } ,
[1,2,3,4].constructor + ' ,' + "<br>" + // function Array() { [native code] } ,
{name:'john', age:34}.constructor + " ," +'<br>' + // function Object() { [native code] } ,
new Date().constructor + " ," + '<br>' + // function Date() { [native code] } ,
function () {}.constructor; // function Function() { [native code] }
</script>
You can check the constructor property to find out if an object is an Array (contains the word "Array").
This "home made" isArray() function returns true when used on an array.
<div>
<a id="id10"></a>
</div>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("id10").innerHTML = isArray(fruits); // true
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
Or even simpler, you can check if the object is an Array function.
<div class="spec">
<a id="id11"></a>
</div>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("id11").innerHTML = isArray(fruits); // true
function isArray(myArray) {
return myArray.constructor === Array;
}
</script>
The global method String() can convert numbers to strings. It can be used on any type of numbers, literals, variables, or expressions.
The conversion to string is usually obvious for primitive values.
Examples
<div class="spec">
<a id="id12"></a><br>
<a id="id13"></a><br>
<a id="id14"></a><br>
</div>
<script>
var x = 123;
document.getElementById("id12").innerHTML = "conversions to string: " +
String(x) + " , " +
String(123) + " , " +
String(100 + 23);
// conversions to string: 123 , 123 , 123
let value = true;
document.getElementById('id13').innerHTML = "type of value: " + (typeof value); // type of value: boolean
let value1 = String(value);
document.getElementById('id14').innerHTML = "type of value: " + (typeof value1); // type of value: string
</script>
The Number method toString() does the same.
Examples
:
<div class="spec">
<a id="id15"></a>
</div>
<script>
var x = 123;
document.getElementById("id15").innerHTML = "conversion to string: " +
x.toString() + " , " +
(123).toString() + " , " +
(100 + 23).toString();
// conversion to string: 123 , 123 , 123
</script>
The global method String() can convert booleans to strings. The Boolean method toString() does the same.
The global method String() can convert dates to strings. The Date method toString() does the same.
Numeric conversions occur in math operations and can also be performed with Number(value).
The global method Number() can convert strings to numbers. Strings containing numbers (like "3.14") convert to numbers (like 3.14). Empty strings (like "")convert to 0. Anything else converts to NaN (Not a Number).
Examples
<div>
<p id="id16"></p>
</div>
<script>
document.getElementById("id16").innerHTML =
Number("3.14") + "<br>" + // 3.14
Number(Math.PI) + "<br>" + // 3.141592653589793
Number(" ") + "<br>" + // 0
Number("") + "<br>" + // 0
Number("99 88") + "<br>" + // NaN
Number("John") + "<br>"; // NaN
</script>
The global method Number() can also convert booleans to numbers and can be used to convert dates to numbers.
Examples
<div class="spec">
<a id="id17"></a><br>
<a id="id18"></a><br>
<a id="id19"></a><br>
<a id="id20"></a><br>
<a id="id21"></a><br>
<a id="id22"></a><br>
<a id="id23"></a><br>
<a id="id24"></a>
</div>
<script>
document.getElementById('id17').innerHTML = "converting strings to numbers: " + ( "6" / "2" ); // converting strings to numbers: 3
let str = '123';
document.getElementById('id18').innerHTML = "string - type of: " + (typeof str); // string - type of: string
let num = Number(str);
document.getElementById('id19').innerHTML = "string to number - type of: " + (typeof num); // string to number - type of: number
let age = Number('an arbitrary number instead of a number');
document.getElementById('id20').innerHTML = "string :" + age; // string :NaN
document.getElementById('id21').innerHTML = "string to number: " + (Number("123")); // string to number: 123
document.getElementById('id22').innerHTML = "string to number: " + (Number("125z")); // string to number: NaN
document.getElementById('id23').innerHTML = "boolean: " + (true); // boolean: true
document.getElementById('id24').innerHTML = "boolean: " + (false); // boolean: false
</script>
You can convert a string to a number by writing a + operator before the string.
longhand
const num1 = parseInt("100");
const num2 = parseFloat("100.01");
let total = parseInt('45');
let average = parseFloat('421.6');
shorthand
const num1 = +"100"; // converts to int data type
const num2 = +"100.01"; // converts to float data type
let total = +'45';
let average = +'421.6';
Occurs in logical operations and can be performed with Boolean(value).
Examples
<div class="spec">
<a id="id25"></a><br>
<a id="id26"></a><br>
<a id="id27"></a><br>
<a id="id28"></a><br>
<a id="id29"></a><br>
<a id="id30"></a>
</div>
<script>
document.getElementById('id25').innerHTML = "Boolean - 1 : " + (Boolean(1)); // Boolean - 1 : true
document.getElementById('id26').innerHTML = "Boolean - 0 : " + (Boolean(0)); // Boolean - 0 : false
document.getElementById('id27').innerHTML = "Boolean - string : " + (Boolean('hello')); // Boolean - string : true
document.getElementById('id28').innerHTML = "Boolean - empty string : " + (Boolean('')); // Boolean - empty string : false
document.getElementById('id29').innerHTML = "Boolean - string number : " + (Boolean("0")); // Boolean - string number : true
document.getElementById('id30').innerHTML = "Boolean - empty string: " + (Boolean(" ")); // Boolean - empty string: true
</script>
Examples
let value = true;
alert(typeof value); // boolean
value = String(value); // now value is a string "true"
alert(typeof value); // string
alert( "6" / "2" ); // 3, strings are converted to numbers
let str = "123";
alert(typeof str); // string
let num = Number(str); // becomes a number 123
alert(typeof num); // number
let age = Number("an arbitrary string instead of a number");
alert(age); // NaN, conversion failed
alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN (error reading a number at "z")
alert( Number(true) ); // 1
alert( Number(false) ); // 0
alert( Boolean(1) ); // true
alert( Boolean(0) ); // false
alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
alert( Boolean("0") ); // true
alert( Boolean(" ") ); // spaces, also true (any non-empty string is true)
// output
alert(obj);
// using object as a property key
anotherObj[obj] = 123;
// explicit conversion
let num = Number(obj);
// maths (except binary plus)
let n = +obj; // unary plus
let delta = date1 - date2;
// less/greater comparison
let greater = user1 > user2;
// binary plus uses the "default" hint
let total = obj1 + obj2;
// obj == number uses the "default" hint
if (user == 1) { ... };
obj[Symbol.toPrimitive] = function(hint) {
// here goes the code to convert this object to a primitive
// it must return a primitive value
// hint = one of "string", "number", "default"
};
let user = {
name: "John",
money: 1000,
[Symbol.toPrimitive](hint) {
alert(`hint: ${hint}`);
return hint == "string" ? `{name: "${this.name}"}` : this.money;
}
};
// conversions demo:
alert(user); // hint: string -> {name: "John"}
alert(+user); // hint: number -> 1000
alert(user + 500); // hint: default -> 1500
let user = {name: "John"};
alert(user); // [object Object]
alert(user.valueOf() === user); // true
let user = {
name: "John",
money: 1000,
// for hint="string"
toString() {
return `{name: "${this.name}"}`;
},
// for hint="number" or "default"
valueOf() {
return this.money;
}
};
alert(user); // toString -> {name: "John"}
alert(+user); // valueOf -> 1000
alert(user + 500); // valueOf -> 1500