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.

Data Types: