JavaScript Data Types

What are Data types?

Data types describe the types or kinds of data – and their attributes – that can be stored in variables.

The five most basic types of data are:

• Strings 
• Numbers 
• Booleans 
• Undefined
• Null

These are referred to as primitive data types. A single variable can store a single type of data. That means it is important for us to learn to store our data correctly. The computer will identify what type of data we’re working with based on the syntax or the way you write the code. It’s important to remember and practice these differences; otherwise, data could be stored in an improper format and stir some trouble for us later.

Let’s go through a brief overview of each type of data and what it can be used for:

• Strings are collections of alphanumeric characters and symbols. We’ll be using them to store letters and words, things like addresses.
  
•  Numbers are exactly what you’d expect – they’re essentially numbers, including integers and decimals. Computers often use numbers to perform mathematical operations, but they may also just store a numeric value, like a count of how many types of pizza a store sells.
  
•  Booleans can only have two values – True and False. They represent all data that has only two states. E.g., a light switch, which can either be on or off.
  
• The Undefined data type means that the variable has been created but has never been given a value. It is nothing because no one ever bothered to tell it what value it should be.
  
• Null is similar to Undefined, except it has to be set intentionally. It also means empty or nothing, but it’s that way because the developer set it to be either open or nothing.
  
• We will also look at two more data types, objects, and arrays. Objects and arrays are collections, a way to group multiple data points into a single bundle that we can pass around, use and access.

These are only some of the data types that you will be using. We’ll review exactly how to write the syntax for each data type, as well as why you might want to use one over another.

We need to keep in mind that the computer thinks about data and information differently. It’s got different buckets for the different types. So, we need to learn those types and use the right ones in the right scenarios.

Some of the most simple and common JavaScript data types that we’re going to encounter are:

• String, e.g. “to be or not to be”
• Number, e.g. 123 
• Boolean, e.g. true 
• Null, eg.  var temp = null;
• Undefined, e.g. var rhyme; 

Also Read: JavaScript Tutorial

1. Strings

You could start a string using double quotes, single quotes, or the backtick character.

Double quotes: “string”
Single quotes: ‘string’
Backtick character: `string`

Double quote and single quote strings behave in the same manner, and the backtick character comes with some extra functionality. 

Sticking to the basics, we’ve got a double-quoted string between which we can put in any value, such as:

“The cat went to 7-11”

You would notice that the color remains uniform within the quotation marks. If this were copied and placed outside the quote marks, the color in the editor would change to something different:

The cat went to 7-11

That’s because the default white color in the current scheme is trying to look for a variable with a name matching that in the above sentence; however, it is unable to find it. Instead, it is trying to perform a mathematical function like 7-11.  To wrap a value as a string, we can place any valid alphanumeric characters in between our double quotes, single quotes, or backticks. One of the great features of the backtick character is that it can accommodate long string characters that stretch onto a new line as well. So it allows us to split a string into multiple lines of code.

Although most developers would use a backtick character tick to represent a string, you may still find double quotes and single quotes to represent strings in classes and tutorials. Alphanumeric characters – letters, numbers, and special symbols are an important part of human communication to write sentences or type messages. We need a way to store that information so it remains intact the way the user gave it to us, and that’s where strings come into play.

//  INTRODUCTION TO STRINGS IN JAVASCRIPT // DOUBLE AND SINGLE QUOTE STRINGS var str = “double quote string”; var str2 = ‘single quote string’; // STRINGS WITH BACKTICKS var str3 = “Hello”; var greet = `${str3}, World`;  // strings enclosed in backticks can also allow us call other variables or write expressions console.log(greet);            // this will log “Hello, World” to the console. console.log(`sum of 1 and 2 is ${1 + 2}`); // this will log “sum of 1 and 2 is 3” to the console

CONSOLE:

Hello, World

The sum of 1 and 2 is 3

1. Numbers

Numbers are as straightforward as they sound. They can be integer or decimal values that do not allow any letters or special characters. They usually store values for the same kinds of things that we use the money for in real life, such as money, age, etc. Besides regular numbers, there are special numeric types — 

• NaN (Not a Number) represents an invalid or undefined mathematical operation.
• -Infinity and Infinity represent the mathematical value infinity.

