Data Types in JavaScript and Type Conversion

29 июля 2023 г.

Data Types

Primitive types

number
string
boolean (logical) — true or false
null — represents the absence of a value. typeof null returns "object"
undefined — something exists but has no value
Symbol — an immutable and unique type used as object property identifiers. MDN Web Docs
BigInt — integers larger than 2⁵³ − 1. MDN Web Docs.

Complex types

Regular objects

object
array

Special objects

Date object
function
constructor functions

Because a function is a subtype of object, you can use the .length property to get the number of its declared parameters:

JavaScript

1const empty = function() {}
2console.log(empty.length) // 0
3const withArguments = function(a, b, c, d) {}
4console.log(withArguments.length) // 4

More about data types on MDN Web Doc.

NaN characteristics

NaN is not equal to itself, even with strict equality.
typeof NaN returns "number" (it is still a numeric type).
window.isNaN converts values to numbers first and returns true even for some numeric strings.

JavaScript

1//return true
2console.log(
3	window.isNaN(NaN),
4	window.isNaN("NaN"),
5	window.isNaN(undefined),
6	window.isNaN({}),
7	window.isNaN("18,4"),
8	window.isNaN(Date().toString()),
9	window.isNaN("just a string")
10)
11
12//return false
13console.log(
14	window.isNaN(true),
15	window.isNaN(15),
16	window.isNaN("15"),
17	window.isNaN("15.5"),
18	window.isNaN(""), // converted to 0
19	window.isNaN(" "), // converted to 0
20	window.isNaN(new Date())
21)

4) Number.isNaN() (ES6). Returns true only if the passed value is the actual NaN value. Unlike the global isNaN(), it does not convert the argument to a number before checking.

JavaScript

1//return true
2console.log(
3	Number.isNaN(NaN),
4	Number.isNaN(Number.NaN),
5	Number.isNaN(0/0),
6)
7
8//return false
9console.log(
10	Number.isNaN("NaN"),
11	Number.isNaN(undefined),
12	Number.isNaN({}),
13	Number.isNaN("18,4"),
14	Number.isNaN(Date().toString()),
15	Number.isNaN("string"),
16	Number.isNaN(true),
17	Number.isNaN(15),
18	Number.isNaN("15"),
19	Number.isNaN("15.5"),
20	Number.isNaN(""), //converted to 0
21	Number.isNaN(" "), //converted to 0
22	Number.isNaN(new Date())
23)

Data Type Conversion in JavaScript

JavaScript is a dynamically typed language, meaning a value can change from one data type to another. For example, a string can be converted to a number and vice versa.

In contrast, statically typed languages have fixed data types. Once a variable is declared as a specific type (such as a number), it cannot be changed to another type.

Converting to a String

1) String()

JavaScript

1const number = 17;
2console.log(typeof String(number)); // string
3
4console.log(
5	String(null), // "null"
6	String(undefined), // "undefined"
7	String(true), // "true"
8	String(false), // "false"
9	String(3), // "3"
10	String(NaN), // "NaN"
11	String(180 * 44), // "7920"
12	String({}), // "[object Object]"
13	String({ name: "Al" }), // "[object Object]"
14	String([]), // ""
15	String([8, 9, 14]), // "8,9,14"
16	String([[1, 4, 8], [48, 12], [89]]), // "1,4,8,48,12,89"
17	String([
18		{ a: 4, b: 8 },
19		{ e: 78, i: "nine" },
20	]) //"[object Object],[object Object]"
21);

2) ) String concatenation (combining a string with another value).

JavaScript

1const number = 17;
2const newString = "I am a string " + number;
3console.log(typeof newString); // string
4
5const string = "I am a string ";
6console.log(
7	string + null, // "I am a string null"
8	string + undefined, // "I am a string undefined"
9	string + true, // "I am a string true"
10	string + false, // "I am a string false"
11	string + 3, // "I am a string 3"
12	string + NaN, // "I am a string NaN"
13	string + 180 * 44, // "I am a string 7920"
14	string + {}, // "I am a string [object Object]"
15	string + { name: "Al" }, // "I am a string [object Object]"
16	string + [], // "I am a string"
17	string + [8, 9, 14] // "I am a string 8,9,14"
18);

3) Template literals

JavaScript

1const number = 17;
2console.log(`Now I am a string ${number}`); // Now I am a string 17
3console.log(typeof `Now I am a string ${number}`); // string

4) The .toString() method. It does not work with null or undefined.

JavaScript

1const number = 17;
2console.log(typeof number.toString()); // string
3
4console.log(
5	true.toString(), // "true"
6	false.toString(), // "false"
7	number.toString(), // "17"
8	NaN.toString(), // "NaN"
9	(180 * 44).toString(), // "7920"
10	{}.toString(), // "[object Object]"
11	{ name: "Al" }.toString(), // "[object Object]"
12	[].toString(), // ""
13	[8, 9, 14].toString() // "8,9,14"
14);

Converting to Number

1) Number()

JavaScript

1const string = "I am a string ";
2console.log(typeof Number(string)); //number
3
4console.log(
5	Number(null), // 0
6	Number(undefined), // NaN
7	Number(true), // 1
8	Number(false), // 0
9	Number("I am a string"), // NaN
10	Number("17"), // 17
11	Number(NaN), // NaN
12	Number({}), // NaN
13	Number({ name: "Al" }), // NaN
14	Number([]), // 0
15	Number([8, 9, 14]) // NaN
16);

2) Unary plus (+). Place it before the variable or value you want to convert to a number.

JavaScript

1const string = "18";
2console.log(typeof +string); // number

3) parseInt(string, radix) — importantly, it always returns an integer.

JavaScript

1const string = "18";
2const newNumber =  parseInt(string, 10) // Number in the decimal numeral system
3console.log(newNumber); //18
4console.log(typeof newNumber);  //number

Converting to Boolean

1) Boolean()

JavaScript

1const someNumber = 19;
2console.log(typeof Boolean(someNumber)); //boolean
3
4console.log(
5	Boolean("string"), // true
6	Boolean(""), //false
7	Boolean(19), //true
8	Boolean(0), // false
9	Boolean([]), // true
10	Boolean({}), // true
11	Boolean(null), // false
12	Boolean(undefined), // false
13	Boolean(NaN) // false
14);

2) Double exclamation mark (!!).

JavaScript

1const fullString = "string";
2console.log(!!fullString); // true
3console.log(typeof !!fullString); // boolean

Values that are always converted to false: 0, '' (empty string), null, undefined, and NaN.

Converting an Object to an Array

1) Get an object's keys as an array — Object.keys().

2) Get an object's values as an array — Object.values().

3) Get both keys and values as an array of key-value pairs — Object.entries().

JavaScript

1const newObject = {
2	a: "first",
3	b: "second",
4};
5
6console.log(Object.keys(newObject)); //[ 'a', 'b' ]
7console.log(Object.values(newObject)); // [ 'first', 'second' ]
8console.log(Object.entries(newObject)); //[ [ 'a', 'first' ], [ 'b', 'second' ] ]

Converting an Array to an Object

Object.fromEntries() .

JavaScript

1const entries = new Map([
2	["foo", "bar"],
3	["baz", 42],
4]);
5
6const obj = Object.fromEntries(entries);
7console.log(obj); //{ foo: 'bar', baz: 42 }

GitHub