search ]

JavaScript Data Types: Complete Guide with Examples

JavaScript is a dynamically typed language, meaning variables can hold different types of values at different times. Understanding JavaScript data types is fundamental for writing effective code. JavaScript provides several built-in data types, categorized into primitive types and objects.

TL;DR

The following table below provides a summary of the different JavaScript data types, their descriptions, and examples.

Data TypeDescriptionExample
StringRepresents textual datalet name = "John";
NumberRepresents numeric values (both integer and floating-point)let age = 30;
BooleanRepresents logical values: true or falselet isActive = true;
NullRepresents an intentional absence of any object valuelet emptyValue = null;
UndefinedIndicates that a variable has not been assigned a valuelet value;
SymbolRepresents a unique and immutable valuelet symbol = Symbol('description');
BigIntRepresents integers with arbitrary precisionlet bigIntValue = 1234567890123456789012345678901234567890n;
ObjectRepresents collections of propertieslet person = { name: 'John', age: 30 };
ArrayRepresents ordered collections of valueslet numbers = [1, 2, 3, 4, 5];
FunctionRepresents reusable blocks of codefunction greet() { return "Hello"; }

JavaScript data types are categorized into two main types: primitive and non-primitive (also known as reference) types.

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

Primitive Data Types

Primitive data types are the most basic data types in JavaScript. They include:

1. String

Strings represent text and are created using single quotes, double quotes, or backticks for template literals.

let greeting = 'Hello, World!';
let name = "John Doe";
let message = `Hello, ${name}!`; // Template literal

2. Number

Numbers represent both integer and floating-point values. Integers are whole numbers, while floating-point numbers have decimals.

let age = 30; // Integer
let pi = 3.14; // Floating-point
let largeNumber = 1e6; // 1000000 (Scientific notation)

3. Boolean

Booleans represent logical values: true or false.

let isActive = true;
let isComplete = false;

4. Null

Null represents an intentional absence of any object value.

let emptyValue = null;

5. Undefined

Undefined means a variable has been declared but not assigned a value.

let undefinedValue;
console.log(undefinedValue); // undefined

6. Symbol

Symbols are unique and immutable values, often used to identify object properties uniquely.

let symbol1 = Symbol('description');
let symbol2 = Symbol('description');
console.log(symbol1 === symbol2); // false

7. BigInt

BigInt is used for integers that are too large to be represented by the Number type.

let bigIntValue = 1234567890123456789012345678901234567890n;
console.log(bigIntValue); // 1234567890123456789012345678901234567890n

Object Data Types

Objects are collections of properties, and they include more complex data structures such as arrays and functions.

1. Object

Objects are collections of key-value pairs.

let person = {
    name: 'John',
    age: 30
};
console.log(person.name); // John

2. Array

Arrays are ordered collections of values.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1

3. Function

Functions are reusable blocks of code.

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Hello, Alice!

Conclusion

Understanding JavaScript data types is crucial for writing effective and bug-free code. JavaScript provides a rich set of data types, including primitive types like strings and numbers, as well as objects, arrays, and functions. Mastering these data types will help you manipulate and utilize data effectively in your applications.

If find this post helpful, you might want to check the post about JavaScript variables and constants.

Roee Yossef
Roee Yossef

I develop custom WordPress themes by design. I love typography, colors & everything between, and aim to provide high performance, seo optimized websites with a clean & semantic code.

0 Comments...

Leave a Comment

Add code using the buttons below. For example, to add PHP click the PHP button & add the code inside the shortcode. Typo? Please let us know...