Modifying arrays in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an element to the end of the array.

Javascript

const fruits = ['apple', 'banana'];
fruits.[1]('orange');
console.log(fruits);

Drag options to blanks, or click blank then click option'

Aunshift

Bpop

Cpush

Dshift

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop instead of push removes the last item.

Using shift or unshift changes the start of the array.

The push method adds an element to the end of an array.

2fill in blank

medium

Complete the code to remove the first element from the array.

Javascript

const numbers = [10, 20, 30];
numbers.[1]();
console.log(numbers);

Drag options to blanks, or click blank then click option'

Ashift

Bpush

Cpop

Dunshift

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop removes the last element, not the first.

Using push or unshift adds elements instead of removing.

The shift method removes the first element from an array.

3fill in blank

hard

Fix the error in the code to replace the second element with 'grape'.

Javascript

const fruits = ['apple', 'banana', 'cherry'];
fruits[[1]] = 'grape';
console.log(fruits);

Drag options to blanks, or click blank then click option'

A'2'

B2

C'1'

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using index 2 changes the third element, not the second.

Using string indexes causes errors.

Array indexes start at 0, so the second element is at index 1.

4fill in blank

hard

Fill both blanks to create a new array with squares of even numbers only.

Javascript

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.filter(n => n [1] 2 === 0).map(n => n [2] 2);
console.log(squares);

Drag options to blanks, or click blank then click option'

A%

B**

C===

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' instead of '**' adds numbers instead of squaring.

Using '===' in filter instead of '%' causes wrong filtering.

The filter uses % 2 === 0 to find even numbers. The map uses ** 2 to square them.

5fill in blank

hard

Fill all three blanks to create an object mapping words to their lengths, only for words longer than 3 letters.

Javascript

const words = ['cat', 'elephant', 'dog', 'lion'];
const lengths = {};
for (let index [3] words) {
  const word = words[index];
  if (word.length > 3) {
    lengths[[1]] = [2];
  }
}
console.log(lengths);

Drag options to blanks, or click blank then click option'

Aword

Bword.length

Cfor

Din

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'for' instead of 'in' in the loop causes syntax errors.

Using 'for' as a key or value is incorrect.

This uses a for...in loop to iterate over array indexes and map words to their lengths if longer than 3 letters.

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