JavaScript Arrays
Store and organize multiple values in a single variable
📚 What are JavaScript Arrays?
Arrays are special variables that can hold more than one value at a time. Think of them as containers that can store multiple items in a single place.
// Creating an array with fruits
let fruits = ["apple", "banana", "orange"];
console.log(fruits); // ["apple", "banana", "orange"]
Output:
["apple", "banana", "orange"]
Key Array Concepts
Storage
Store multiple values in one variable
let colors = ["red", "blue", "green"];Index
Access items using their position (0, 1, 2...)
colors[0] // "red"Length
Find how many items are in the array
colors.length // 3Dynamic
Add or remove items anytime
colors.push("yellow");🔹 Creating Arrays
There are different ways to create arrays in JavaScript:
// Method 1: Array literal (most common)
let fruits = ["apple", "banana", "orange"];
// Method 2: Array constructor
let numbers = new Array(1, 2, 3, 4, 5);
// Method 3: Empty array
let emptyArray = [];
// Method 4: Array with specific length
let fixedLength = new Array(5); // Creates array with 5 empty slotsOutput:
fruits: ["apple", "banana", "orange"]
numbers: [1, 2, 3, 4, 5]
emptyArray: []
fixedLength: [empty × 5]
🔹 Accessing Array Elements
Use square brackets with the index number to access elements:
let animals = ["cat", "dog", "bird", "fish"];
// Accessing elements (index starts from 0)
console.log(animals[0]); // "cat" (first element)
console.log(animals[1]); // "dog" (second element)
console.log(animals[3]); // "fish" (fourth element)
// Getting the last element
console.log(animals[animals.length - 1]); // "fish"
// Accessing non-existent index
console.log(animals[10]); // undefinedOutput:
cat
dog
fish
fish
undefined
🔹 Modifying Arrays
Arrays are mutable, meaning you can change their contents:
let cities = ["New York", "London", "Tokyo"];
// Changing an element
cities[1] = "Paris";
console.log(cities); // ["New York", "Paris", "Tokyo"]
// Adding elements
cities[3] = "Sydney";
console.log(cities); // ["New York", "Paris", "Tokyo", "Sydney"]
// Adding to the end
cities.push("Berlin");
console.log(cities); // ["New York", "Paris", "Tokyo", "Sydney", "Berlin"]Output:
["New York", "Paris", "Tokyo"]
["New York", "Paris", "Tokyo", "Sydney"]
["New York", "Paris", "Tokyo", "Sydney", "Berlin"]
🔹 Array Properties and Basic Methods
Arrays come with useful properties and methods:
let numbers = [10, 20, 30, 40, 50];
// Length property
console.log(numbers.length); // 5
// Converting to string
console.log(numbers.toString()); // "10,20,30,40,50"
// Joining with custom separator
console.log(numbers.join(" - ")); // "10 - 20 - 30 - 40 - 50"
// Adding elements
numbers.push(60); // Add to end
numbers.unshift(5); // Add to beginning
console.log(numbers); // [5, 10, 20, 30, 40, 50, 60]
// Removing elements
let lastItem = numbers.pop(); // Remove from end
let firstItem = numbers.shift(); // Remove from beginning
console.log(lastItem); // 60
console.log(firstItem); // 5Output:
5
10,20,30,40,50
10 - 20 - 30 - 40 - 50
[5, 10, 20, 30, 40, 50, 60]
60
5
🔹 Mixed Data Types
JavaScript arrays can store different types of data:
// Array with mixed data types
let mixedArray = [
"Hello", // string
42, // number
true, // boolean
null, // null
undefined, // undefined
[1, 2, 3], // array
{name: "John"} // object
];
console.log(mixedArray[0]); // "Hello"
console.log(mixedArray[1]); // 42
console.log(mixedArray[5]); // [1, 2, 3]
console.log(mixedArray[6].name); // "John"Output:
Hello
42
[1, 2, 3]
John