var x = 5; var y = 10; console.log(typeof x);  // will log out ‘number’ to the console // BASIC OPERATIONS ON NUMBERS console.log(x + y);   // will add x and y and log out “15” console.log(x – y);   // will subtract x and y and log out “-5” to the console console.log(x * y);   // will multiply x and y and log out “50” to the console console.log(y / x);   // will divide y from x and log out “2” to the console console.log(y % 2);   // will give remainder of y divided by 2 and log out “0” to the console // OPERATIONS WITH FLOATING POINTS var pi = 3.14; var radius = 20; var area = pi * (radius**2); console.log(area);    // wil give the area for the circle // COMPARISON OPERATIONS ON NUMBERS console.log(x < y);    // true console.log(x > y);    // false console.log(x == y);   // false console.log(x != y);   // true console.log(5 == 5);   // true // INCREMENT AND DECREMENT OPERATIONS var i = 4; i++ console.log(i);        // 5 i– console.log(i);       // 3

CONSOLE:

number
15
-5
50
2
0
1256
true
false
false
true
true
5
4

The JavaScript number type does not include numbers greater than (2^53)-1 or smaller than -(2^53)-1. Therefore, the bigint type can store and safely operate on large integers. A bigint is created by appending the n character at the end of a number.

// INTRODUCTION TO BIGINT IN JAVASCRIPT // to get the maximum and minimum values of infinity console.log(Number.MAX_VALUE); console.log(Number.MAX_SAFE_INTEGER) console.log(Number.MIN_VALUE); console.log(Number.MIN_SAFE_INTEGER); console.log(500n + 10n);      // 510n console.log(1000n ** 1000n);    // try doing this in the console console.log(500n + 1);        // TypeError :  it is not allowed to mix BigInt and other types, try using explicit conversions instead

CONSOLE:

1.7976931348623157e+308

9007199254740991

5e-324

-9007199254740991

510

10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

error: Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

2. Booleans

Booleans or bool datatypes can only store two values- true or false.

// INTRODUCTION TO BOOLEAN IN JAVASCRIPT // a boolean value only can only have two states – either “true” or “false”. // booleans are used in logical operations where “true” represents “1” and “false” represents “0” // USING BOOLEANS WITH CONDITIONALS // booleans form a basis for conditionals; if true then perform some task, else do something else. var isLoggedIn = false; if(isLoggedIn){   console.log(“Logged in!”); } else {   console.log(“Currently you are not logged in. Please log in”); } // since “isLoggedIn” is assigned a “false” value, the code within the else block is executed.

CONSOLE:

Currently you are not logged in. Please log in

3. Null

Null values are empty, i.e. they have no value assigned to them. The difference between null and undefined datatypes is that undefined exists when we have not provided a value.

Var rhyme = `roses are red and violets are blue`

rhyme= null

So if a developer decides that they want the rhyme variable gone, they can set it to null. This is done on purpose using variable assignment.

// INTRODUCTION TO NULL IN JAVASCRIPT var yourAge = null;    // yourAge exists now, but it’s value is “none” or “empty” console.log(yourAge);  // will give “null” to the console

CONSOLE:

null

4. Undefined

var rhyme;

The variable rhyme currently has an undefined value. So rhyme was created, memory storage was allocated to remember data, but because no value was put in there, it is undefined.

So if a value was never provided to a variable, it is undefined. In javaScript’s default behaviour, everything is undefined until it has been assigned a value.

// INTRODUCTION TO UNDEFINED IN JAVASCRIPT // let’s try to access a variable “yourAge” in the console that has never been initialized console.log(yourAge);  // will give ReferenceError : yourAge is not defined

CONSOLE:

error: Uncaught ReferenceError: yourAge is not defined

Some of the most common composite datatypes we will encounter are:

1. Array, eg. true 
2. Object, eg. {name: ‘Ananya’, age: 22, gender: ‘female’}
3. Function, eg.

var welcome = function() {                   return “hello”;               }

1.  Arrays

An array datatype expresses lists; like a list of followers on Instagram or a list of apartments on Oyo. Lists have their own datatypes in all programming languages. In JavaScript, its datatype is an array. For example, a list of friend’s names will look like this:

[“Friend1”, “Friend2”, “Friend3”]

