The Great SoluTion 🚀

Posted on Oct 1

Mastering Arrays in JavaScript: From Basics to Pro

#javascript #datastructures #dsa #beginners

Mastering Arrays in JavaScript: Your Beginner’s Guide to Organizing Data Like a Pro!

Imagine you're creating a playlist on Spotify. You add your favorite songs one by one, and they line up neatly in a list. Now, you can easily access any song, shuffle them, or even remove a song you're tired of. This is exactly how arrays work in JavaScript!

Another example is YouTube’s recommended videos list. Every time you refresh the page, a new set of video recommendations appears. These lists of songs, videos, or any kind of information are stored as arrays, making it easy for the system to access, update, or display items efficiently.

Just like how Spotify organizes songs in a playlist or YouTube arranges your recommended videos, arrays in JavaScript allow us to store multiple items in a single, ordered list. They're like the Swiss Army knife of data structures – versatile, powerful, and essential for any developer to master if you must master data structures and algorithms which is why it is the first data structure we will be learning.

In this post, we'll embark on an exciting journey through the world of JavaScript arrays. Whether you're a complete beginner or looking to brush up on your skills, this guide will equip you with the knowledge to work with arrays confidently.

Course Outline

What is an array?
Creating arrays in JavaScript
Accessing and modifying array elements
Common array methods (push, pop, shift, unshift, etc.)
Iterating through arrays (for, while, forEach loops)
Nested arrays (multi-dimensional arrays)
Best practices for working with arrays
Sample leetcode problems to practice
- Leetcode 1: Two Sum
- Leetcode 53: Maximum Subarray
Conclusion
References

I hope you are ready to learn something new today? Without any further ado, let's dive in! 🤿

What is an array?

An array in JavaScript is a special type of object that stores a collection of elements. These elements can be of any data type – numbers, strings, objects, or even other arrays. The key feature of an array is that it maintains the order of its elements and they are mutable.

Here's a visual representation of an array:

In this visualization, we have an array of fruits. Each fruit is an element in the array, and each element has a corresponding index, starting from 0.

Note: Arrays in JavaScript (and most programming languages) are zero-indexed, meaning the first element is at index 0, the second at index 1, and so on.

Creating arrays in JavaScript

There are several ways to create an array in JavaScript:

Method	Code Sample	Pro	Con
Array literal notation	`let fruits = ["Apple", "Banana", "Orange", "Mango", "Kiwi"];`	Simple and concise syntax	None
Array constructor	`let fruits = new Array("Apple", "Banana", "Orange", "Mango", "Kiwi");`	Can be useful when dynamically creating arrays	Slightly more verbose than literal notation

Note: The array literal notation (using square brackets) is more commonly used and generally preferred.

Accessing and modifying array elements

You can access array elements using their index. Remember, array indices start at 0:

// Accessing elements
let fruits = ["Apple", "Banana", "Orange", "Mango", "Kiwi"];

console.log(fruits[0]); // Output: 'Apple'
console.log(fruits[2]); // Output: 'Orange'

// You can also use negative indices to access elements from the end of the array:
console.log(fruits[-1]); // Output: 'Kiwi'
console.log(fruits[-2]); // Output: 'Mango'

To modify an element, you can assign a new value to a specific index:

fruits[1] = "Grape";
console.log(fruits); // Output: ['Apple', 'Grape', 'Orange', 'Mango', 'Kiwi']

Common array methods

JavaScript provides several built-in methods to manipulate arrays:

Method	Description
`push()`	Adds one or more elements to the end of an array
`pop()`	Removes the last element from an array
`map()`	Creates a new array with the results of calling a provided function on every element
`filter()`	Creates a new array with all elements that pass the test implemented by the provided function
`forEach()`	Executes a provided function once for each array element
`reduce()`	Executes a reducer function on each element of the array, resulting in a single output value
`slice()`	Returns a shallow copy of a portion of an array
`indexOf()`	Returns the first index at which a given element can be found in the array
`find()`	Returns the value of the first element in the array that satisfies the provided testing function
`includes()`	Determines whether an array includes a certain value among its entries
`sort()`	Sorts the elements of an array in place and returns the sorted array
`join()`	Joins all elements of an array into a string

