Example of Array in JavaScript: A Practical Guide

Learn how to use arrays in JavaScript with clear examples, from creation to iteration and common methods. This guide covers practical patterns for working with data efficiently in modern JS environments.

JavaScripting Team

March 23, 2026·5 min read

JavaScript Tutorials Learn JavaScript Arrays Syntax

Arrays in JavaScript - JavaScripting — Photo by Đào Việt Hoàng on Unsplash

Quick AnswerDefinition

An array in JavaScript is an ordered collection of values that can hold numbers, strings, objects, or even other arrays. The topic example of array in javascript shows how to declare, access, and mutate lists, and how to apply common operations like push, pop, map, and filter. Arrays are foundational to JavaScript data handling and come with a rich set of built-in methods for transformation and iteration.

What is an array in JavaScript?

An array in JavaScript is an ordered list of values. It can hold numbers, strings, objects, functions, or even other arrays. A practical example of an array in javascript is shown below to illustrate the basic ideas:

JavaScript

// Basic array literal
const nums = [1, 2, 3, 4, 5];
console.log(nums.length); // 5

JavaScript

// Array of strings
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // banana

JavaScript

// Nested arrays (matrix-like)
const matrix = [[1, 2], [3, 4]];
console.log(matrix[0][1]); // 2

According to JavaScripting, arrays are mutable and can store diverse data types, making them versatile for real-world data. The example of array in javascript above demonstrates how to declare and inspect array contents, a foundational skill for any aspiring developer. Keeping practice with different element types helps reinforce understanding of array behavior across data structures.

\n## Creating arrays: literals, constructors, and array-like objects

There are several ways to create arrays in JavaScript, each with its own use cases. The most common approach uses array literals, which are compact and readable:

JavaScript

const list = [10, 20, 30];

You can also create arrays with the Array constructor, though this is less common for fixed-size lists:

JavaScript

const empty = new Array(3); // creates [undefined, undefined, undefined]
console.log(empty.length); // 3

Another pattern is Array.from, useful when converting iterable data into an array:

JavaScript

const chars = Array.from('abc'); // ['a','b','c']

When working with array-like objects (objects with a length property and indexed elements), you can convert to a true array easily, which helps you use full array methods:

JavaScript

function listLike(){ return {0:'a',1:'b',length:2}; }
const arr = Array.from(listLike()); // ['a','b']

In practice, prefer literals when possible for clarity and performance. JavaScript arrays support dynamic resizing and can hold mixed types, which aligns with JavaScripting’s emphasis on practical JavaScript guidance.

Accessing and mutating arrays

Arrays provide powerful ways to access and modify data. Read access uses numerical indices starting at 0, while mutations modify the existing array or return new ones depending on the operation:

JavaScript

const items = ['a','b','c'];
console.log(items[0]); // 'a'
console.log(items.length); // 3

Mutating methods like push and pop add or remove items from the end, while unshift/shift operate at the start:

JavaScript

items.push('d'); // ['a','b','c','d']
const last = items.pop(); // 'd', items now ['a','b','c']
items.unshift('z'); // ['z','a','b','c']

If you need to remove or replace inside the middle, splice is your friend:

JavaScript

// Remove 1 item at index 1
const removed = items.splice(1, 1); // ['a'], items now ['z','b','c']
// Insert without removing
items.splice(1, 0, 'x', 'y'); // ['z','x','y','b','c']

These patterns are central to manipulating data structures in JavaScript without transforming logic elsewhere. The ability to access and mutate arrays efficiently underpins common workflows in JavaScript development.

Iterating over arrays

Iteration is frequently used to process collections. Native loops, higher-order functions, and iteration protocols provide varying levels of readability and performance:

JavaScript

const nums = [1, 2, 3, 4, 5];
for (let i = 0; i < nums.length; i++) {
  console.log(nums[i]);
}

JavaScript

for (const n of nums) {
  console.log(n);
}

JavaScript

nums.forEach(n => console.log(n));

When transformations are needed, map is often clearer than a manual loop, while reduce can combine values into a single result:

JavaScript

const doubles = nums.map(n => n * 2); // [2,4,6,8,10]
const sum = nums.reduce((acc, n) => acc + n, 0); // 15

A key takeaway is to choose the iteration method based on whether you need a new array, a single value, or side effects. This aligns with best practices for readable, functional-style JavaScript code in modern projects.

Common array methods for transformation

JavaScript arrays come with rich methods that encourage declarative data processing. Here are three staples:

JavaScript

// map transforms each element, returning a new array
const names = ['alice','bob','charlie'];
const caps = names.map(n => n.toUpperCase()); // ['ALICE','BOB','CHARLIE']

JavaScript

// filter selects elements that satisfy a predicate
const ages = [12, 18, 21, 16, 30];
const adults = ages.filter(a => a >= 18); // [18,21,30]

JavaScript

// reduce reduces an array to a single value
const products = [2,3,5];
const total = products.reduce((acc, x) => acc * x, 1); // 30

Combine these methods for powerful pipelines that are easy to read and test. The approach mirrors real-world data processing tasks often encountered in web applications and aligns with practical JavaScript development promoted by JavaScripting.

Practical example: a small data pipeline

Consider an array of user objects. We can filter active users, map to a display name, and reduce to a summary.

JavaScript

const users = [
  { id: 1, name: 'Ada', active: true, score: 42 },
  { id: 2, name: 'Grace', active: false, score: 0 },
  { id: 3, name: 'Lin', active: true, score: 88 }
];

