JavaScript Array Exercises

An essential component of the language, JavaScript arrays offer a flexible and potent means of managing data sets. The ability to manipulate arrays is essential for any JavaScript developer.

An Overview of Arrays in JavaScript

JavaScript arrays are an essential and adaptable data structure that is essential to web development. JavaScript is a high-level, interpreted programming language that's commonly used to create dynamic, interactive websites. One of the main tools that developers use to effectively arrange, store, and work with data sets is an array.

Fundamentals of Arrays in JavaScript

In JavaScript, an array is a set of elements that are arranged in a linear fashion and are uniquely recognised by either a key or an index. Any data type, including objects, strings, numbers, and even other arrays, may be represented by these elements. JavaScript arrays are highly versatile for a wide range of use cases due to their ability to accommodate a variety of data types.

Proclamation and Start of Initialization

It's simple to create an array in JavaScript. Square brackets can be used to declare and initialise an array:

This short syntax creates a four-element array called fruits. JavaScript arrays are zero-indexed, which means that the first element is accessed with an index of 0, the second with an index of 1, and so on. This is a crucial point to remember.

Variable Character of Arrays

The dynamic nature of JavaScript arrays is one of their unique characteristics. Runtime modifications to arrays include adding or deleting elements, changing their values, and adjusting their length. Because of this dynamic behaviour, developers have a strong tool at their disposal to modify programmes to accommodate changing data requirements.

Common Techniques for Arrays

A large collection of built-in methods that enable a variety of operations are included with JavaScript arrays. Array manipulation is made easier using these methods, which can be used for sorting, adding, or removing elements from the array. Map(), filter(), reduce(), push(), pop(), shift(), unshift(), and forEach() are a few frequently used array techniques.

Requirements and Examples

In the context of web development, arrays are used in many different situations. Creating dynamic interfaces, processing data from APIs, handling form data, and managing item lists are all made possible with their help. Together with other JavaScript capabilities, arrays play a big role in building dynamic and adaptable websites.

Accessing and Modifying Array Elements

A key feature of JavaScript that allows developers to work with and edit array contents is the ability to access and modify array items. We will look at a number of approaches and strategies in this subtopic to get and change elements from a JavaScript array.

1. Finding Elements in an Array

To retrieve the value stored at a certain index, one must first access the array elements. Zero-index arrays in JavaScript designate the first element at index 0, the second at index 1, and so on. You can access array elements in several methods as follows:

Using the Index:

let fruits = ['apple', 'orange', 'banana', 'grape'];
console.log(fruits[0]); // Output: 'apple'
console.log(fruits[2]); // Output: 'banana'

Using Loop (E.g: 'forEach'):

fruits.forEach((fruit, index) => {
    console.log(`Element at index ${index}: ${fruit}`);
});

2. Altering Array Elements

The ability to modify items of an array after it has been generated is a feature of JavaScript arrays. Typical ways to change elements in an array are as follows:

Using the Index:

let fruits = ['apple', 'orange', 'banana', 'grape'];
fruits[1] = 'pear'; // Modifying the element at index 1
console.log(fruits); // Output: ['apple', 'pear', 'banana', 'grape']

Using 'Splice()' :

fruits.splice(2, 1, 'kiwi'); // Removing 1 element at index 2 and adding 'kiwi'
console.log(fruits); // Output: ['apple', 'pear', 'kiwi', 'grape']

Using 'map()' :

let updatedFruits = fruits.map(fruit => (fruit === 'banana' ? 'pineapple' : fruit));
console.log(updatedFruits); // Output: ['apple', 'pear', 'kiwi', 'grape']

3. Locating an Element's Index

The indexOf() method can be used to determine the index of a certain element within an array:

let index = fruits.indexOf('kiwi');
console.log(index); // Output: 2

4. Examining the Inclusion of Array

The includes() method can be used to find out if an array contains a specific element:

let hasBanana = fruits.includes ('banana');
console.log (hasBanana); // Output: false

Array Iteration and Transformation