Here are some examples:

// Some of the methods covered above
let fruits = ["Apple", "Banana", "Orange"];

// push()
fruits.push("Mango");
console.log(fruits); // Output: ['Apple', 'Banana', 'Orange', 'Mango']

// pop()
let lastFruit = fruits.pop();
console.log(lastFruit); // Output: 'Mango'
console.log(fruits); // Output: ['Apple', 'Banana', 'Orange']

// map()
let upperCaseFruits = fruits.map((fruit) => fruit.toUpperCase());
console.log(upperCaseFruits); // Output: ['APPLE', 'BANANA', 'ORANGE']

// filter()
let longFruits = fruits.filter((fruit) => fruit.length > 5);
console.log(longFruits); // Output: ['Banana', 'Orange']

// forEach()
fruits.forEach((fruit) => console.log(fruit));
// Output:
// Apple
// Banana
// Orange

// reduce()
let totalLength = fruits.reduce((sum, fruit) => sum + fruit.length, 0);
console.log(totalLength); // Output: 16

// slice()
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // Output: ['Banana', 'Orange']

// indexOf()
let bananaIndex = fruits.indexOf("Banana");
console.log(bananaIndex); // Output: 1

// find()
let foundFruit = fruits.find((fruit) => fruit.startsWith("A"));
console.log(foundFruit); // Output: 'Apple'

// includes()
let hasMango = fruits.includes("Mango");
console.log(hasMango); // Output: false

// sort()
fruits.sort();
console.log(fruits); // Output: ['Apple', 'Banana', 'Orange']

// join()
let fruitString = fruits.join(", ");
console.log(fruitString); // Output: 'Apple, Banana, Orange'

Iterating through arrays

There are several ways to iterate through an array in JavaScript:

for loop:

   let fruits = ["Apple", "Banana", "Orange"];
   for (let i = 0; i < fruits.length; i++) {
     console.log(fruits[i]);
   }

forEach method:

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

for...of loop (ES6+):

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

Nested arrays (multi-dimensional arrays)

Arrays can contain other arrays, creating multi-dimensional arrays just like in the image below which is a 3x3 matrix as shown by the code that follows:

This is very common in data structures and algorithms and you will see it a lot. It is useful for representing grids, matrices, and other complex data structures.

Working with multi-dimensional arrays involves understanding how to access and manipulate nested elements. Here's how you can work with them:

Accessing elements:
To access an element in a multi-dimensional array, you use multiple square brackets, one for each dimension. For example, matrix[1][2] accesses the element in the second row, third column.
Iterating through multi-dimensional arrays:
You can use nested loops to iterate through all elements. For example:

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

Modifying elements:
You can modify elements using the same bracket notation used for accessing. For example, matrix[0][0] = 10 changes the value of the first element in the first row.
Adding or removing rows/columns:
You can use array methods like push(), pop(), unshift(), or shift() on the outer array to add or remove entire rows. To add or remove columns, you'll need to iterate through each row and modify it individually.

Remember that multi-dimensional arrays can have more than two dimensions, and the principles for working with them remain the same, just with additional levels of nesting.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

console.log(matrix[1][1]); // Output: 5

Best practices for working with arrays

Use const for arrays that won't be reassigned.
Use array methods instead of loops when possible for better readability.
Be cautious with splice() as it modifies the original array.
Use Array.isArray() to check if a variable is an array.
Use spread operator (...) for copying arrays.

Sample leetcode problems to practice

Learning is one thing but applying it is another. Let's solve 2 leetcodes problems (Leetcode 1: two sum and Leetcode 53: maximum subarray) to further our understanding of arrays and how they work.

Leetcode 1: Two Sum

Problem:
Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order.

Example 1:
Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].

Example 2:
Input: nums = [3,2,4], target = 6
Output: [1,2]

Solution:

This is a very simple problem to solve. To solve this problem, we will use a hash map (i.e javascript object) to store the indices of the numbers as we iterate through the array. This allows us to check if the complement of the current number (i.e., target - nums[i]) exists in the map. If it does, we return the indices. If not, we add the current number and its index to the map.

// Leetcode 1: Two Sum in JavaScript

