In this article, we look at the JavaScript Data Types. JavaScript is a loosely typed dynamic language. It is loosely typed because you will never specify a data type of a variable. It is a dynamic language because you can assign any value to any variable whenever you wish to. But it does not mean that JavaScript does not have data types. It is just that do not need to specify the data type, But the JavaScript interpreter interprets the data type of the variable and generates the executable code accordingly.
Table of Contents
What is a Data Type ? Why it is required ?
The Type or the Data Type is an attribute of data that tells the compiler or interpreter how to interpret its value. Whether it is a number, string, Boolean, etc. The type of data defines the operations that we can do on that data.
Take a look at the following example. The code declares two numbers and adds them using the + operator. The JavaScript interpreter correctly identifies the data type as a number and runs the arithmetic addition on them.
1 2 3 4 5 6 | let num1=10 let num2=10 console.log(num1+num2) //20 Numbers are added |
The following code is very similar to the code above. Here instead of adding two numbers, we add two strings using the + operator. Here interpreter correctly identifies that the data type as a string and hence joins them.
1 2 3 4 5 6 | let str1="Hello" let str2="world" console.log(str1+ str2) //HelloWorld Strings are joined |
How does the interpreter know when to perform the addition and when to join them?. By examining the data type. If both the variables are numbers then the interpreter adds them. If any one of them is a string, then it joins them.
The following examples add a string to a number. Since one of the operands is a string, the interpreter generates the code to join them.
1 2 3 4 | console.log(str1+num1) //Hello10 console.log(num1+str1) //10Hello |
Hence it is very important for the compiler or interpreter to identify the data type of the variable. Otherwise, it may end up joining numbers and adding strings etc.
JavaScript is loosely typed
JavaScript is loosely typed. You don’t have to specify the data type of a JavaScript variable when we declare it. JavaScript interpreter automatically infers the type of a variable when you assign some value to it.
This gives JavaScript a lot of flexibility while coding. But it also makes it difficult to identify bugs and remove them. This is where Languages like TypeScript are useful. You can refer to our TypeScript Tutorial.
JavaScript is dynamically typed
JavaScript is a dynamically typed language. You can assign any value to a variable at any time. In the following example, we assign a string and then a number to the variable num.
1 2 3 4 5 6 7 8 9 10 11 | let num // No value is given to num. It is of type undefined num="10" // now num is string console.log(num+num) // 1010 strings are joined num=10 // now num is number console.log(num+num) //20 numbers are added |
JavaScript Data Types
Although we do not specify the Data Type of a variable, the JavaScript interpreter keeps track of the type of data. JavaScript supports 8 data types. 7 of them are primitive data types and the 8th one is Object Data Type.
Primitive Types
JavaScript supports 7 primitive types (or basic types) number, string, boolean, bigint, symbol, undefined, and null. All other data types are objects in JavaScript.
A primitive data type is a data type that is provided as the basic building block of a language. All other types are composed using primitive data types. For Example, the Object in JavaScript is not a primitive type because we compose an object using the primitive types and other objects
Primitive Types do not have any methods. All primitives are immutable.
String
We use the string data type to store textual data. The string value is enclosed in double-quotes (“) or single quotes (‘).
1 2 3 4 5 | let message="Hello World" // Use a double quote let color='red' // or a single quote let val="100" //number stored as string. Anything inside the "" or '' is a string |
You can use a single quote inside a double quote or vice versa
1 2 3 4 5 6 7 8 9 | let message message="Hello 'World'" console.log(message) //Hello 'World' message='Hello "World"' console.log(message) //Hello "World" |
Or you can use the escape character \ to include a double quote (or single quote)
1 2 3 4 | message="Hello \"World\" "; console.log(message) |
Multiline string
The strings can span multiple lines in such cases the strings are surrounded by the backtick/backquote (`) character. Such Strings are called Template Strings or Template Literals.
1 2 3 4 5 6 7 8 9 10 | let sentence sentence = `Hello, welcome to the world of JavaScript Data Types, This is the example of muluti line string in JavaScript use the backtick/backquote charater to enclose it` console.log(sentence) |
Number
The number data type in JavaScript are 64-bit floating-point values and are used to represent integers and fractions. JavaScript also supports hexadecimal & decimal literals. It also supports the binary and octal literals introduced in ECMAScript 2015
Example
1 2 3 4 5 6 7 8 9 10 11 12 | let decimal = 10; let hex = 0xa00d; //hexadecimal number starts with 0x let binary = 0b1010; //binary number starts with 0b let octal = 0o633; //octal number starts with 0o console.log(decimal) //10 console.log(hex) //40973 console.log(binary) //10 console.log(octal) //411 |
Apart from the all numbers, It also contains three special values i.e. Not A Number or NaN, positive infinity and negative infinity.
Number Data type has a Limitation of Max Safe Integer & Min Safe Integer. If you want to use any integer beyond these numbers, then you can consider using BigInt
Boolean
The boolean type is a simple true/false value
Example
1 2 3 4 5 6 7 | let isDone = false let isOk = true console.log(isDone) //false console.log(isOk) //true |
Bigint
bigint is the new introduction in JavaScript. This will provide a way to represent whole numbers larger than 2^53 – 1. You can get a bigint by calling the BigInt() function or by writing out a BigInt literal by adding an n to the end of any integer numeric literal as shown below.
1 2 3 4 5 6 7 | let big1 = BigInt(100); // the BigInt function let big2 = 100n; // a BigInt literal. end with n console.log(big1) //100n console.log(big2) //100n |
BigInt appears similar to Number Data Type. But they do have few important differences. To find out checkout BintInt Vs Number.
Null
The null in JavaScript is a special value & also a data type. The value null represents the intentional absence of any object value. It is one of JavaScript’s primitive values and is treated as falsy for boolean operations. The value of null is represented in JavaScript using the literal null.
1 2 3 4 | let a = null console.log(a) // null |
Undefined
Undefined is a special JavaScript value and also a data type. It is one of JavaScript’s primitive values and is treated as falsy for boolean operations.
The JavaScript creates the variable as of type undefined and assigns it a value of undefined if we do not assign any value to it. Hence undefined usually means the unintentional absence of any value.
1 2 3 4 5 6 | let a; console.log(a) //undefined console.log(typeof (a)) //undefined |
JavaScript also has a global variable with the name undefined which has the value Undefined.
A variable of type undefined has can take only one value undefined
Symbol
The symbol is the new primitive type introduced in ES6 and represents the javaScript symbol primitive type. it represents unique tokens that may be used as keys for object properties. it is created by the global Symbol() function. Each time the Symbol() function is called, a new unique symbol is returned.
Objects
Everything that isn’t a primitive type is a object data type in JavaScript.
An object is a collection of key-value pairs. Each key-value pair is known as property, where the key is the name of the property and value its value. The Value can be of any primitive value or can be any object
Read More