JavaScript developers can effectively process and manipulate arrays with the help of strong techniques like array iteration and transformation. Iteration is the process of going through each element in an array, whereas transformation is the act of changing an array's elements or building a new array from an existing one. We will examine the approaches and strategies for array transformation and iteration in this section.

1. Use the forEach() method

An easy and popular method for iterating over each element of an array is to utilise the forEach() method. As an argument, it receives a callback function, which is used for every entry in the array.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => {
  console.log(num * 2); // Transform: Multiply each element by 2
});

2. The map() technique

By applying a supplied function to each element of the current array, the map() method generates a new array. It does not change the original array; instead, it returns a changed array.

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

3. Use the filter() Method

A new array with just the elements that meet a certain condition is created using the filter() method. It is employed to include certain elements in the array that have been modified.

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

let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

4. Use the reduce() method

Values from an array can be combined into a single result using the reduce() method. Both an initial value and a callback function are required. The current element and an accumulator are sent to the callback function, and the outcome is carried over to the next iteration.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 15

5. for... of Loop

An older method for iterating over array elements is to use the for...of loop. Its syntax is less complicated than that of the conventional for loop.

let fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
  console.log(fruit.toUpperCase()); // Transform: Convert each element to uppercase
}

Sorting and Searching Arrays

When using arrays in JavaScript, common operations include sorting and searching. Building responsive and optimised applications requires effectively organising and retrieving data from arrays. We will examine several strategies and tactics for searching and sorting arrays in this section.

1. Array Sorting

JavaScript offers the sort() method to organise elements in arrays in either ascending or descending order. Sorting arrays is a fundamental activity. By default, the sort() method does a lexicographic (dictionary) sort and converts the elements of the array to strings.

Simple Sorting:

let fruits = ['apple', 'orange', 'banana', 'grape'];
fruits.sort();
console.log(fruits); // Output: ['apple', 'banana', 'grape', 'orange']

Numbers Sorting:

A unique comparison function can be offered for numerical sorting as well:

let numbers = [10, 5, 8, 2, 7];
numbers.sort((a, b) => a - b);

console.log(numbers); // Output: [2, 5, 7, 8, 10]

Descending Order Sorting of Numbers:

To arrange items in descending order, only switch the subtraction order within the comparison function.

let numbers = [10, 5, 8, 2, 7];
numbers.sort((a, b) => b - a);
console.log(numbers); // Output: [10, 8, 7, 5, 2]

Searching Arrays:

Locating an element's position is a key component of array searches. Methods for various search contexts are provided by JavaScript, such as indexOf(), find(), and includes().

IndexOf() usage: The indexOf() function yields the first index in the array where a specified element can be found. The function returns -1 if the element is absent.

let fruits = ['apple', 'orange', 'banana', 'grape'];
let bananaIndex = fruits.indexOf('banana');
console.log(bananaIndex); // Output: 2

Using 'find()' :

The first element in the array that satisfies a certain testing function is returned by the find() method when it is used.

let numbers = [10, 5, 8, 2, 7];
let found = numbers.find((num) => num > 5);
console.log(found); // Output: 10

Using 'includes()' :

The includes() function returns true or false depending on whether an array contains a given element.

let fruits = ['apple', 'orange', 'banana', 'grape'];
let hasBanana = fruits.includes('banana');
console.log(hasBanana); // Output: true

Binary Search (For Sorted Arrays):

Binary search is a more effective method of finding an element if the array has previously been sorted. But first, the array needs to be sorted.

let sortedNumbers = [2, 5, 7, 8, 10];
let target = 7;

function binarySearch(arr, target) {
  let low = 0;
  let high = arr.length - 1;

  while (low <= high) {
    let mid = Math.floor((low + high) / 2);
    if (arr[mid] === target) return mid;
    else if (arr[mid] < target) low = mid + 1;
    else high = mid - 1;
  }

  return -1;
}

console.log(binarySearch(sortedNumbers, target)); // Output: 2

Array Concatenation and Splitting:

Developers can combine arrays or divide them into smaller pieces with the help of crucial operations like array concatenation and splitting. Working with array data is made more flexible and controlled by these methods. This section will cover JavaScript methods and techniques for dividing and concatenating arrays.

1. Concatenation of arrays

Concatenating arrays is the process of joining elements from two or more arrays to form a single new array. For this, JavaScript has the concat() function.

Concatenating arrays: The concat() method joins elements of one array with those of other arrays or values to form a new array.

let fruits = ['apple', 'banana'];
let vegetables = ['carrot', 'broccoli'];

let combinedArray = fruits.concat(vegetables);
console.log(combinedArray);
// Output: ['apple', 'banana', 'carrot', 'broccoli']

For a succinct method of concatenating arrays, you may also utilise the spread operator (...):

let combinedArray = [...fruits, ...vegetables];
console.log(combinedArray);
// Output: ['apple', 'banana', 'carrot', 'broccoli']

2. Splitting an array

Using array splitting, you can extract particular sections or break a single array into smaller ones. For similar actions JavaScript offers functions like slice().

You can utilize the slice() function and create a new array that has only the piece of the original array that was extracted without changing the original one.

let fruits = ['apple', 'banana', 'orange', 'grape'];

let slicedArray = fruits.slice(1, 3); // Extract elements from index 1 to 2
console.log(slicedArray);
// Output: ['banana', 'orange']

Splice(): Splice() is a method that may be utilized to split and change arrays. It modifies an array's contents by adding new members, deleting or changing existing ones or both.

let fruits = ['apple', 'banana', 'orange', 'grape'];

let removedElements = fruits.splice(1, 2); // Remove elements from index 1 to 2
console.log(fruits);
// Output: ['apple', 'grape']
console.log(removedElements);
// Output: ['banana', 'orange']

Working with Multi-Dimensional Arrays:

Developers can represent and work with more intricate data structures in JavaScript by utilizing multi-dimensional arrays which are commonly referred to as arrays of arrays. Consider these arrays as nested structures, grids, or matrices. We will look at how multi-dimensional arrays are created, manipulated, and used in general in this section.

1. Building Arrays in More Than One Dimension

Through the use of array nesting, JavaScript facilitates the building of multi-dimensional arrays. Depending on how complex the data structure you wish to portray is, you can nest this as deeply as you like.

An illustration of a two-dimensional array is:

// Creating a 2D array (matrix)
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

An illustration of a three-dimensional array is:

// Creating a 3D array
let cube = [
  [
    [1, 2, 3],
    [4, 5, 6]
  ],
  [
    [7, 8, 9],
    [10, 11, 12]
  ]
];

2. Getting at Elements in Arrays with Multiple Dimensions

The indices for every nesting level must be specified in order to access elements in a multi-dimensional array.

How to Get to a 2D Array:

let value = matrix[1][2];
console.log(value); // Output: 6

How to Get to a 3D Array:

let value = cube[1][0][2];
console.log(value); // Output: 9

3. Looping Through Arrays That Are Multidimensional

Most of the time, nested loops are needed to iterate through multi-dimensional arrays in order to reach every nesting level.

Revisiting a Two-D Array:

for (let row = 0; row < matrix.length; row++) {
  for (let col = 0; col < matrix[row].length; col++) {
    console.log(matrix[row][col]);
  }
}

Revisiting a Three-D Array:

for (let x = 0; x < cube.length; x++) {
  for (let y = 0; y < cube[x].length; y++) {
    for (let z = 0; z < cube[x][y].length; z++) {
      console. log(cube [x] [y][z]);
    }
  }
}

4. Manipulating Arrays in Multiple Dimensions

Values can be changed, elements can be added or removed, and operations at various nesting levels can be carried out on multi-dimensional arrays.

Changing the Elements:

matrix[0][1] = 99;
console.log(matrix);
// Output: [[1, 99, 3], [4, 5, 6], [7, 8, 9]]

Adding a new row to the array:

matrix.push([10, 11, 12]);
console.log(matrix);
// Output: [[1, 99, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]]

Removing a column in the array:

for (let i = 0; i < matrix.length; i++) {
  matrix[i].pop();
}
console.log(matrix);
// Output: [[1, 99], [4, 5], [7, 8], [10, 11]]

Working with multi-dimensional arrays offers a potent method for organising and working with more complicated data. Being able to construct, read, iterate and modify multi-dimensional arrays is crucial for managing a variety of data structures in your applications regardless of whether you are expressing matrices, grids or nested structures. When selecting which multi-dimensional arrays to utilize, take into account the type of data you have and the operations you must execute.

Array Methods for Stack and Queue Operations:

Basic stack and queue operations in JavaScript can be simulated by using array functions. In data structures, stacks and queues are basic structures that function according to the Last In, First Out (LIFO) or First In, First Out (FIFO) principles. Arrays can be used to simulate the behaviour of stacks and queues even though JavaScript does not include built-in classes for them. Stack and queue operations can be performed using array methods, as we will see below.

1. Stacking Processes

Push() adds an element to the end of an array, while pop() removes the last element. These are the methods to use.

let stack = [];

stack.push(1); // push operation
stack.push(2);
stack.push(3);

console.log(stack.pop()); // pop operation: removes and returns 3
console.log(stack);
// Output: [1, 2]

2. Operations with Queues

By using push() and shift(), you can add an element to the end of an array and remove the initial element from it respectively.

let queue = [];

queue.push(1); // enqueue operation
queue.push(2);
queue.push(3);

console.log(queue.shift()); // dequeue operation: removes and returns 1
console.log(queue);
// Output: [2, 3]

3. Other Methods of Queue Management

With pop() and unshift():

It is possible to simulate queue activities by using unshift() to add an element to the beginning of an array and pop() to remove the last member, however these operations are less popular.

let queueAlternative = [];

queueAlternative.unshift(1); // enqueue operation
queueAlternative.unshift(2);
queueAlternative.unshift(3);

console.log(queueAlternative.pop()); // dequeue operation: removes and returns 1
console.log(queueAlternative);
// Output: [3, 2]

4. Checking the Queue or Empty Stack.

By looking at the length property of a stack or queue, you can determine whether or not it is empty.

console.log(stack.length === 0); // Check if stack is empty
console.log(queue.length === 0); // Check if queue is empty

5. Peeking:

Using array indexing: You can use array indexing to get a peek at the top of the queue or the top of the stack.

console.log(stack[stack.length - 1]); // Peek at the top of the stack
console.log(queue[0]); // Peek at the front of the queue

An easy way to replicate fundamental stack and queue operations in JavaScript is to use array methods. Basic stack and queue functionality can be implemented by developers using ordinary JavaScript arrays and push(), pop(), shift(), and unshift(). When a lightweight implementation of queues or stacks is required in your code, knowing these strategies is helpful.

Handling Sparse Arrays:

In JavaScript, arrays with gaps or undefined elements are referred to as sparse arrays. Sparse arrays skip some indices, in contrast to dense arrays, which include every index between the first and last entry. This may occur when an element is removed or when gaps are purposefully added to the array. JavaScript's handling of undefined and empty slots must be understood in order to handle sparse arrays and any potential issues that may arise.

How to Make Sparse Arrays

It is possible to make sparse arrays accidentally or on purpose. On purpose, by putting undefined values at specific indices:

let sparseArray = [];
sparseArray[2] = 'apple';
sparseArray[5] = 'banana';

console.log(sparseArray);
// Output: [ , , 'apple', , , 'banana']

Getting to Know Sparse Array Elements

In a sparse array, accessing undefined entries yields undefined. It is imperative to differentiate between undefined values that are deliberately assigned and empty slots.

console.log(sparseArray[0]); // Output: undefined (empty slot)
console.log(sparseArray[2]); // Output: 'apple'
console.log(sparseArray[3]); // Output: undefined (never assigned)

Finding Sparse Elements in an Array

The in operator and the hasOwnProperty() method can be used to determine whether an element in an array is explicitly assigned or undefined as a result of an empty slot:

console.log(2 in sparseArray); // Output: true
console.log(0 in sparseArray); // Output: false
console.log(sparseArray.hasOwnProperty(0)); // Output: false

Next TopicJavaScript ASCII Value

← prev next →