Note the syntax of the array; it is enclosed in square brackets. This is how JavaScript interprets that it is dealing with an array. You could also have a list for Amazon ratings, for example. This would be an array with numbers.

[4, 4.6, 3.2, 5]

As you can see, array is a list that contains other datatypes just as we have created an array with strings and numbers. You can also mix different datatypes inside a single array, just as we have both integers and decimals in one array. You can also write an array with string, integer and boolean expressions, like this:

// INTRODUCTION TO ARRAYS IN JAVASCRIPT[“some text”, 5, true]

2. Objects 

Objects are used to store various collections of data using “key-value” pairs. 

For eg, {name: ‘Adam’, age: 21, gender: ‘male’}

It is important to note the syntax here so JavaScript understands what datatype is being used. An array is expressed using square brackets and objects are expressed using curly brackets. 

Another example of an object could be an apartment complex at an Oyo. It would include information such as the address, price, rating, availability, images, etc. For eg:

{ location: “address 12/34”, price: “5000”, rating: “5”, description: “some text”, availability: true, images: [“img1Link”, “img2Link”, “img3Link”] }

The syntax highlighting also helps us to see that strings, numbers and booleans are coloured differently, meaning that JavaScript understands the difference between them. This is how an object uses key value pairs where the key describes what the value stands for and is completely user-defined. Any datatype can be used as a value inside the object. So in this example we have stored string, integer, boolean and array values. It is also possible to store an object inside another object. These would classify as complex data structures for eg:

{ {authorName: “user12”, rating: 5, explanation: “great product”}, {authorName: “user34”, rating: 4.5, explanation: “it’s alright”}, {authorName: “user56”, rating: 4, explanation: “nothing special”} }

Objects can be used to group information into one item, like an array.  Symbols can be used to create unique identifiers for object datatypes. Symbols are unique and immutable data types. They are used as unique property keys since a symbol does not clash with any other property (either symbols or strings).

// INTRODUCTION TO OBJECTS IN JAVASCRIPT var person = {     // creating an object “person”   name : “John Doe”,   age :  21,   gender: “male” };                // the object contains a collection of keys-value pairs with values of different types // INTRODUCTION TO SYMBOLS let sym1 = Symbol(); let sym2 = Symbol(“sym2”);   // the only purpose of providing a string value inside Symbol() is to identify the symbol // SYMBOLS ARE UNIQUE console.log(sym1 === sym2);  // false let sym3 = Symbol(“sym2”); console.log(sym2 === sym3);  // false // symbols are always unique they never equal each other no matter what console.log(typeof sym1)     // ‘symbol’

CONSOLE:

false
false
symbol

3. Function

JavaScript allows functions to act as a data type that can be assigned to a variable. For eg, we have created an object called a dog with string, number, and function values for name, age, and bark respectively. The function property performs a specific task, which in this case is for the dog to bark. 

// INTRODUCTION TO FUNCTIONS IN JAVASCRIPTvar dog = { name: “Buddy”, age: 4, bark: function(sound)  {         console.log(sound || “Woof Woof”) } } dog.bark() // calling the function bark in the console will return “Wolf Wolf”

CONSOLE:

Woof Woof

The purpose of function as a datatype in JavaScript is to organize our  program into small, executable pieces of code that can be called as needed to do a specific action. These actions can either return a result or complete the task and end execution.

Typeof

While JavaScript is able to interpret what type of data is present inside a variable based on the syntax, we as users may not always be able to interpret data inside a variable simply by looking inside the browser. So if we want to know what type of data is stored inside the variable, we can use an operator called typeof. It can be used with or without brackets (typeof(x) or typeof x).

For eg,

// INTRODUCTION TO TYPEOF IN JAVASCRIPT// Numbers console.log(typeof 96.6);  // Returns: “number”; // Strings console.log(typeof ‘to be or not to be’);  // Returns: “string” // Booleans console.log(typeof false); // Returns: “boolean” // Null console.log(typeof Null);  // Returns: “object” // Objects console.log(typeof {name: “Ananya”, age: 22});  // Returns: “object” // Arrays console.log(typeof [4, 4.5, 5]);  // Returns: “object” var bool1= true; console.log(typeof bool1); // this will return boolean in the console

CONSOLE:

number
string
boolean
undefined
object
object
boolean

Interested in exploring more about Java? Check out Javascript Projects to learn more.