Arrays in JavaScript

DEV Community · Annapoorani Kadhiravan · 2026-06-20 개발(SW)

Arrays are one of the most fundamental and widely used data structures in JavaScript. They allow us to store multiple values in a single variable and efficiently manipulate collections of data.

Examples of data commonly stored in arrays:

Student names
Marks
Product lists
Mobile numbers
Cities
Shopping cart items

What is an Array?

An array is a special type of object that stores multiple values in an ordered sequence.

Definition

An array is a collection of elements stored in contiguous positions and accessed using indexes.

Syntax

let arrayName = [value1, value2, value3];

Enter fullscreen mode Exit fullscreen mode

Example:

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits);

Enter fullscreen mode Exit fullscreen mode

Output:

["Apple", "Banana", "Orange"]

Enter fullscreen mode Exit fullscreen mode

Why Do We Need Arrays?

Without arrays:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Orange";

Enter fullscreen mode Exit fullscreen mode

Managing many variables becomes difficult.

Using arrays:

let fruits = ["Apple", "Banana", "Orange"];

Enter fullscreen mode Exit fullscreen mode

Everything is organized in one variable.

Real-Life Example

Think of a bookshelf.

Shelf

Book 0 → Java
Book 1 → Python
Book 2 → JavaScript
Book 3 → React

Enter fullscreen mode Exit fullscreen mode

Similarly:

let courses = ["Java", "Python", "JavaScript", "React"];

Enter fullscreen mode Exit fullscreen mode

Each element has an index.

Array Index

Array indexing starts from 0.

let colors = ["Red", "Blue", "Green"];

Enter fullscreen mode Exit fullscreen mode

Index Value 0 Red 1 Blue 2 Green

Accessing Elements

let colors = ["Red", "Blue", "Green"];

console.log(colors[0]);
console.log(colors[2]);

Enter fullscreen mode Exit fullscreen mode

Output:

Red
Green

Enter fullscreen mode Exit fullscreen mode

Creating Arrays

1. Array Literal (Most Common)

let numbers = [10, 20, 30];

Enter fullscreen mode Exit fullscreen mode

2. Array Constructor

let numbers = new Array(10, 20, 30);

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output:

[10, 20, 30]

Enter fullscreen mode Exit fullscreen mode

Arrays Can Store Different Data Types

let data = [
    "John",
    25,
    true,
    null
];

console.log(data);

Enter fullscreen mode Exit fullscreen mode

Output:

["John",25,true,null]

Enter fullscreen mode Exit fullscreen mode

Length Property

Returns the number of elements.

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits.length);

Enter fullscreen mode Exit fullscreen mode

Output:

Enter fullscreen mode Exit fullscreen mode

Modifying Elements

let fruits = ["Apple", "Banana", "Orange"];

fruits[1] = "Mango";

console.log(fruits);

Enter fullscreen mode Exit fullscreen mode

Output:

["Apple", "Mango", "Orange"]

Enter fullscreen mode Exit fullscreen mode

CRUD Operations with Arrays

Create

let laptops = ["HP", "Dell"];

Enter fullscreen mode Exit fullscreen mode

Read

console.log(laptops[0]);

Enter fullscreen mode Exit fullscreen mode

Output:

HP

Enter fullscreen mode Exit fullscreen mode

Update

laptops[1] = "Lenovo";

Enter fullscreen mode Exit fullscreen mode

Output:

["HP","Lenovo"]

Enter fullscreen mode Exit fullscreen mode

Delete

Using pop():

laptops.pop();

console.log(laptops);

Enter fullscreen mode Exit fullscreen mode

Output:

["HP"]

Enter fullscreen mode Exit fullscreen mode

Adding Elements

push()

Adds elements at the end.

let numbers = [10,20];

numbers.push(30);

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output:

[10,20,30]

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Adding a person to the end of a queue.

unshift()

Adds elements at the beginning.

let numbers = [20,30];

numbers.unshift(10);

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output:

[10,20,30]

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

VIP person entering at the front of the queue.

Removing Elements

pop()

Removes the last element.

let fruits = ["Apple","Banana","Orange"];

fruits.pop();

console.log(fruits);

Enter fullscreen mode Exit fullscreen mode

Output:

["Apple","Banana"]

Enter fullscreen mode Exit fullscreen mode

shift()

Removes the first element.

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

Real-Life Example

The first person in a queue leaves after getting service.

splice()

Adds, removes, or replaces elements.

Removing

let numbers = [10,20,30,40];

numbers.splice(1,2);

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output:

[10,40]

Enter fullscreen mode Exit fullscreen mode

Adding

let numbers = [10,40];

numbers.splice(1,0,20,30);

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output:

[10,20,30,40]

Enter fullscreen mode Exit fullscreen mode

Replacing

let numbers = [10,20,30];

numbers.splice(1,1,100);

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output:

[10,100,30]

Enter fullscreen mode Exit fullscreen mode

slice()

Returns a portion of an array.

let numbers = [10,20,30,40,50];

console.log(numbers.slice(1,4));

Enter fullscreen mode Exit fullscreen mode

Output:

[20,30,40]

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Cutting a cake and taking only a few slices.

Looping Through Arrays

for Loop

let fruits = ["Apple","Banana","Orange"];

for(let i=0;i<fruits.length;i++){
    console.log(fruits[i]);
}

Enter fullscreen mode Exit fullscreen mode

for…of

for(let fruit of fruits){
    console.log(fruit);
}

Enter fullscreen mode Exit fullscreen mode

forEach()

fruits.forEach(function(item){
    console.log(item);
});

Enter fullscreen mode Exit fullscreen mode

Searching Arrays

includes()

let fruits = ["Apple","Banana","Orange"];

console.log(fruits.includes("Banana"));

Enter fullscreen mode Exit fullscreen mode

Output:

true

Enter fullscreen mode Exit fullscreen mode

indexOf()

console.log(fruits.indexOf("Orange"));

Enter fullscreen mode Exit fullscreen mode

Output:

Enter fullscreen mode Exit fullscreen mode

Joining Arrays

concat()

let a = [1,2];
let b = [3,4];

let result = a.concat(b);

console.log(result);

Enter fullscreen mode Exit fullscreen mode

Output:

[1,2,3,4]

Enter fullscreen mode Exit fullscreen mode

Spread Operator

let a = [1,2];
let b = [3,4];

let result = [...a,...b];

console.log(result);

Enter fullscreen mode Exit fullscreen mode

Output:

[1,2,3,4]

Enter fullscreen mode Exit fullscreen mode

Sorting Arrays

let numbers = [5,2,8,1];

numbers.sort();

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output:

[1,2,5,8]

Enter fullscreen mode Exit fullscreen mode

Reversing Arrays

let numbers = [10,20,30];

numbers.reverse();

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output:

[30,20,10]

Enter fullscreen mode Exit fullscreen mode

map()

Transforms elements.

let nums = [1,2,3];

let doubled = nums.map(function(num){
    return num * 2;
});

console.log(doubled);

Enter fullscreen mode Exit fullscreen mode

Output:

[2,4,6]

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Doubling every employee’s salary.

filter()

Returns matching elements.

let nums = [10,20,30,40];

let result = nums.filter(function(num){
    return num > 20;
});

console.log(result);

Enter fullscreen mode Exit fullscreen mode

Output:

[30,40]

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Filtering students who scored above 80 marks.

reduce()

Reduces array into a single value.

let nums = [10,20,30];

let sum = nums.reduce(function(total,num){
    return total + num;
},0);

console.log(sum);

Enter fullscreen mode Exit fullscreen mode

Output:

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Calculating total bill amount.

find()

Returns first matching element.

let nums = [10,20,30,40];

let result = nums.find(num => num > 20);

console.log(result);

