Arrays in JavaScript

An array is a variable that contains a list of data, where each element has its own index and can be accessed using that index. Array indexing starts from zero. An array can contain different types of data: other arrays (multidimensional arrays), objects, numbers, and strings.

Arrays allow you to store and process large lists of data, for example, a list of products in an online store or user profile data

const mixedArray = [
  42,                          // Number
  "Hello",                     // String
  true,                        // Boolean
  null,                        // null
  undefined,                   // undefined
  { name: "John", age: 30 },   // Object
  [1, 2, 3],                   // Array
  function() { return "Hi"; }, // Function
  new Date(),                  // Date
  /pattern/,                   // RegExp
  Symbol('id'),                // Symbol
  123n,                        // BigInt
  NaN,                         // NaN
  Infinity                     // Infinity
];

console.log(mixedArray);

// 1. Array of strings (names):
const names = ["Оля", "Андрій", "Марія", "Тарас", "Ірина"];

// 2. Array of numbers:
const ages = [18, 25, 30, 42, 57];

// 3. Mixed array (different data types):
const mixed = [ true, "JS", 2023, null, { skill: "coding" } ];

// 4. Array of objects:
const products = [
  { id: 1, name: "Ноутбук", price: 20000 },
  { id: 2, name: "Смартфон", price: 10000 },
  { id: 3, name: "Навушники", price: 800 }
];

// 5. Two-dimensional (nested) array:
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

Values in an array can be modified: removed, replaced, or added. Changes can be made directly to the original array using special methods available in JavaScript for working with arrays. These methods are divided into two groups: those that modify the original array and those that process the array and return a new one, leaving the original array unchanged.

More about core array methods

Core methods and code examples for adding and removing elements

push(): Adds one or more elements to the end of the array and returns the new array length. Mutates the array.

pop(): Removes the last element from the array and returns the removed element. Mutates the array.

shift(): Removes the first element from the array and returns the removed element. Mutates the array.

unshift(): Adds one or more elements to the beginning of the array and returns the new array length. Mutates the array.

const numbers = [1, 2, 3];

// Add to the end
numbers.push(4, 5); // numbers = [1, 2, 3, 4, 5]

// Remove last
const removed = numbers.pop(); // removed = 5, numbers = [1, 2, 3, 4]

// Remove first
numbers.shift(); // numbers = [2, 3, 4]

// Add to the beginning
numbers.unshift(0); // numbers = [0, 2, 3, 4]

How to create a copy of an array

Arrays are reference types in JavaScript. For example, if you do const arr2 = arr1;, it does not create a new array, but only a reference to the existing one.

If you need to work with an array without modifying it, you can use non-mutating methods or create a copy of the array using slice() or the spread operator (...):

const copy = [...arr]; // array copy

The slice() method allows you to create a new array that is a copy of part or all of the original array. It takes two arguments:

start (optional) — the index where copying begins (inclusive).

end (optional) — the index where copying ends (exclusive).

If no arguments are provided, slice() returns a full copy of the array.

Examples:

const arr = [1, 2, 3, 4, 5];
const copy = arr.slice(); // [1, 2, 3, 4, 5]
console.log(copy); // [1, 2, 3, 4, 5]
console.log(arr === copy); // false (these are different arrays)

const arr = [1, 2, 3, 4, 5];
const slicedCopy = arr.slice(2, 4);
console.log(slicedCopy) //[ 3, 4 ];

const arr = [1, 2, 3, 4, 5];
const part = arr.slice(-3); // [3, 4, 5]
console.log(part); // [3, 4, 5]

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2, -1));
//  Array ["camel", "duck"]

Three ways to create an array

// 'fruits' array created using array literal notation
const fruits = ["Apple", "Banana"];
console.log(fruits.length);
// 2

// 'fruits' array created using array literal notation
const fruits = ["Apple", "Banana"];
console.log(fruits.length);
// 2

Methods like Array.from(), Array.of(), spread operator (...), split() for converting strings to arrays, map(), fill() and other non-mutating methods listed above.

