Tech TutorBangla Web Documentation
Portfolio
HomeHTMLCSSTailwind CSSJavaScriptTypeScriptReactNext.jsNode.jsExpressSocket.IOExpoWordPressPostgreSQLPrismaPostgresNestJSMongoDBDockerTanStackTanStack TableRTK QueryGitGitHub
  • JavaScript Documentation48টি অধ্যায়
প্রযুক্তি নির্বাচন
HomeHTMLCSSTailwind CSSJavaScriptTypeScriptReactNext.jsNode.jsExpressSocket.IOExpoWordPressPostgreSQLPrismaPostgresNestJSMongoDBDockerTanStackTanStack TableRTK QueryGitGitHub
  • Introduction
  • JavaScript কী?
  • Syntax & Comments
  • Variables
  • Data Types: Basics
  • Data Types: Conversion
  • Data Types: Advanced
  • Strings
  • Numbers & Math
  • Date & Time
  • Operators
  • Conditions
  • Loops
  • Functions: Basics
  • Functions: Intermediate
  • Functions: Advanced
  • Scope & Hoisting
  • Closures & this
  • ES6+ Modern
  • Arrays: Basics
  • Arrays: Intermediate
  • Arrays: Advanced
  • Objects: Basics
  • Objects: Intermediate
  • Objects: Advanced
  • Class: Basics
  • Class: Intermediate
  • Class: Advanced
  • DOM: Basics
  • DOM: Intermediate
  • DOM: Advanced
  • Events: Basics
  • Events: Intermediate
  • Events: Advanced
  • Async JavaScript
  • Promise
  • Async / Await
  • Fetch API
  • JSON
  • Modules
  • Browser Storage
  • Event Loop Deep
  • Prototype Chain
  • Iterators & Generators
  • WeakMap, WeakSet, Proxy
  • Error Handling
  • Practice Problems
  • Mini Projects
  • Basics
  • Functions & Scope
  • Types & Syntax
  • Arrays & Objects
  • Advanced
  • Functional Programming
  • Objects & Symbols
  • Async Deep Dive
  • Modern JavaScript
  1. Docs
  2. JavaScript
  3. প্রশ্ন/উত্তর
  4. Arrays & Objects
  5. Q17. What are the spread and rest operators, and how are they used?
JavaScriptArrays & Objects

Q17. What are the spread and rest operators, and how are they used?

তিনটি বিন্দুর চিহ্নের দুই ভিন্ন কাজ — ছড়িয়ে দেওয়া আর বাকিগুলো একসাথে ধরা।

দুটো operator-ই দেখতে হুবহু একই — তিনটি বিন্দু ...। কাজ নির্ভর করে এটি কোথায় বসানো হলো। ...-এর বাইরে থাকলে সেটি spread, আর ডেস্ট্রাকচারিং বা প্যারামিটারের ভেতরে থাকলে সেটি rest।

Spread মানে একটি array বা object কে খুলে অন্য জায়গায় ছড়িয়ে দেওয়া — মানগুলো একটা একটা করে কপি হয়ে যায়।

spreadjavascript
javascript
// array ছড়িয়ে নতুন array
const a = [1, 2, 3];
const b = [0, ...a, 4];

console.log(b);        // [0, 1, 2, 3, 4]
console.log(a);        // [1, 2, 3] — মূল অপরিবর্তিত

// object ছড়িয়ে নতুন object
const base = { id: 1 };
const user = { ...base, name: "Rahim" };

console.log(user);     // { id: 1, name: "Rahim" }

// ফাংশনে আর্গুমেন্ট হিসেবে
const sum = (x, y, z) => x + y + z;
const nums = [1, 2, 3];

console.log(sum(...nums)); // 6

Rest মানে উল্টোটা — বাকি সব মান একটা array বা object-এর ভিতরে জড়া করে নেওয়া। এটি সবসময় একটা ভেরিয়েবলের সাথে জোড়া বাঁধে।

restjavascript
javascript
// array-এর বাকি মানগুলো
const [first, ...rest] = [1, 2, 3, 4];

console.log(first, rest); // 1 [2, 3, 4]

// object-এ বাকি প্রপার্টিগুলো
const { id, ...others } = { id: 1, name: "Rahim", age: 25 };

console.log(id, others);  // 1 { name: "Rahim", age: 25 }

// ফাংশনের প্যারামিটারে
function total(first, ...numbers) {
  return first + numbers.length;
}

console.log(total("a", "b", "c")); // "ab3"

rest অবশ্যই শেষ বসতে হয় — তারপর আর কোনো প্যারামিটার রাখা যায় না।

একটি সাধারণ কাজ হলো স্থায়ীভাবে পরিবর্তন না করে কপি বানানো — যাতে মূল অ্যারে বা অবজেক্ট নষ্ট না হয়।

নিরাপদ কপি তৈরিjavascript
javascript
const original = [1, 2, 3];
const copy = [...original];

copy.push(4);

console.log(original); // [1, 2, 3] — অক্ষত
console.log(copy);     // [1, 2, 3, 4]

// update করার কাজও এভাবে করা যায়
const state = { count: 1 };
const next = { ...state, count: 2 };

console.log(state.count, next.count); // 1 2
বিষয়SpreadRest
কাজছড়িয়ে দেওয়াবাকিগুলো একসাথে ধরা
অবস্থানডান পাশেবাঁ পাশে
ফলাফলএকাধিক মানসবসময় একটি array বা object
উদাহরণ{ ...obj }const { a, ...rest } = obj
সতর্কতা

Spread শুধু shallow কপি করে — ভেতরের nested object-এর রেফারেন্স একই থাকে। তাই const copy = { ...user } করলে copy.address.city = "Sylhet" লিখলে মূল user.address.city-ও বদলে যাবে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।
Arrays & Objects বিভাগের আরও প্রশ্নJavaScript প্রশ্ন/উত্তর
Tech Tutor

বাংলায় ওয়েব ডেভেলপমেন্ট ডকুমেন্টেশন শিখুন — ধাপে ধাপে।

Homeসব ডকুমেন্টেশনQuick Startআমার নোটস

© 2026 Tech Tutor. বাংলায় শিখুন, বাংলায় গড়ুন।

mdanamolhasan1998@gmail.com