Common array operations 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'

Apush

Bpop

Cunshift

Dshift

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop instead of push removes the last element.

Using shift removes the first element instead of adding.

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

2fill in blank

medium

Complete the code to create a new array with each number doubled.

Javascript

const numbers = [1, 2, 3];
const doubled = numbers.[1](n => n * 2);
console.log(doubled);

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

Amap

Bfilter

Creduce

DforEach

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter returns only elements that pass a test, not transformed elements.

Using forEach does not create a new array.

The map method creates a new array by applying a function to each element.

3fill in blank

hard

Fix the error in the code to find the first number greater than 10.

Javascript

const nums = [4, 9, 15, 7];
const first = nums.[1](n => n > 10);
console.log(first);

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

Areduce

Bfilter

Cmap

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter returns an array, not a single element.

Using map transforms all elements, not find one.

The find method returns the first element that matches the condition.

4fill in blank

hard

Fill both blanks to create an array of squares for numbers greater than 3.

Javascript

const nums = [1, 2, 3, 4, 5];
const squares = nums.[1](n => n > 3).[2](n => n * n);
console.log(squares);

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

Afilter

Bmap

Creduce

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using find instead of filter returns only one element.

Using reduce does not return an array.

First, filter selects numbers greater than 3, then map squares them.

5fill in blank

hard

Fill all three blanks to create an object counting occurrences of each fruit.

Javascript

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.[1]((acc, fruit) => {
  acc[[2]] = (acc[[3]] || 0) + 1;
  return acc;
}, {});
console.log(count);

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

Areduce

Bfruit

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using map instead of reduce does not accumulate counts.

Using different keys instead of fruit causes errors.

reduce builds an object counting each fruit. The key is the fruit name used twice.

Practice

1. Which method adds a new item to the end of a JavaScript array?

easy

A. shift()

B. pop()

C. push()

D. unshift()

Solution

1. Step 1: Understand array methods for adding/removing items

   push() adds items to the end, pop() removes from the end, shift() removes from the start, unshift() adds to the start.

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

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

3. Final Answer:

   push() -> Option C

4. Quick Check:

   push() adds item at end [OK]

Hint: Remember push adds at end, pop removes from end [OK]

Common Mistakes:

• Confusing push() with pop()
• Using shift() to add items
• Using unshift() to add at end

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

easy

A. arr.shift()

B. arr.unshift()

C. arr.push()

D. arr.pop()

Solution

1. Step 1: Recall array methods for removing items

   pop() removes last item, shift() removes first item, push() adds last, unshift() adds first.

2. Step 2: Choose method that removes first item

   shift() removes the first item from the array.

3. Final Answer:

   arr.shift() -> Option A

4. Quick Check:

   shift() removes first item [OK]

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

Common Mistakes:

• Using pop() to remove first item
• Using push() or unshift() to remove items
• Confusing shift() with unshift()

3. What is the output of the following code?

const fruits = ['apple', 'banana', 'cherry'];
const index = fruits.indexOf('banana');
if (index !== -1) {
  fruits.splice(index, 1);
}
console.log(fruits);

medium

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

B. ['banana', 'cherry']

C. ['apple']

D. ['apple', 'cherry']

Solution

1. Step 1: Find the index of 'banana' in the array

   indexOf('banana') returns 1 because 'banana' is at position 1.

2. Step 2: Remove 'banana' using splice

   splice(1, 1) removes 1 item at index 1, so 'banana' is removed.

3. Final Answer:

   ['apple', 'cherry'] -> Option D

4. Quick Check:

   Removed 'banana' from array [OK]

Hint: indexOf finds position, splice removes item at that position [OK]

Common Mistakes:

• Not checking index before splice
• Using splice with wrong index
• Expecting splice to return new array

4. The following code is intended to remove 'orange' from the array, but it doesn't work as expected. What is the error?

const colors = ['red', 'green', 'blue'];
const index = colors.indexOf('orange');
colors.splice(index, 1);
console.log(colors);

medium

A. indexOf returns -1 if item not found, causing splice to remove last item

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

C. indexOf should be replaced with includes()

D. splice() cannot remove items by index

Solution

1. Step 1: Check indexOf result for 'orange'

   Since 'orange' is not in the array, indexOf returns -1.

2. Step 2: Understand splice behavior with negative index

   splice(-1, 1) removes the last item, so 'blue' is removed unexpectedly.

3. Final Answer:

   indexOf returns -1 if item not found, causing splice to remove last item -> Option A

4. Quick Check:

   Check index before splice to avoid removing wrong item [OK]

Hint: Check indexOf result before splice to avoid errors [OK]

Common Mistakes:

• Not checking if index is -1
• Using includes() instead of indexOf for index
• Assuming splice can't remove by index

5. Given an array nums = [1, 2, 3, 4, 5], which code snippet correctly removes all even numbers from the array?

hard

A. nums = nums.filter(n => n % 2 === 0);

B. nums = nums.filter(n => n % 2 !== 0);

C. nums.splice(1, 2);

D. nums.pop(); nums.pop();

Solution

1. Step 1: Understand filtering even numbers

   To remove even numbers, keep only numbers where n % 2 !== 0 (odd numbers).

2. Step 2: Check each option

   nums.filter(n => n % 2 !== 0) keeps odd numbers, removing all evens. nums.filter(n => n % 2 === 0) keeps evens. nums.splice(1, 2) removes items at fixed indexes. nums.pop() twice removes only the last two items.

3. Final Answer:

   nums = nums.filter(n => n % 2 !== 0); -> Option B

4. Quick Check:

   filter odd numbers to remove even [OK]

Hint: Use filter with condition to keep desired items [OK]

Common Mistakes:

• Using filter condition backwards
• Using splice without index knowledge
• Using pop to remove specific items