Posted by Ridwan Fadilah on Sep 15, 2020 - 03:01 am
JavaScript data types. Learn about what is data types, the concept of data types, complex data, and many more.
Each programming language has its own built-in data types structure, but these will differ from one programming language to another.
JavaScript variable can hold many data such as numbers, strings, objects, and more.
This tutorial will attempt to list and explain the data types available in JavaScript.
JavaScript has dynamic types. JavaScript variables are not directly associated with any particular value type. Its means the same variable can hold different data type and any variable can assign or re-assign all value types.
let x; // x is undifined
x = 10; // x is now a number
x = "Doe"; // x is now a string
x = true; // x is now a boolean
JavaScript strings data type is a series of characters used to represent textual data types like "John Doe"; It is a set of elements of 16-bit unsigned integer values.
Each element of the String occupies a position in the String. The first string element is at index [0]
, the next at index [1]
, and so on. The string length is the number of "elements" in a string.
Important to note: Strings are written with quotes. You can use single or double quotes.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Data Type Example</h2>
<p id="demo"></p>
<script>
let carType1 = "Mitsubishi L300"; // double quotes
let carType2 = 'Mitsubishi Xpander'; // singel quotes
document.getElementById("demo").innerHTML = carType1 + "<br>" + carType2;
</script>
</body>
</html>
The code above will display by the browser like this:
See the Pen JavaScript String Data Type Example by Ridwan (@ridwan-the-bold) on CodePen.
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Data Type Example</h2>
<p id="demo"></p>
<script>
var ex1 = "It's alright"; // Single quote inside double quotes
var ex2 = "My name is 'John'"; // Single quotes inside double quotes
var ex3 = 'I am "John"'; // Double quotes inside single quotes
document.getElementById("demo").innerHTML = ex1 + "<br>" + ex2 + "<br>" + ex3;
</script>
</body>
</html>
The code above will display by the browser like this:
See the Pen JavaScript Strings Data Type Example 2 by Ridwan (@ridwan-the-bold) on CodePen.
Like the example before, you can use quotes inside a string, as long as they don't match with the string quotes. However, what will happen if you have the same quotation mark? If quotes are the same, JavaScript will return an error or incorrectly string.
let ex1 = 'My name is 'John' from Jakarta';
let ex2 = "I am "John" and I like coffee";
The solution of these is by using the so-called "escape characters."
Escape characters use a backslash (\
) to turns special characters that have a different interpretation in a programing language.
In simple words, the quotes will turn into a strings character or element.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Escape Characters</h2>
<p id="demo"></p>
<script>
let ex1 = 'My name is \'John\' from Jakarta';
let ex2 = "I am \"John\" and I like coffee";
let ex3 = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = ex1 + "<br>" + ex2 + "<br>" + ex3;
</script>
</body>
</html>
The example above will display by the browser like this:
See the Pen JavaScript Escape Characters by Ridwan (@ridwan-the-bold) on CodePen.
Here's the escape sequences are valid in JavaScript:
# | Code | Result |
---|---|---|
1 | \' | Single quote |
2 | \" | Double quote |
3 | \\ | Backslash |
4 | \b | Backspace |
5 | \f | Form Feed |
6 | \n | New Line |
7 | \r | Carriage Return |
8 | \t | Horizontal Tabulator |
9 | \v | Vertical Tabulator |
To find the length of a string, use the built-in length property:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Length Example</h2>
<p id="demo"></p>
<script>
let ex1 = 'John Doe';
document.getElementById("demo").innerHTML = ex1.length;
</script>
</body>
</html>
The example above will display by the browser like this:
See the Pen JavaScript String Length Example by Ridwan (@ridwan-the-bold) on CodePen.
JavaScript has built-in numeric data types. The number type represents both integer and floating-point numbers.
There are have some operation for numbers such as multiplication (*
), division (/
), addition (+
), subtraction (-
), and more.
Learn about JavaScript Operators for numbers operation in JavaScript Syntax Tutorial.
Numbers can be written with, or without decimals:
let n = 52; // Written without decimals
n = 52.00; // Written with decimals
Extra large or extra small numbers can be written with scientific (exponential) notation:
let x = 123e5; // 12300000
let y = 123e-5; // 0.00123
In addition to representing floating-point numbers, besides regular numbers, there are so-called “special numeric values” which also belong to this data type: Infinity, -Infinity, and NaN (Not a Number).
Infinity is a special value that greater than any number.
We can get it as a result of division by zero:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Data Type (Infinity)</h2>
<p id="demo"></p>
<script>
let x;
x = (1 / 0); // Infinity
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
The example above will display by the browser like this:
See the Pen JavaScript Numbers Data Types (Infinity) by Ridwan (@ridwan-the-bold) on CodePen.
NaN represents a computational error. It is a result of an incorrect or an undefined mathematical operation, for instance:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Data Type (NaN)</h2>
<p id="demo"></p>
<script>
let x;
x = ("NaN" / 2); // Not a Number, such division is erroneous
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
The example above will display by the browser like this:
See the Pen JavaScript Numbers Data Type (NaN) by Ridwan (@ridwan-the-bold) on CodePen.
The “number” type in JavaScript cannot represent integer values larger than (253-1) (that’s 9007199254740991), or less than -(253-1) for negatives.
A BigInt value is created by appending n to the end of an integer:
// the "n" at the end means it's a BigInt
const bigInt = 1234567890123456789012345678901234567890n;
Boolean represents a logical data type and only have two values: true and false.
The boolean is commonly used to store yes/correct value for true, and no/incorrect for false (often used in conditional testing).
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Boolean Data Type Example</h2>
<p>If the comparison is "true", JavaScript will return yes/true.</p>
<p id="demo"></p>
<script>
let x = 15 > 3;
if (x == true) {
document.getElementById("demo").innerHTML = "yes/true"; // true (the comparison result is "yes")
}
</script>
</body>
</html>
The example above will display by the browser like this:
See the Pen JavaScript Booleans Data Type Example by Ridwan (@ridwan-the-bold) on CodePen.
In simple words, the JavaScript array data type is a combination of multiple values.
In its use, the array items are separated by commas and placed inside the square brackets.
const cars = ["Esemka", "VW", "Toyota"];
Array items can be string, integer or number, boolean, and object data types or can also a combination of several data types.
Like the string elements, array indexes are zero-based, which means the first item is index [0]
, the second is index [1]
, and so on.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Data Type Example</h2>
<p id="demo"></p>
<script>
const myArray = ["car", 12, true];
document.getElementById("demo").innerHTML = myArray + "<br>" + "The index[0] is" + " " + myArray[0];
</script>
</body>
</html>
The example above will display by the browser like this:
See the Pen JavaScript Array Data Type Example by Ridwan (@ridwan-the-bold) on CodePen.
Almost the same with the array, in its use, JavaScript object data type items are separated by commas and can also have multiple items.
The differences between array and object syntaxis are the object items placed inside the curly braces {} and should have object properties.
Object properties are written as name: value pairs
.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Data Type Example</h2>
<p id="demo"></p>
<script>
const person = {firstName:"John", lastName:"Doe", age:50};
document.getElementById("demo").innerHTML = "Name: " + person.firstName + " " + person.lastName + "<br>Age: " + person.age;
</script>
</body>
</html>
The example above will display by the browser like this:
See the Pen JavaScript Object Data Type Example by Ridwan (@ridwan-the-bold) on CodePen.
The object (person) in the example above has 3 properties: firstName, lastName, and age.
If a variable is declared, but the value is not assigned, JavaScript will return an "undefined" result, and the type also undefined.
let car; // Value is undefined, type is undefined
When the value is set to "undefined" the type will also be undefined:
let car = undefined; // Value is undefined, type is undefined
The special null value does not belong to any of the types described above.
It forms a separate type of its own which contains only the value:
let age = null;
In JavaScript null is "nothing"; It is supposed to be something that doesn't exist.
In simple words, null is represents "nothing", "empty" or "value unknown".
If you want to find the type of a JavaScript variable, you can use the JavaScript "typeof
" operator.
The "typeof
" operator returns the type of a variable or an expression:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Data Type Example</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
// "undefined"
typeof car + "<br>" +
// "number"
typeof 0 + "<br>" +
// "bigint"
typeof 10n + "<br>" +
// "boolean"
typeof true + "<br>" +
// string
typeof "foo";
</script>
</body>
</html>
The result of the example above will be like this:
See the Pen JavaScript typeof Operator Usage Example by Ridwan (@ridwan-the-bold) on CodePen.
Learn more about JavaScript Operators in JavaScript Syntax Tutorial.
The typeof
operator can return one of two complex types:
The typeof
operator will returns "object" for objects, arrays, and null.
The typeof
operator does not return "object" for functions.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Data Type Example</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
// Returns "object"
typeof {name:'john', age:34} + "<br>" +
// Returns "object"
typeof [1,2,3,4] + "<br>" +
// Returns "object"
typeof null + "<br>" +
// Returns "function"
typeof function myFunc(){};
</script>
</body>
</html>
Important to note: The typeof
operators will return arrays as an "object" because, in JavaScript, arrays are objects.
See the Pen JavaScript Complex Data by Ridwan (@ridwan-the-bold) on CodePen.
Okay, that's the tutorial about JavaScript Data Types. You should know, that's just the basics! You'll learn more about JavaScript in the next chapter.
You can read another JavaScript basics tutorial in the related article below. You can also find another tutorial on our YouTube Channel.
Thanks for reading.