DEV Community

Cover image for Array Methods You Must Know
Souvik Guha Roy
Souvik Guha Roy

Posted on

Array Methods You Must Know

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() and pop()
    • shift() and unshift()
    • 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";
Enter fullscreen mode Exit fullscreen mode

2. Boolean

A boolean can only have two values:

  • true
  • false

Example:

let isLoggedIn = true;
Enter fullscreen mode Exit fullscreen mode

3. Number

Numbers represent numeric values.

let marks = 95;
let price = 99.99;
Enter fullscreen mode Exit fullscreen mode

4. BigInt

BigInt is used for very large numbers that cannot be represented using the normal Number type.

let bigNumber = 12345678901234567890n;
Enter fullscreen mode Exit fullscreen mode

5. Undefined

When a variable is declared but no value is assigned, its value becomes undefined.

let x;
Enter fullscreen mode Exit fullscreen mode

6. Null

null represents a value that is intentionally empty.

let data = null;
Enter fullscreen mode Exit fullscreen mode

7. Symbol

A Symbol creates a unique identifier, often used in objects.

let id = Symbol("id");
Enter fullscreen mode Exit fullscreen mode

8. Object

Objects store multiple related values together.

let user = {
  name: "Kunal",
  age: 21
};
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

In JavaScript, arrays can store different data types in the same array.

let data = ["John", 25, true];
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Output:

["Apple", "Banana", "Orange"]
Enter fullscreen mode Exit fullscreen mode

pop()

The pop() method removes the last element from an array.

Example:

fruits.pop();

console.log(fruits);
Enter fullscreen mode Exit fullscreen mode

Output:

["Apple", "Banana"]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Output:

["Banana", "Orange"]
Enter fullscreen mode Exit fullscreen mode

unshift()

The unshift() method adds one or more elements to the beginning of an array.

fruits.unshift("Mango");

console.log(fruits);
Enter fullscreen mode Exit fullscreen mode

Output:

["Mango", "Banana", "Orange"]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Output:

[2, 4, 6, 8]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Output:

[30, 40]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Output:

10
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

Output:

Apple
Banana
Orange
Enter fullscreen mode Exit fullscreen mode

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)