DEV Community

Whoissosick
Whoissosick

Posted on • Edited on

Working with arrays [JS]

Function methods

.pop()

The pop() method removes the last element from an array and returns that element.

let fruits = ["apple", "banana", "orange"];
let lastFruit = fruits.pop();
console.log(fruits); // ["apple", "banana"]
console.log(lastFruit); // "orange"
Enter fullscreen mode Exit fullscreen mode

.unshift()

Adds one or more elements to the beginning of an array and returns its new length. It works similarly to push().

let numbers = [2, 3];
let newLength = numbers.unshift(1);
console.log(numbers); // [1, 2, 3]
console.log(newLength); // 3
Enter fullscreen mode Exit fullscreen mode

.shift()

Removes the first element from an array and returns that element. It's similar to pop().

let colors = ["red", "green", "blue"];
let firstColor = colors.shift();
console.log(colors); // ["green", "blue"]
console.log(firstColor); // "red"
Enter fullscreen mode Exit fullscreen mode

One-Dimensional and Two-Dimensional Arrays

A one-dimensional array, often called an array, is like a single row of boxes.

Two-dimensional array is essentially an array of arrays.

let chessboard = [
    ["R", "N", "B", "Q", "K", "B", "N", "R"],
    ["P", "P", "P", "P", "P", "P", "P", "P"],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    ["p", "p", "p", "p", "p", "p", "p", "p"],
    ["r", "n", "b", "q", "k", "b", "n", "r"]
];

console.log(chessboard[0][3]); // Outputs: "Q"
Enter fullscreen mode Exit fullscreen mode

Array Destructuring

let fruits = ["apple", "banana", "orange"];

let [first, second, third] = fruits;

console.log(first);  // "apple"
console.log(second); // "banana"
console.log(third);  // "orange"
Enter fullscreen mode Exit fullscreen mode

Array destructuring also allows you to skip elements you're not interested in by using commas. For instance:

let colors = ["red", "green", "blue", "yellow"];
let [firstColor, , thirdColor] = colors;

console.log(firstColor); // Output: "red"
console.log(thirdColor); // Output: "blue"
Enter fullscreen mode Exit fullscreen mode

Another powerful feature of array destructuring is the ability to use default values.

let numbers = [1, 2];
let [a, b, c = 3] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
Enter fullscreen mode Exit fullscreen mode

Now, let's discuss the rest syntax, denoted by three dots (...). It allows you to capture the remaining elements of an array that haven’t been destructured into a new array.

The rest syntax must be the last element in the destructuring pattern.

let fruits = ["apple", "banana", "orange", "mango", "kiwi"];
let [first, second, ...rest] = fruits;

console.log(first);  // "apple"
console.log(second); // "banana"
console.log(rest);   // ["orange", "mango", "kiwi"]
Enter fullscreen mode Exit fullscreen mode

How Can You Use String and Array Methods to Reverse a String?

Steps

  • Splitting the string into an array of characters.
  • Reversing the array.
  • Joining the characters back into a string.

The first step in reversing a string is to convert it into an array of individual characters. We can do this using the split() method.
*An empty string (""), which splits the string into individual characters.
*A single space (" "), which splits the string wherever spaces occur.
*A dash ("-"), which splits the string at each dash.

let str = "hello";
let charArray = str.split("");
console.log(charArray); // ["h", "e", "l", "l", "o"]
Enter fullscreen mode Exit fullscreen mode

The reverse() method is an array method that reverses an array in place. This means it modifies the original array rather than creating a new one.

let charArray = ["h", "e", "l", "l", "o"];
charArray.reverse();
console.log(charArray); // ["o", "l", "l", "e", "h"]
Enter fullscreen mode Exit fullscreen mode

We can accomplish this using the join() method. The join() method creates and returns a new string by concatenating all of the elements in an array, separated by a specified separator string.

let reversedArray = ["o", "l", "l", "e", "h"];
let reversedString = reversedArray.join("");
console.log(reversedString); // "olleh"
Enter fullscreen mode Exit fullscreen mode

Remember that strings in JavaScript are immutable, which means you can't directly reverse a string by modifying it. That's why we need to convert it to an array, reverse the array, and then convert it back to a string. This combination of string and array methods provides a powerful and flexible way to manipulate strings in JavaScript.

let str = "coding";
let reversed = str.split("").reverse().join("");
console.log(reversed);
Enter fullscreen mode Exit fullscreen mode

How Do You Get the Index for an Element in an Array Using the indexOf Method?

let fruits = ["apple", "banana", "orange", "banana"];
let index = fruits.indexOf("banana");
console.log(index); // 1
Enter fullscreen mode Exit fullscreen mode

If the element you're searching for is not found in the array, indexOf() returns -1.

If you want to start looking for an item after a specific index number, then you can pass a second argument like in this example:

let colors = ["red", "green", "blue", "yellow", "green"];
let index = colors.indexOf("green", 3);
console.log(index); // 4
Enter fullscreen mode Exit fullscreen mode

In this example, the search does not start from the start of an array, rather it starts from the index number 3 which is yellow and gets the output of 4.

How Do You Add and Remove Elements from the Middle of an Array?

The return value for the splice() method will be an array of the items removed from the array. If nothing was removed, then an empty array will be returned. This method will mutate the original array, modifying it in place rather than creating a new array.

Top comments (0)