Understanding Arrays and Common Array Methods in JavaScript
Hi everyone! π
In this blog, weβll discuss Arrays in JavaScript and some of the most commonly used array methods that developers use in modern JavaScript.
Arrays are one of the most important data structures in programming. Learning how to work with them properly can greatly improve the quality, readability, and efficiency of your code.
Topics Covered
In this guide we will learn:
- JavaScript Data Types (quick recap)
- What an Array is and why we use it
-
Common Array Methods:
-
push()andpop() -
shift()andunshift() map()filter()-
reduce()(basic explanation) forEach()
-
JavaScript Data Types
In JavaScript, data types define what kind of value a variable can store.
You can think of data types like containers in real life:
- A water bottle holds water
- A wallet holds money
- A folder holds documents
Similarly, variables store values of different types.
JavaScript has 8 main data types.
1. String
A string represents text and is written inside quotes.
let name = "Like this blog";
2. Boolean
A boolean can only have two values:
truefalse
Example:
let isLoggedIn = true;
3. Number
Numbers represent numeric values.
let marks = 95;
let price = 99.99;
4. BigInt
BigInt is used for very large numbers that cannot be represented using the normal Number type.
let bigNumber = 12345678901234567890n;
5. Undefined
When a variable is declared but no value is assigned, its value becomes undefined.
let x;
6. Null
null represents a value that is intentionally empty.
let data = null;
7. Symbol
A Symbol creates a unique identifier, often used in objects.
let id = Symbol("id");
8. Object
Objects store multiple related values together.
let user = {
name: "Kunal",
age: 21
};
Note: In JavaScript, the data type of an array is also object.
What is an Array?
An array is a data structure used to store multiple values inside a single variable.
Instead of creating many variables, you can store all related data in one array.
Example:
let items = ["Like", "this", "blog"];
Here, items stores three values in a single variable.
Why Do We Use Arrays?
Arrays are useful because they allow us to:
- Store multiple values in one variable
- Access elements using an index (position)
- Easily loop through data
- Perform operations using built-in array methods
Example:
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]); // Apple
In JavaScript, arrays can store different data types in the same array.
let data = ["John", 25, true];
Common Array Methods Every Developer Should Know
Arrays come with many built-in methods that make it easier to manipulate and work with data.
Letβs look at some of the most commonly used ones.
1. push() and pop()
push()
The push() method adds one or more elements to the end of an array.
Example:
let fruits = ["Apple", "Banana"];
fruits.push("Orange");
console.log(fruits);
Output:
["Apple", "Banana", "Orange"]
pop()
The pop() method removes the last element from an array.
Example:
fruits.pop();
console.log(fruits);
Output:
["Apple", "Banana"]
2. shift() and unshift()
shift()
The shift() method removes the first element from an array.
let fruits = ["Apple", "Banana", "Orange"];
fruits.shift();
console.log(fruits);
Output:
["Banana", "Orange"]
unshift()
The unshift() method adds one or more elements to the beginning of an array.
fruits.unshift("Mango");
console.log(fruits);
Output:
["Mango", "Banana", "Orange"]
3. map()
The map() method creates a new array by applying a function to each element of the original array.
Example:
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled);
Output:
[2, 4, 6, 8]
4. filter()
The filter() method creates a new array containing only the elements that match a condition.
Example:
let numbers = [10, 20, 30, 40];
let result = numbers.filter(num => num > 20);
console.log(result);
Output:
[30, 40]
Only the elements that satisfy the condition are returned.
5. reduce() (Basic Idea)
The reduce() method reduces all elements of an array into a single value.
Example:
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);
Output:
10
It is often used for:
- Calculating totals
- Summing numbers
- Aggregating data
6. forEach()
The forEach() method runs a function once for each element in the array.
Example:
let fruits = ["Apple", "Banana", "Orange"];
fruits.forEach(fruit => {
console.log(fruit);
});
Output:
Apple
Banana
Orange
Unlike map(), forEach() does not return a new array.
Final Thoughts
Arrays are a fundamental part of JavaScript and programming in general.
By learning how to use array methods like:
push()pop()shift()unshift()map()filter()reduce()forEach()
you can write cleaner, more efficient, and more readable code.
These methods are widely used in modern JavaScript development, especially when working with large datasets and APIs.
The best way to understand them is to experiment with these examples in your browser console or Node.js.
Practice them regularly, and they will quickly become a natural part of your coding workflow.
Top comments (0)