Unlocking the Power of JavaScript Arrays Coding Exercise JavaScript Arrays

by

LEARN JAVASCRIPT

🌐 Unlocking the Power of JavaScript Arrays! 🚀💻

Exercise JavaScript Arrays!

Below is part of a series of engaging and practical coding exercises centered around JavaScript arrays. Whether you’re starting your journey in web development or are a seasoned coder, these exercises are tailored to enhance your array manipulation skills in JavaScript. 🖥️👨‍💻👩‍💻

We’re diving deep into:

  • Array Initialization
  • Element Access
  • Element Modification
  • Looping Magic
  • Element Addition
  • Element Removal
  • Index Discovery
  • Precise Element Deletion
  • Array Cloning
  • Arrays Unification

Each exercise is coupled with a solution and a thorough explanation to reinforce your learning and understanding. 📚💡

Exercise: Initialize an Array

Problem: Create an array named colors containing three colors.

Solution:

let colors = [‘red’, ‘green’, ‘blue’];

Explanation: This exercise demonstrates the basic initialization of an array in JavaScript.

Exercise: Accessing Array Elements

Problem: Access the second element in the colors array and log it to the console.

Solution:

console.log(colors[1]); // Output: green

Explanation: Array indices start at 0. Thus, colors[1] accesses the second element.

Exercise: Modifying Array Elements

Problem: Change the third element of the colors array to ‘yellow’.

Solution:

colors[2] = ‘yellow’;

console.log(colors); // Output: [‘red’, ‘green’, ‘yellow’]

Explanation: Arrays are mutable, so you can change their elements using indices.

Exercise: Looping Through an Array

Problem: Use a loop to print each element of the colors array.

Solution:

for (let i = 0; i < colors.length; i++) {

  console.log(colors[i]);

}

Explanation: The for loop iterates over the array, accessing each element by its index.

Exercise: Adding Elements to an Array

Problem: Add a new color, ‘purple’, to the end of the colors array.

Solution:

colors.push(‘purple’);

console.log(colors); // Output: [‘red’, ‘green’, ‘yellow’, ‘purple’]

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

Exercise: Removing the Last Element of an Array

Problem: Remove the last element of the colors array.

Solution:

colors.pop();

console.log(colors); // Output: [‘red’, ‘green’, ‘yellow’]

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

Exercise: Finding the Index of an Element

Problem: Find the index of ‘green’ in the colors array.

Solution:

let index = colors.indexOf(‘green’);

console.log(index); // Output: 1

Explanation: indexOf() returns the first index at which a given element can be found, or -1 if it is not present.

Exercise: Removing an Element by Index

Problem: Remove the element ‘green’ from the colors array.

Solution:

index = colors.indexOf(‘green’);

if (index > -1) {

  colors.splice(index, 1);

}

console.log(colors); // Output: [‘red’, ‘yellow’]

Explanation: splice() changes the contents of an array by removing or replacing existing elements.

Exercise: Copying an Array

Problem: Create a shallow copy of the colors array named colorsCopy.

Solution:

let colorsCopy = colors.slice();

console.log(colorsCopy); // Output: [‘red’, ‘yellow’]

Explanation: slice() returns a shallow copy of a portion of an array into a new array object.

Exercise: Merging Arrays

Problem: Merge two arrays, colors and moreColors into one array.

Solution:

let moreColors = [‘orange’, ‘pink’];

let mergedColors = colors.concat(moreColors);

console.log(mergedColors); // Output: [‘red’, ‘yellow’, ‘orange’, ‘pink’]

Explanation: concat() is used to merge two or more arrays by returning a new array.

Exercise-JavaScript-ArraysDownload