JavaScript Data Types: A Complete Guide with Examples

In JavaScript, data types determine the type of value stored in a variable.

JavaScript has both primitive data types (which include String, Number, Boolean, Undefined, Null, Symbol, and BigInt) and non-primitive data types (Object, Array, Function).

 

1. Primitive Data Types

1.1. String

A string is a sequence of characters used to represent text. Strings are enclosed in single (‘ ‘), double (” “), or backticks (` `) quotes.

let singleQuote = 'Hello, World!';
let doubleQuote = "JavaScript is fun!";
let templateString = `This is a template literal, and you can include variables like ${singleQuote}`;

console.log(singleQuote); // Output: Hello, World!
console.log(doubleQuote); // Output: JavaScript is fun!
console.log(templateString); // Output: This is a template literal, and you can include variables like Hello, World!

1.2. Number

The Number data type is used to represent both integers and floating-point numbers. JavaScript also supports special numeric values like Infinity and NaN (Not-a-Number).

let integer = 42;
let float = 3.14;
let negative = -7;
let infinityValue = Infinity;
let notANumber = NaN;

console.log(integer); // Output: 42
console.log(float); // Output: 3.14
console.log(negative); // Output: -7
console.log(infinityValue); // Output: Infinity
console.log(notANumber); // Output: NaN

1.3. Boolean

A boolean can only have two values: true or false. Booleans are often used in conditional statements to control the flow of the program.

let isJavaScriptFun = true;
let isPythonFun = false;

console.log(isJavaScriptFun); // Output: true
console.log(isPythonFun); // Output: false

1.4. Undefined

A variable that has been declared but not assigned a value has the value undefined.

let undefinedVar;
console.log(undefinedVar); // Output: undefined

// Declaring a variable explicitly as undefined
let explicitlyUndefined = undefined;
console.log(explicitlyUndefined); // Output: undefined

1.5. Null

The null value represents an intentional absence of any object value. It is explicitly set by the programmer to indicate “no value.”

let emptyValue = null;
console.log(emptyValue); // Output: null

1.6. Symbol

Symbol is a unique and immutable data type that is often used as unique property keys in objects. Each Symbol is unique.

let sym1 = Symbol('description');
let sym2 = Symbol('description');

console.log(sym1 === sym2); // Output: false
console.log(sym1); // Output: Symbol(description)
console.log(sym2); // Output: Symbol(description)

1.7. BigInt

BigInt is a data type introduced in ES2020 that allows you to represent integers larger than the Number type's limit (2^53 – 1).

let bigIntNumber = 123456789012345678901234567890n; // Notice the 'n' at the end
console.log(bigIntNumber); // Output: 123456789012345678901234567890n

// Operations with BigInt
let bigIntSum = bigIntNumber + 10n;
console.log(bigIntSum); // Output: 123456789012345678901234567900n

2. Non-Primitive Data Types

2.1. Object

An Object is a collection of key-value pairs. Objects can store various data types and complex entities.

let person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  isEmployed: true
};

console.log(person.firstName); // Output: John
console.log(person['lastName']); // Output: Doe

// Adding a new property
person.country = 'USA';
console.log(person.country); // Output: USA

2.2. Array

Arrays are special types of objects used to store multiple values in a single variable. Array elements are ordered and indexed starting from 0.

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // Output: Apple
console.log(fruits.length); // Output: 3

// Adding an element to the array
fruits.push('Orange');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry', 'Orange']

2.3. Function

A function is an object in JavaScript that performs a task or calculates a value. Functions can be assigned to variables, passed as arguments, and returned from other functions.

// Function declaration
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Output: Hello, Alice!

// Function expression
let add = function(a, b) {
  return a + b;
};

console.log(add(5, 3)); // Output: 8

3. Dynamic Typing in JavaScript

In JavaScript, a variable can change its type as new values are assigned to it.

let variable = 'I am a string';
console.log(typeof variable); // Output: string

variable = 42; // Now the variable is a number
console.log(typeof variable); // Output: number

variable = true; // Now the variable is a boolean
console.log(typeof variable); // Output: boolean

4. Checking Data Types

JavaScript provides the typeof operator to check the data type of a variable.

console.log(typeof 'Hello'); // Output: string
console.log(typeof 123); // Output: number
console.log(typeof true); // Output: boolean
console.log(typeof undefined); // Output: undefined
console.log(typeof null); // Output: object (this is a quirk in JavaScript)
console.log(typeof Symbol('id')); // Output: symbol
console.log(typeof 123n); // Output: bigint
console.log(typeof {}); // Output: object
console.log(typeof []); // Output: object (arrays are objects in JavaScript)
console.log(typeof function(){}); // Output: function

Summary

Primitive data types include: String, Number, Boolean, Undefined, Null, Symbol, and BigInt.
Non-primitive data types include: Object, Array, and Function.

Use typeof to determine the data type of a variable.

JavaScript is dynamically typed, meaning variables can change types during runtime.

This guide provides a comprehensive overview of JavaScript data types with practical code examples to help you understand how to use them effectively in your programming.

Related posts

JavaScript Operator Precedence

JavaScript Reserved Keywords

JavaScript Syntax Tutorial with Examples