JavaScript Destructuring, Spread and Rest Practice Questions with Solutions

By /

Introductions

Destructuring, spread, and rest are powerful features of modern JavaScript. They make it easier to work with arrays, objects, and function parameters. These features may look confusing initially, but they become simple when practiced with small examples. In this chapter, you will learn how to extract values, copy data, combine arrays and objects, and handle multiple function arguments. JavaScript Destructuring, Spread and Rest practice questions with solutions help to understand the concepts.

Question 1: Destructure Values from an Array

Problem

Create an array containing a student’s name, age, and course. Use array destructuring to store these values in separate variables.

Solution

const student = ["Rahul", 18, "JavaScript"];

const [name, age, course] = student;

console.log(name);
console.log(age);
console.log(course);

Output

Rahul
18
JavaScript

Step-by-step Explanation

  1. The student array contains three values.
  2. [name, age, course] is used for destructuring.
  3. The first value is stored in name.
  4. The second value is stored in age.
  5. The third value is stored in course.
  6. Each variable can now be used separately.

Question 2: Skip an Array Value Using Destructuring

Problem

Create an array containing three numbers. Use destructuring to extract only the first and third values.

Solution

const numbers = [10, 20, 30];

const [first, , third] = numbers;

console.log(first);
console.log(third);

Output

10
30

Step-by-step Explanation

  1. The first value 10 is stored in first.
  2. The empty position skips 20.
  3. The third value 30 is stored in third.
  4. The syntax uses a comma to skip an array element.
const [first, , third] = numbers;

The middle position is intentionally left empty.

Question 3: Destructure Properties from an Object

Problem

Create a student object containing name, age, and course. Use object destructuring to extract these properties.

Solution

const student = {
    name: "Priya",
    age: 19,
    course: "JavaScript"
};

const { name, age, course } = student;

console.log(name);
console.log(age);
console.log(course);

Output

Priya
19
JavaScript

Step-by-step Explanation

  1. The student object contains three properties.
  2. { name, age, course } extracts those properties.
  3. The name property is stored in name.
  4. The age property is stored in age.
  5. The course property is stored in course.
  6. You can now use these values directly.

Question 4: Rename Variables During Object Destructuring

Problem

Create an object with name and age. Use destructuring to store them in variables named studentName and studentAge.

Solution

const student = {
    name: "Aman",
    age: 20
};

const {
    name: studentName,
    age: studentAge
} = student;

console.log(studentName);
console.log(studentAge);

Output

Aman
20

Step-by-step Explanation

The syntax:

name: studentName

means:

  • Get the name property from the object.
  • Store its value in a variable called studentName.

Similarly:

age: studentAge

stores the age property in studentAge.

Question 5: Copy an Array Using the Spread Operator

Problem

Create an array of numbers and use the spread operator to create a copy of the array.

Solution

const numbers = [10, 20, 30];

const copy = [...numbers];

console.log(copy);

Output

[10, 20, 30]

Step-by-step Explanation

  1. numbers contains three values.
  2. ...numbers spreads those values.
  3. The values are placed inside a new array.
  4. copy contains the same values.
  5. A new array is created.

The three dots ... are called the spread syntax when used to expand values.

Question 6: Combine Two Arrays Using Spread

Problem

Create two arrays of numbers and combine them into one array using the spread operator.

Solution

const firstNumbers = [10, 20, 30];
const secondNumbers = [40, 50, 60];

const allNumbers = [...firstNumbers, ...secondNumbers];

console.log(allNumbers);

Output

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

Step-by-step Explanation

  1. firstNumbers contains the first three values.
  2. secondNumbers contains the next three values.
  3. ...firstNumbers expands the first array.
  4. ...secondNumbers expands the second array.
  5. Both sets of values are placed into allNumbers.
  6. The final array contains all six numbers.

Question 7: Copy and Update an Object Using Spread

Problem

Create a student object and use the spread operator to create a new object with an updated age.

Solution

const student = {
    name: "Rahul",
    age: 18
};

const updatedStudent = {
    ...student,
    age: 19
};

console.log(updatedStudent);

Output

{
    name: "Rahul",
    age: 19
}