function twoSum(nums, target) {
  // Object to store numbers and their indices (hash map)
  const numIndices = {};

  // Iterate through the array
  for (let i = 0; i < nums.length; i++) {
    const num = nums[i];
    // Calculate the complement (number needed to reach the target)
    const complement = target - num;

    // Check if the complement exists in our numIndices object
    if (numIndices.hasOwnProperty(complement)) {
      // If found, return the indices of the complement and current number
      return [numIndices[complement], i];
    }

    // If not found, add the current number and its index to numIndices
    numIndices[num] = i;
  }

  // If no solution is found, return an empty array
  return [];
}

// Example usage:
const nums: number[] = [2, 7, 11, 15];
const target: number = 9;
console.log(twoSum(nums, target)); // Output: [0, 1]

Leetcode 53: Maximum Subarray

Problem:
Given an integer array nums, find the subarray with the largest sum and return its sum.

Note: A subarray is a contiguous non-empty sequence of elements within an array.

Example 1:
Input: nums = [-2,1,-3,4,-1,2,1,-5,4]
Output: 6
Explanation: The subarray [4,-1,2,1] has the largest sum 6.

Example 2:
Input: nums = [1]
Output: 1
Explanation: The subarray [1] has the largest sum 1.

Solution:
This problem can be solved using a simple brute-force approach. We can iterate through the array and calculate the sum of all subarrays starting from each index. However, this approach is not efficient for large arrays.

// Leetcode 53: Maximum Subarray || Brute-Force Approach

function maxSubArray(nums) {
  // Initialize maxSum with the first element of the array
  let maxSum = nums[0];

  // Outer loop: iterate through each element as a starting point
  for (let i = 0; i < nums.length; i++) {
    // Initialize currentSum for each subarray
    let currentSum = 0;
    // Inner loop: calculate sum of subarrays starting from index i
    for (let j = i; j < nums.length; j++) {
      // Add current element to the subarray sum
      currentSum += nums[j];
      // Update maxSum if currentSum is greater
      maxSum = Math.max(maxSum, currentSum);
    }
  }

  // Return the maximum subarray sum found
  return maxSum;
}

// Example usage:
const nums = [-2, 1, -3, 4, -1, 2, 1, -5, 4];
console.log(maxSubArray(nums)); // Output: 6

While the brute force approach works, it is not efficient for large arrays. Here is what it looks like when you try to run it on an array of 10,000 elements:

A more efficient approach is to use Kadane's algorithm. This algorithm maintains a running sum and updates the maximum sum whenever the current sum exceeds the maximum sum.

Kadane's algorithm is a popular algorithm for finding the maximum sum of a contiguous subarray in an array of integers. It runs in linear time, making it very efficient for large arrays.

Here's the implementation of Kadane's algorithm:

// Leetcode 53: Maximum Subarray || Kadane's Algorithm Approach

function maxSubArray(nums) {
  // Initialize maxSum and currentSum with the first element
  let maxSum = nums[0];
  let currentSum = nums[0];

  // Iterate through the array starting from the second element
  for (let i = 1; i < nums.length; i++) {
    // Update currentSum: either start a new subarray or extend the existing one
    currentSum = Math.max(nums[i], currentSum + nums[i]);
    // Update maxSum if currentSum is greater
    maxSum = Math.max(maxSum, currentSum);
  }

  // Return the maximum subarray sum
  return maxSum;
}

// Example usage:
const nums = [-2, 1, -3, 4, -1, 2, 1, -5, 4];
console.log(maxSubArray(nums)); // Output: 6

Conclusion

Arrays are fundamental to JavaScript programming. They offer a versatile way to store and manipulate collections of data. By mastering arrays, you'll be well-equipped to tackle a wide range of programming challenges.

Remember, practice is key! Try out different array methods, solve coding problems, and experiment with arrays in your own projects. The more you work with arrays, the more comfortable and proficient you'll become.

You can find the code for this article here. Additionally, you can find the solutions to the LeetCode problems discussed above here.

References

Stay Updated and Connected

To ensure you don't miss any part of this series and to connect with me for more in-depth discussions on Software Development (Web, Server, Mobile or Scraping / Automation), data structures and algorithms, and other exciting tech topics, follow me on:

Stay tuned and happy coding 👨‍💻🚀

DEV Community