Example using the from() method:

//From a string: const arr = Array.from("Hello"); 
console.log(arr); // ['H', 'e', 'l', 'l', 'o'] 

//From a set:
 const set = new Set([1, 2, 3]);
 const arr = Array.from(set); console.log(arr); // [1, 2, 3] 

//From an array-like object:
 const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
 const arr = Array.from(arrayLike);
 console.log(arr); // ['a', 'b', 'c'] 

//With a mapper function:
 const arr = Array.from([1, 2, 3], x => x * 2);
 console.log(arr); // [2, 4, 6]

The Set object in the example above is a built-in JavaScript collection that represents a set of unique values. It is similar to an array but has several key differences. Let’s take a closer look at what Set is, how it works, and how it relates to objects and arrays.

Set is a collection that stores only unique values. This means it cannot contain duplicate elements. For example, if you add the number 5 twice, it will only be stored once.

Main characteristics:

1. Uniqueness: All values in a Set are unique.
2. Iterability: Set can be iterated using loops or methods like forEach.
3. No indices: Unlike arrays, Set does not have indices, so elements cannot be accessed by index.
4. Element operations: Set provides methods to add, remove, and check elements.

How to create a Set?

Set is created using the new Set() constructor. You can pass an iterable (for example, an array), and the Set will automatically include only unique elements from it.

For example, here the number 4 is added only once because Set stores only unique values:

const mySet = new Set([1, 2, 3, 4, 4, 5]);
console.log(mySet); // Set { 1, 2, 3, 4, 5 }

Core methods and properties of Set

The Array.of() method

Creates an array from the passed arguments. It is useful when you need to create an array from a single number (unlike new Array(), which in that case creates an empty array with the specified length).

const arr = Array.of(5);
console.log(arr); // [5]

Spread operator (...)

allows you to create a new array based on an existing array or another iterable object.

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

Merging arrays:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

From an iterable object:

const str = "Hello";
const arr = [...str];
console.log(arr); // ['H', 'e', 'l', 'l', 'o']

The split() method

If you have a string that needs to be converted into an array, you can use the split() method.

const str = "apple,banana,orange";
const arr = str.split(',');
console.log(arr); // ['apple', 'banana', 'orange']

Generating an array using Array() and map()

const arr = [1, 2, 3, 4, 5];
const part = arr.slice(-3); // [3, 4, 5]
console.log(part); // [3, 4, 5]

If you need to create an array with a specific number of elements generated dynamically, you can use a combination of Array(), fill(), and map().

Array of numbers from 0 to 9:

const arr = Array(10).fill().map((_, index) => index);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array of squared numbers:

const arr = Array(5).fill().map((_, index) => (index + 1) ** 2);
console.log(arr); // [1, 4, 9, 16, 25]

Generating an array using Array.from() and a mapper function

The Array.from() method also allows you to create an array using a mapper function that generates elements.

Array of numbers from 0 to 9:

const arr = Array.from({ length: 10 }, (_, index) => index);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//creates an array of 10 elements where each element equals its index.
//_ is a convention for an unused argument (current element).
//index is the index of the current element, returned as the value.
//The function returns the value that will be placed in the array.

Array of even numbers:

const arr = Array.from({ length: 5 }, (_, index) => index * 2);
console.log(arr); // [0, 2, 4, 6, 8]

What does _ mean?

In JavaScript, _ is just a variable name. In this context, it is used to indicate an unused argument. This is a common practice to show that the value is intentionally ignored. For example: const func = (_, index) => index; This function takes two arguments but uses only index. The first argument (_) is ignored. If you don’t want to use _, you can simply omit the first argument: const arr = Array.from({ length: 10 }, (index) => index);

When to use an array literal vs constructor?

Array iteration

Array iteration is used to process each element sequentially. It allows you to:

1. Access or output array values (e.g., console.log()).
2. Modify each element if needed (e.g., multiply all numbers by 2).
3. Collect data into a new structure (e.g., create a new array or calculate totals).
4. Filter elements based on a condition.
5. Transform data using methods like map, reduce, filter to produce a new result.

