Different Ways to Manipulate Array Elements in JavaScript

In JavaScript, arrays are essential data structures that store multiple values in a single variable.

You can access, modify, add, and remove elements in arrays. Let's explore how to perform these tasks effectively.

---

Accessing and Modifying Array Elements

You can access array elements using their index. For example,

const fruits = ["apple", "banana", "cherry"];

// Access first element
console.log(fruits[0]);    // Output: apple

// Access and modify second element
fruits[1] = "orange";
console.log(fruits);    // Output: [ 'apple', 'orange', 'cherry' ]

Note: JavaScript arrays are zero-indexed, meaning the first element is at index 0.

---

Adding or Removing the Last Element

The push() method adds one or more elements to the end of an array.

const fruits = ["apple", "banana", "cherry"];

// Add one element at the end
fruits.push("date");

console.log(fruits);    // Output: [ 'apple', 'banana', 'cherry', 'date' ]

// Add multiple elements at the end
fruits.push("avocado", "apricot", "orange");

console.log(fruits);

Output

[ 'apple', 'banana', 'cherry', 'date', 'avocado', 'apricot', 'orange' ]

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

const fruits = ["apple", "banana", "cherry"];

fruits.pop();

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

---

Adding or Removing the First Element

The unshift() method adds one or more elements to the beginning of an array.

const fruits = ["apple", "banana", "cherry"];

// Add one element at the beginning
fruits.unshift("apricot");

console.log(fruits);    // Output: [ 'apricot', 'apple', 'banana', 'cherry' ]

// Add multiple elements at the beginning
fruits.unshift("avocado", "date", "orange");

console.log(fruits);

// Output: [ 'avocado', date, 'orange', 'apricot', 'apple', 'banana', 'cherry' ]

The shift() method removes the first element of an array and returns that element.

const fruits = ["apple", "banana", "cherry"];

fruits.shift();

console.log(fruits);    // Output: [ 'banana', 'cherry' ]

---

Adding or Removing Specific Elements

The splice() method removes elements from a specific position in the array.

const fruits = ["apricot", "apple", "orange", "banana", "cherry", "avocado"];

// Remove 3 element at index 2
fruits.splice(2, 3);

console.log(fruits);    // Output: [ 'apricot', 'apple', 'avocado' ]

Here, splice(2, 3) takes two arguments:

• 2: The index where the operation executes.
• 3: The number of elements to remove.

You can also use splice() to add elements at a specific position without removing any elements.

const fruits = ["apple", "banana", "cherry"];

// Add avocado at index 1
fruits.splice(1, 0, "avocado");

console.log(fruits);    // Output: [ 'apple', 'avocado', 'banana', 'cherry' ]

Here, splice(1, 0, "avocado") takes three arguments:

• 1: The index where the operation executes.
• 0: The number of elements to remove (none in this case).
• "avocado": The element to add.

---

Takeaway:

• Use index to access or modify array elements.
• Use push() and pop() to add or remove elements at the end of an array.
• Use unshift() and shift() to add or remove elements at the beginning of an array.
• Use splice() to add or remove elements at any position in an array.