// Step 1: keep active users
const active = users.filter(u => u.active);
// Step 2: extract names
const names = active.map(u => u.name);
// Step 3: compute total score for active users
const totalScore = active.reduce((sum, u) => sum + u.score, 0);
console.log(names); // ['Ada','Lin']
console.log(totalScore); // 130

This pipeline demonstrates how to compose simple array operations into a functional, readable flow. By keeping each step small and testable, you create a robust pattern for processing data in JavaScript projects. This practical approach is a cornerstone of modern JavaScript development and aligns with the pragmatic tone of JavaScripting.

Performance considerations and best practices

When possible, favor immutable patterns to avoid unintended side effects. Instead of pushing into an existing array, create a new one with spread syntax or array methods:

JavaScript

const a = [1,2,3];
const b = [...a, 4]; // [1,2,3,4]

Avoid mutating inputs passed to a function; return new arrays instead. For large data sets, prefer map/filter/reduce chains over explicit loops for maintainability, but consider profiling if performance is critical. In practice, tuning garbage collection and avoiding excessive allocations helps keep apps responsive. These guidelines reflect best practices recommended by JavaScripting for building reliable JavaScript codebases.

Quick reference: common patterns and pitfalls

Always prefer array literals over Array constructor for readability.
Use map for transformations, filter for selection, and reduce for aggregation.
Be mindful of zero-based indexing when accessing arr[0], arr[1], etc.
Avoid mutating inputs unless you purposefully require in-place updates due to performance constraints.
When dealing with sparse arrays, remember that missing indices are undefined, which can affect transformations and length calculations.

These patterns form the backbone of working with arrays in JavaScript and set you up for more advanced topics like functional programming and async data flows. The JavaScripting team emphasizes practical, testable code, and this section reinforces that philosophy.

Steps

Estimated time: 60-75 minutes

1
Create a development file
Set up a new JavaScript file (e.g., arrays.js) in your project and ensure your editor is ready. This first step establishes the workspace where you’ll experiment with arrays.
Tip: Use a consistent project structure to keep examples organized.
2
Declare sample arrays
Create several arrays using literals to represent numbers, strings, and objects. This shows how arrays can hold diverse data types.
Tip: Comment each array with its intended data type.
3
Practice access and mutation
Experiment with indexing to retrieve values and with push/pop to modify the arrays. Try unshift/shift for edge cases at the ends.
Tip: Avoid mutating input data when possible; prefer creating new arrays.
4
Apply array methods
Use map, filter, and reduce to transform data and aggregate results. Compose a small pipeline to illustrate practical usage.
Tip: Chain methods for readable, functional code.
5
Iterate and verify
Loop through the results to verify correctness and print outputs. Use console.assert for lightweight checks.
Tip: Include simple tests to catch off-by-one errors.
6
Refactor for immutability
Refactor to avoid in-place mutations by using spread syntax and non-mutating methods.
Tip: Aim for predictable state changes in larger apps.

Pro Tip: Prefer immutable array operations to prevent side effects in complex codebases.

Warning: Be cautious with sparse arrays; access to missing indices yields undefined.

Note: Comment examples clearly to aid future readers and teammates.

Prerequisites

Required

JavaScript basics (variables, data types, control flow)
Required
A modern browser or Node.js installed↗
Required

Optional

A code editor (e.g., VS Code)
Optional
Familiarity with the browser console or terminal
Optional
Optional: npm or yarn for package management
Optional

Keyboard Shortcuts

Action	Shortcut
CopyWhen copying code blocks or selected text	`Ctrl`+`C`
PasteInsert into editor or console	`Ctrl`+`V`
Format documentCode formatting in editors like VS Code	`Ctrl`+`⇧`+`F`
Comment selectionToggle line comments in an editor	`Ctrl`+`/`

Questions & Answers

What is an array in JavaScript?

An array is an ordered collection of values in JavaScript. Each value has a numeric index, starting at 0. Arrays can hold mixed data types and are mutable, meaning you can add, remove, or replace elements using built-in methods.

How do you create an array in JavaScript?

The most common way is using an array literal, like const a = [1,2,3]. You can also use new Array(...) or Array.from(...) for special cases, but literals are preferred for readability and performance.

What’s the difference between push vs concat?

Push adds elements to the existing array (mutating the original), while concat returns a new array with combined elements, leaving the original intact. Use concat when you want to preserve the original data.

How can you iterate over arrays efficiently?

Use modern iteration methods like for...of or Array.prototype.forEach for readability. For transformations, prefer map to produce a new array and avoid side effects.

What are common pitfalls with array methods?

Be mindful of returning undefined when mapping or filtering, and watch out for off-by-one errors with indices. Understand that length can be greater than the last index if you create sparse arrays.

What to Remember

Master array literals for clear, readable code
Use map, filter, reduce for clean data pipelines
Avoid mutating inputs; favor new arrays
Leverage for...of and forEach for readable iteration
Know when to choose splice vs slice for array edits

← More in JavaScript Arrays

What is an array in JavaScript?

Accessing and mutating arrays

Iterating over arrays

Common array methods for transformation

Practical example: a small data pipeline

Performance considerations and best practices

Quick reference: common patterns and pitfalls

Steps

Create a development file

Declare sample arrays

Practice access and mutation

Apply array methods

Iterate and verify

Refactor for immutability

Prerequisites

Keyboard Shortcuts

Questions & Answers

What to Remember

Related Articles