Step-by-step Explanation

  1. ...student copies the existing properties.
  2. age: 19 is then added.
  3. Because age already exists, its value is replaced with 19.
  4. The new object is stored in updatedStudent.
  5. The original student object remains unchanged.

Question 8: Use Rest Parameters in a Function

Problem

Create a function that accepts any number of numbers and calculates their total.

Solution

function calculateTotal(...numbers) {
    let total = 0;

    for (let number of numbers) {
        total += number;
    }

    return total;
}

console.log(calculateTotal(10, 20, 30));

Output

60

Step-by-step Explanation

  1. ...numbers is a rest parameter.
  2. It collects all remaining arguments into an array.
  3. calculateTotal(10, 20, 30) passes three values.
  4. Inside the function, numbers becomes:
[10, 20, 30]
  1. The for...of loop processes each value.
  2. All values are added together.
  3. The function returns 60.

Question 9: Use Rest with Destructuring

Problem

Create an array containing several numbers. Use destructuring to store the first number separately and collect the remaining numbers using rest syntax.

Solution

const numbers = [10, 20, 30, 40, 50];

const [first, ...remaining] = numbers;

console.log(first);
console.log(remaining);

Output

10
[20, 30, 40, 50]

Step-by-step Explanation

  1. first receives the first array value.
  2. ...remaining collects all remaining values.
  3. first becomes 10.
  4. remaining becomes:
[20, 30, 40, 50]
  1. This is useful when you want to separate the first value from the rest of an array.

Question 10: Combine Destructuring and Spread

Problem

Create a student object containing basic details and marks. Use destructuring to extract the student’s name and use the rest syntax to collect the remaining properties.

Solution

const student = {
    name: "Neha",
    age: 19,
    course: "JavaScript",
    marks: 90
};

const { name, ...details } = student;

console.log(name);
console.log(details);

Output

Neha
{
    age: 19,
    course: "JavaScript",
    marks: 90
}

Step-by-step Explanation

  1. The student object contains four properties.
  2. name extracts the name property.
  3. ...details collects all remaining properties.
  4. name becomes "Neha".
  5. details becomes a new object containing age, course, and marks.
  6. This technique is useful when you want to separate one property from the rest of an object.

Key Takeaways

  • Destructuring extracts values from arrays or properties from objects.
  • Array destructuring uses square brackets [].
  • Object destructuring uses curly brackets {}.
  • You can skip array values during destructuring.
  • Object properties can be renamed during destructuring.
  • The spread syntax expands values from arrays or objects.
  • Spread can be used to copy arrays.
  • Spread can combine multiple arrays.
  • Spread can copy and update objects.
  • The rest syntax collects multiple values into an array or object.
  • Rest parameters allow functions to accept any number of arguments.
  • Rest and spread use the same ... syntax, but their purpose depends on where they are used.

FAQs

1. What is destructuring in JavaScript?

Destructuring is a convenient way to extract values from arrays or properties from objects.

const numbers = [10, 20];

const [first, second] = numbers;

console.log(first);
console.log(second);

2. What is the spread operator?

Spread syntax expands the elements of an iterable such as an array or the properties of an object.

const first = [1, 2];
const second = [3, 4];

const result = [...first, ...second];

console.log(result);

Output:

[1, 2, 3, 4]

3. What is the rest parameter?

A rest parameter collects multiple function arguments into an array.

function add(...numbers) {
    console.log(numbers);
}

add(10, 20, 30);

Output:

[10, 20, 30]

4. What is the difference between spread and rest?

They use the same ... syntax but perform opposite types of operations.

Spread: expands values.

const numbers = [10, 20, 30];

console.log(...numbers);

Rest: collects values.

function show(...numbers) {
    console.log(numbers);
}

5. Can I destructure an object and rename its properties?

Yes.

const user = {
    name: "Rahul"
};

const { name: userName } = user;

console.log(userName);

Here, the name property is stored in userName.

6. Can spread be used to combine objects?

Yes.

const first = {
    name: "Rahul"
};

const second = {
    age: 18
};

const user = {
    ...first,
    ...second
};

console.log(user);

7. Can rest syntax be used with object destructuring?

Yes.

const user = {
    name: "Rahul",
    age: 18,
    course: "JavaScript"
};

const { name, ...details } = user;

console.log(details);

The details object contains the remaining properties.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top