Iteration enables almost any operation on array elements — from simple checks to complex data processing.

Array iteration examples

const arr = [2, -1, 5, 0, 7];
const positiveDoubled = [];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] > 0) {
    positiveDoubled.push(arr[i] * 2);
  }
}

console.log(positiveDoubled);
// Result: [4, 10, 14]

3. const values = Object.values(product); – We call the method Object.values(), which returns an array of all values of the product object.

4. const entries = Object.entries(product); – We call the method Object.entries(), which returns an array of pairs [key, value].

5. for (let [key, value] of entries) { ... } – We use the for...of loop to iterate over each element of the entries array. Since each element of the entries array is a small array with two elements [key, value], we use destructuring let [key, value] to immediately extract key and value into variables.

6. console.log(`Key: ${key}, Value: ${value}`); – On each iteration, we output a string showing the current key and its value.

As a result, in the console we will see:

Key: title, Value: Laptop
Key: price, Value: 1200
Key: currency, Value: USD
Key: inStock, Value: true

Note that object iteration in JavaScript can be done in several ways:

for...in (iterating over object properties),

Object.keys() / Object.values() / Object.entries() (getting arrays of keys/values/pairs),

for...of (iterating over array elements, if the object is an array or if you use Object.entries()).

Always keep in mind the type of data you are working with (string, number, boolean, array, or object). Depending on it, different methods and approaches will be used.
When working with nested structures (for example, an array inside an object, an object inside an array, or even an object inside another object), make sure you are accessing the correct level of nesting (using dot notation . or square brackets []).

Functions in arrays and objects in JavaScript: a detailed overview

In JavaScript, functions are first-class citizens, which means they can be:

let greet = function(name) {
    console.log(`Привіт, ${name}!`);
};

function callFunction(func) {
    func();
}
callFunction(greet);

function createGreeter(greeting) {
    return function(name) {
        console.log(`${greeting}, ${name}!`);
    };
}

Functions in objects: methods

When a function is a property of an object, it is called a method. Methods allow objects to perform certain actions.

const person = {
    firstName: "Іван",
    lastName: "Петров",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

console.log(person.fullName()); // Виведе: "Іван Петров"

this: Inside a method, this refers to the object itself. This allows the method to access other properties of the object.

Functions in arrays: array methods

Arrays in JavaScript are objects, so they also have their own methods. Array methods allow you to perform various operations on array elements, such as adding, removing, searching, and sorting.

const numbers = [1, 2, 3, 4, 5];

// Adding an element to the end of the array
numbers.push(6);

// Removing the last element
numbers.pop();

// Sorting the array
numbers.sort();

// Checking if an element exists in the array
console.log(numbers.includes(3)); // Outputs: true

Functions as array elements

Although arrays usually store primitive values or other objects, they can also store functions:

const functions = [
    function() { console.log("Функція 1"); },
    function() { console.log("Функція 2"); }
];

functions[0](); // Outputs: "Функція 1"

Key considerations when using functions in arrays and objects

• Execution context (this): It is important to understand how this works inside functions, especially in object methods.
• Binding context: To control the value of this, you can use bind(), call(), and apply().
• Arrow functions: Arrow functions have special behavior regarding this.
• Using this in array methods: Some array methods, such as map, filter, and reduce, take functions as arguments. In these functions, this may refer to different objects depending on the context.

Why are arrow functions often used with array methods?

Arrow functions are especially convenient to use with array methods thanks to lexical this.

this: In functions passed to array methods, this usually refers to the global object. Arrow functions inherit this from the surrounding context, which allows you to use this from the object where the array method is called.

Conciseness: Arrow functions often make code more readable and compact.

Array methods that use functions:

map: Creates a new array by applying a function to each element.

filter: Creates a new array including only the elements for which the function returned true.

forEach: Executes a function for each array element.

find: Returns the first element for which the function returned true.