Javascript Data Types Explained

Table of Contents

• Introduction
• Data Types in Javascript
• Primitive Types
  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol
  • Object Type
  • Using typeof operator for determining types
  • Dynamic Typing
• Summary

Introduction

When you are ordering food online, you select food by their "name" from the online menu, let's say you selected 'Cheese Burger' which is of type string used to represent text. 'Cheese Burger' will have an associated cost say '$5' which is a numeric value. As you proceed to checkout, option for 'extra cheese' pops in, which you can answer in either yes or no, or in technical terms true or false.

In a similar way, values in a program are expressed in different representations based on what you are using it for. These different representations for values are called data types in programming terminology.

• Cheese Burger: Value can be displayed on the screen using a string.
• $5: can be represented as a number, so when you add more items, calculations can be done on them.
• yes or 'no': A decision can be represented using a boolean (true or false).

Data Types in Javascript

The data types in javascript can be further divided as Primitive and Object. There is a total of 6 primitive types defined by the latest ECMAScript standard:

1. boolean
2. null
3. undefined
4. number
5. string
6. symbol(new in ECMAScript 2015)
7. Object Type.

Primitive Types

In Javascript, all values except Objects are defined as immutable values (values that cannot be changed or modified).

Boolean

Boolean represents a logical entity that can only have two values, true or false. It is useful in controlling program flow and decision making using conditional statements.

var bool = true;
if ( bool ) {
//then some action;
}

Null

null represents absense of any value ie empty or non-existent value. null explicitly means nothing. Content of variable can be erased without deleting it, by assigning it to null.

var num = 45;
num = null; //num contains no value now

Undefined

Undefined means variable has been declared but is not yet assigned to any value.

var exp;

//Print Output
document.getElementById("output").innerHTML = exp;

Link to Example

Number

According to the ECMAScript standard, there is only one Number Type in Javascript. It serves for both integer and floating-point. The number type has three special numeric values: +Infinity, -Infinity, and NaN(not-a-number).

Infinity and -Infinity are special values that represent mathematical infinity and are greater than or smaller to any number respectively.

var exp = 1 / 0;

//Print Output
document.getElementById("output").innerHTML = exp;

Link to Example

NaN represents a computational error. It is a result of failed or incorrect mathematical operations.

var exp = "hackinbits" / 45;

//Print Output
document.getElementById("output").innerHTML = exp;

Link to Example

Any further operations on NaN will give NaN

var exp1 = "hackinbits" / 2;
var exp2 = exp1 + 3;
//Print Output
document.getElementById("output").innerHTML = exp2;

Link to Example

String

Strings are used to represent text. Javascript strings are immutable, that means once a string is created, it is not possible to modify it.

var exp = "Welcome to hackinbits.com";

//Print Output
document.getElementById("output").innerHTML = exp;

Link to Example

Symbol

Symbols are new to Javascript. Symbols are unique and immutable primitive values. They are used to create unique identifiers for objects (more on it in another article, as it can be explained better after discussing a few topics first).

Object Type

Object type refers to a compound value that can be seen as a collection of properties. Properties are key/value pairs. Keys are strings (or Symbols) and values can be of any type, including other objects.

var obj = {
  name: 'Cheese Burger',
  cost: 5,
  extra_cheese: true
};

You would have noticed that the key extra_cheese is written with '_' rather than using a space. Space can be used as well but then the key should be quoted in "" (double quotes like "key"), example:

var obj = {
  name: 'Cheese Burger',
  cost: 5,
  "extra cheese": true
};

Using typeof operator for determining types

The typeof operator helps in finding the type of value that your variable is storing. It returns a string indicating the type of argument. It supports two syntaxes:

1. As an operator: typeof v.
2. As a function: typeof (v).

var exp = typeof "Welcome to hackinbits.com";

//Print Output.
document.getElementById("output").innerHTML = exp;

Link to Example

Dynamic Typing

Variables in javascript are not directly associated with any particular data type. Only values have types in javascript. Variables are simple containers for values. You can say, javascript has typed values and not typed variables.

var exp = 45; // exp is a Number
var exp = 'hackinbits.com'; // exp is now a String
var exp = true; // exp is now a Boolean

Summary

• There are seven basic data types in Javascript :

  1. boolean
  2. null
  3. undefined
  4. number
  5. string
  6. symbol(new in ECMAScript 2015)
  7. and Object Type

• Javascript has typed values instead of typed variables. Variables are simple containers for values.

• We can use typeof operator for knowing the type of value a variable is storing.