Modifying arrays in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this code modifying an array with splice?

Consider the following JavaScript code that modifies an array using splice. What will be logged to the console?

Javascript

const arr = [10, 20, 30, 40, 50];
arr.splice(2, 2, 25, 35);
console.log(arr);

A [10, 20, 30, 40, 50]

B [25, 35, 50]

C [10, 20, 25, 35, 40, 50]

D [10, 20, 25, 35, 50]

💡 Hint

Remember that splice(start, deleteCount, items...) removes deleteCount items starting at start, then inserts items.

The splice call removes 2 elements starting at index 2 (30 and 40), then inserts 25 and 35 at that position. The resulting array is [10, 20, 25, 35, 50].

❓ Predict Output

intermediate

What is the output after using push and pop on an array?

Look at this code that modifies an array with push and pop. What will be the final output?

Javascript

const fruits = ['apple', 'banana'];
fruits.push('cherry');
const popped = fruits.pop();
console.log(fruits, popped);

A ['apple', 'banana'] 'cherry'

B ['apple', 'banana', 'cherry'] 'banana'

C ['apple', 'banana'] 'banana'

D ['apple', 'banana', 'cherry'] 'cherry'

💡 Hint

push adds an item to the end, pop removes the last item and returns it.

After pushing 'cherry', the array is ['apple', 'banana', 'cherry']. Then pop removes 'cherry' and returns it. The array is back to ['apple', 'banana'].

🔧 Debug

advanced

Why does this code throw an error when modifying an array?

This code tries to modify an array but throws an error. What is the cause?

Javascript

const arr = Object.freeze([1, 2, 3]);
arr[0] = 10;
console.log(arr);

A SyntaxError: Unexpected token '='

B TypeError: Cannot assign to read only property '0' of object '[object Array]'

C ReferenceError: arr is not defined

D [10, 2, 3]

💡 Hint

Object.freeze makes an object immutable.

The array is frozen, so trying to assign a new value to an element causes a TypeError.

❓ Predict Output

advanced

What is the output after using map and modifying the original array?

What will be logged after running this code that modifies an array inside a map callback?

Javascript

const nums = [1, 2, 3];
const result = nums.map((num, i, arr) => {
  arr[i] = num * 2;
  return num + 1;
});
console.log(result, nums);

A [2, 3, 4] [2, 4, 6]

B [2, 3, 4] [1, 2, 3]

C [1, 2, 3] [2, 4, 6]

D [1, 2, 3] [1, 2, 3]

💡 Hint

The map callback modifies the original array while returning a new array.

The map returns each original number plus 1, so result is [2,3,4]. Meanwhile, the original array elements are doubled inside the callback, so nums becomes [2,4,6].

🧠 Conceptual

expert

Which option correctly removes all occurrences of a value from an array?

You want to remove all occurrences of the number 3 from an array. Which code snippet correctly does this without mutating the original array?

A arr = arr.map(x => x === 3 ? null : x);

B arr.splice(arr.indexOf(3), 1);

C const filtered = arr.filter(x => x !== 3);

D arr.pop(3);

💡 Hint

Filter creates a new array with only elements that pass the test.

Option C returns a new array excluding all 3s without changing the original. Option C mutates the array and removes only the first 3. Option C replaces 3s with null but keeps them. Option C is invalid because pop does not take arguments.

Practice

1. Which method adds one or more elements to the end of a JavaScript array?

easy

A. push()

B. pop()

C. shift()

D. unshift()

Solution

1. Step 1: Understand array methods for adding elements

   push() adds elements to the end, unshift() adds to the start.

2. Step 2: Identify the method that adds to the end

   push() is the method that adds elements at the end of the array.

3. Final Answer:

   push() -> Option A

4. Quick Check:

   Adding at end = push() [OK]

Hint: push() adds at end, unshift() adds at start [OK]

Common Mistakes:

• Confusing push() with pop()
• Using shift() to add elements
• Thinking unshift() adds at end

2. Which of the following is the correct syntax to remove the first element from an array arr?

easy

A. arr.pop()

B. arr.shift()

C. arr.unshift()

D. arr.push()

Solution

1. Step 1: Recall methods that remove elements

   pop() removes from end, shift() removes from start.

2. Step 2: Identify method to remove first element

   shift() removes the first element of the array.

3. Final Answer:

   arr.shift() -> Option B

4. Quick Check:

   Remove first element = shift() [OK]

Hint: shift() removes first, pop() removes last [OK]

Common Mistakes:

• Using pop() to remove first element
• Using unshift() which adds elements
• Confusing push() with removal methods

3. What will be the output of the following code?

let arr = [1, 2, 3, 4];
arr.splice(1, 2, 8, 9);
console.log(arr);

medium

A. [1, 8, 9, 4]

B. [1, 2, 3, 4]

C. [8, 9, 4]

D. [1, 8, 9]

Solution

1. Step 1: Understand splice parameters

   splice(1, 2, 8, 9) means start at index 1, remove 2 elements, then insert 8 and 9.

2. Step 2: Apply splice on array

   Original array: [1, 2, 3, 4]. Remove elements at index 1 and 2 (2 and 3), then insert 8 and 9 at index 1. Result: [1, 8, 9, 4].

3. Final Answer:

   [1, 8, 9, 4] -> Option A

4. Quick Check:

   splice removes and inserts = [1, 8, 9, 4] [OK]

Hint: splice(start, deleteCount, items...) edits array in place [OK]

Common Mistakes:

• Confusing splice with slice
• Not removing correct elements
• Forgetting splice inserts new items

4. The following code tries to remove the element '3' from the array but does not work as expected. What is the error?

let arr = [1, 2, 3, 4];
arr.splice(3, 1);
console.log(arr);

medium

A. The index 3 is out of range for removal

B. The splice method is used incorrectly; it should be pop()

C. The index 3 removes the wrong element, should be 2

D. splice cannot remove elements from arrays

Solution

1. Step 1: Identify the element to remove and its index

   The element '3' is at index 2 in the array [1, 2, 3, 4].

2. Step 2: Check the splice call

   The code calls arr.splice(3, 1), which removes the element at index 3 (which is 4), not 3.

3. Final Answer:

   The index 3 removes the wrong element, should be 2 -> Option C

4. Quick Check:

   Remove '3' at index 2, not 3 [OK]

Hint: Check array indexes carefully before splice [OK]

Common Mistakes:

• Using wrong index for splice
• Confusing pop() with splice()
• Thinking splice can't remove elements

5. You have an array arr = [5, 10, 15, 20]. You want to replace the middle two elements with 12 and 18 using a single method call. Which code correctly does this?

hard

A. arr.splice(2, 2, 12, 18);

B. arr.splice(0, 2, 12, 18);

C. arr.splice(1, 1, 12, 18);

D. arr.splice(1, 2, 12, 18);

Solution

1. Step 1: Identify indexes of middle two elements

   Array is [5, 10, 15, 20]. Middle two elements are at indexes 1 and 2 (10 and 15).

2. Step 2: Use splice to replace these elements

   Call arr.splice(1, 2, 12, 18) to start at index 1, remove 2 elements, and insert 12 and 18.

3. Final Answer:

   arr.splice(1, 2, 12, 18); -> Option D

4. Quick Check:

   Replace middle two with splice(1,2,12,18) [OK]

Hint: splice(startIndex, countToRemove, ...newItems) replaces items [OK]

Common Mistakes:

• Wrong start index
• Removing too few or too many elements
• Using splice with wrong parameters