Enter fullscreen mode Exit fullscreen mode

Output:

Enter fullscreen mode Exit fullscreen mode

some()

Checks whether at least one element satisfies the condition.

let nums = [10,20,30];

console.log(nums.some(num => num > 25));

Enter fullscreen mode Exit fullscreen mode

Output:

true

Enter fullscreen mode Exit fullscreen mode

every()

Checks whether all elements satisfy the condition.

let nums = [10,20,30];

console.log(nums.every(num => num > 5));

Enter fullscreen mode Exit fullscreen mode

Output:

true

Enter fullscreen mode Exit fullscreen mode

Destructuring Arrays

let colors = ["Red","Blue","Green"];

let [first, second] = colors;

console.log(first);
console.log(second);

Enter fullscreen mode Exit fullscreen mode

Output:

Red
Blue

Enter fullscreen mode Exit fullscreen mode

Arrays of Objects

let students = [

{
    name: "John",
    age: 21
},

{
    name: "David",
    age: 22
}

];

console.log(students[0].name);

Enter fullscreen mode Exit fullscreen mode

Output:

John

Enter fullscreen mode Exit fullscreen mode

Multidimensional Arrays

let matrix = [

[1,2],
[3,4]

];

console.log(matrix[1][0]);

Enter fullscreen mode Exit fullscreen mode

Output:

Enter fullscreen mode Exit fullscreen mode

Array Methods Summary

Method Purpose push() Add at end pop() Remove from end shift() Remove from beginning unshift() Add at beginning splice() Add, remove, replace slice() Extract part of array concat() Merge arrays sort() Sort elements reverse() Reverse elements map() Transform elements filter() Filter elements reduce() Convert to single value find() Find first match some() Checks one condition every() Checks all conditions

Arrays vs Objects

Arrays Objects Ordered collection Key-value pairs Accessed by index Accessed by keys Stores lists Stores entities Example: Marks Example: Student

Real-World Examples

Shopping Cart

let cart = [
    "Laptop",
    "Mouse",
    "Keyboard"
];

Enter fullscreen mode Exit fullscreen mode

Student Marks

let marks = [90,85,95];

Enter fullscreen mode Exit fullscreen mode

Cities

let cities = [
    "Madurai",
    "Chennai",
    "Coimbatore"
];

Enter fullscreen mode Exit fullscreen mode

Employees

let employees = [
    "John",
    "David",
    "Sam"
];

Enter fullscreen mode Exit fullscreen mode

References :
https://www.geeksforgeeks.org/javascript/javascript-arrays/
https://www.w3schools.com/js/js_arrays.asp

원문에서 계속 ↗

추출 본문 · 출처: dev.to · https://dev.to/annapoo/arrays-in-javascript-2nb4

Arrays in JavaScript

What is an Array?

Definition

Syntax

Why Do We Need Arrays?

Real-Life Example

Array Index

Accessing Elements

Creating Arrays

1. Array Literal (Most Common)

2. Array Constructor

Arrays Can Store Different Data Types

Length Property

Modifying Elements

CRUD Operations with Arrays

Create

Read

Update

Delete

Adding Elements

push()

Real-Life Example

unshift()

Real-Life Example

Removing Elements

pop()

shift()

Real-Life Example

splice()

Removing

Adding

Replacing

slice()

Real-Life Example

Looping Through Arrays

for Loop

for…of

forEach()

Searching Arrays

includes()

indexOf()

Joining Arrays

concat()

Spread Operator

Sorting Arrays

Reversing Arrays

map()

Real-Life Example

filter()

Real-Life Example

reduce()

Real-Life Example

find()

some()

every()

Destructuring Arrays

Arrays of Objects

Multidimensional Arrays

Array Methods Summary

Arrays vs Objects

Real-World Examples

Shopping Cart

Student Marks

Cities

Employees

코멘트

답글 남기기 응답 취소

더 많은 게시물

에피소드 1: “세상에 나타난 작은 점”