Spread Operator in JavaScript (ES6) – Merge Arrays Easily

📌 INTRODUCTION

The spread operator (...) is a powerful feature introduced in ES6 that allows you to expand or “spread” elements of arrays or objects.

It is widely used in:

• React applications
• Array manipulation
• Data merging

👉 In this program, we will learn how to merge arrays using the spread operator.

---

📘 PROBLEM STATEMENT

👉 Write a program to merge arrays using the spread syntax.

---

💡 CONCEPTS USED

• Spread Operator (...)
• Arrays in JavaScript
• ES6 Features

---

🧠 LOGIC EXPLANATION

1. Create two arrays
2. Use spread operator ...
3. Combine arrays into a new array
4. Display the result

---

💻 PROGRAM CODE (Using Spread Operator)

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Merging arrays using spread operator
const mergedArray = [...arr1, ...arr2];

console.log("Array 1:", arr1);
console.log("Array 2:", arr2);
console.log("Merged Array:", mergedArray);

---

🖥️ OUTPUT

Array 1: [1, 2, 3]
Array 2: [4, 5, 6]
Merged Array: [1, 2, 3, 4, 5, 6]

---

🔍 STEP-BY-STEP EXPLANATION

• ...arr1 → spreads elements of first array
• ...arr2 → spreads elements of second array
• Combined into a new array

---

⚡ OLD METHOD (WITHOUT SPREAD)

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const merged = arr1.concat(arr2);

console.log(merged);

---

🎯 ADVANCED EXAMPLES

1. Adding Elements While Merging

const merged = [...arr1, 100, ...arr2];
console.log(merged);

---

2. Copying an Array

const copy = [...arr1];
console.log(copy);

---

3. Merging Objects

const obj1 = { name: "Nyra" };
const obj2 = { course: "BBA" };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);

---

🌟 ADVANTAGES OF SPREAD OPERATOR

• Short and clean syntax
• Easy array merging
• Avoids modifying original arrays
• Widely used in React state updates

---

📚 REAL-WORLD USE CASE

• Combining API data
• Updating React state
• Copying arrays/objects safely

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is the spread operator?

👉 It is ... used to expand elements of arrays or objects.

---

Q2. Which ES version introduced spread operator?

👉 ES6 (ECMAScript 2015)

---

Q3. Can spread operator be used with objects?

👉 Yes, for merging and copying objects.

---

Q4. Does spread operator modify original array?

👉 No, it creates a new array.

---

Q5. What is the difference between concat() and spread?

👉 Spread is shorter and more flexible.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 Arrow Function in JavaScript – Program 1
👉 Template Literals in JavaScript – Program 2
👉 Destructuring Assignment – Program 3

---

📌 CONCLUSION

The spread operator is one of the most useful ES6 features. It simplifies array and object operations and is heavily used in modern JavaScript development.

👉 Practice this concept — it is frequently asked in exams and interviews.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites