8.3 Spread , rest এবং Default Parameter

 

Spread Operator

Spread Operator (…) হচ্ছে এমন একটি সিনটেক্স যেটা একটি array অথবা অবজেক্টের  আইটেমগুলাকে অন্য array, অবজেক্ট  অথবা ফাংশন আর্গুমেন্টের মধ্যে ছড়িয়ে দেয়া হয়। কিছু এক্সাম্পল দেখলে বেপারটি ক্লিয়ার হওয়া যাবে:

Array Operation

Spread Operator ছাড়া:

let numberStore = [0, 1, 2];
let newNumber = 12;
numberStore.push(newNumber);
console.log(numberStore);           //[0, 1, 2, 12]

Spread Operator সহ:

let numberStore = [0, 1, 2];
let newNumber = 12;
numberStore = [...numberStore, newNumber];
console.log(numberStore);            //[0, 1, 2, 12]

Object Operation:

Spread Operator ছাড়া:

var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});
console.log(JSON.stringify(obj));

Spread Operator সহ:

var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair};
console.log(JSON.stringify(obj));

Function Operation:

Spread Operator ছাড়া:

function myFunction(x, y, z) { }
let args = [0, 1, 2];

myFunction.apply(null, args);

Spread Operator সহ:

function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction(...args);

Rest Parameter

Rest Parameter (…) কে ফাংশন আর্গুমেন্ট হিসাবে ব্যবহার করলে আমরা ফাংশনে অজানা পরিমান আর্গুমেন্ট অথবা array প্রেরণ করতে পারবো। যেমন:

সিনটেক্স:

function f(a, b, ...theArgs) { // ... }

উদাহরণ:

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
console.log(sum(1, 2, 3));          // output: 6
console.log(sum(1, 2, 3, 4));       // output: 10

Default Parameter

যখন কোনো ফাংশন প্যারামিটারে আগে থেকেই একটি ডিফল্ট ভ্যালু সেট করা হয় তখন সেই প্যারামিটারকে ডিফল্ট parameter বলে। যখন আমরা এই ফাংশনকে কল করব, তখন যদি কোন ভ্যালু না দেই অথবা undefined দেই তখন ফাংশন তার ডিফল্ট প্যারামিটার ব্যবহার করবে। 

সিনট্যাক্স:

function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { /* ... */ }

উদাহরণ:

function test(num = 1) {
  console.log(typeof num)
}

test()           // 'number' (1)
test(undefined)  // 'number' (1)


// test with other falsy values:
test('')         // 'string' ('')
test(null)       // 'object' (null)

 

 

উদাহরন
  • function parameter হিসেবে rest operator,
    function myFun(a,  b, ...manyMoreArgs) {
      console.log("a", a);
      console.log("b", b);
      console.log("manyMoreArgs", manyMoreArgs);
    }
    myFun("one", "two", "three", "four", "five", "six");
    
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]
  • function parameter এবং argument হিসেবে rest এবং spread operator,
    function myFunction(...data) {
      console.log(data); 
    }
    const args = [0, 1, 2];
    myFunction(...args); // [ 0, 1, 2 ]
    const arr = [0, 1, 2];
    
    function myFunction(...data) {
      console.log(data); 
    }
    
    myFunction(-1, ...arr, 3); // [ -1, 0, 1, 2, 3 ]
  • সাধারণত আমরা দেখি যে একটা object কে আরেকটা object এ copy করে রাখলে ২য় object টা ১ম object এর reference ধরে রাখে। এতে করে যেকোনো একটা object এর কোনো property পাল্টালে সেটা ২টা object এই পালটিয়ে যায়। কিন্তু যদি spread operator ব্যবহার করে copy করা হয় সেক্ষেত্রে এমন হয়না,
    const personObj = { name: "x", job: "y" };
    
    const person_1 = {...personObj};
    
    person_1.age = 18;
    
    console.log(personObj); // { name: 'x', job: 'y' }
    console.log(person_1); // { name: 'x', job: 'y', age: 18 }
  • Default parameter
    function myFunction(x = -1, y = -2) {
        console.log(x, y);
    }
    
    myFunction(1); // 1 -2

     

এসো নিজে করি
  • নিচের কোডের আউটপুট কি হবে?
    function spreadTest(x) {
        console.log(x);
    }
    
    spreadTest(...[1, 2, 3]);
  • নিচের কোডের আউটপুট কি হবে?
    function restTest(...x) {
        const arr = ['a', ...x, 'b'];
        console.log(arr);
    }
    
    restTest(1, 2, 3);
  • নিচের কোডের আউটপুট কি হবে?
    const obj_1 = { foo: 'bar', x: 42 };
    const obj_2 = { ...obj_1 };
    
    obj_2.x = 43;
    
    console.log(obj_1, obj_2);
  • নিচের কোডের আউটপুট কি হবে?
    function defaultValTest(x = -1) {
        console.log(x) 
    }
    
    defaultValTest();
  • নিচের কোডের আউটপুট কি হবে?
    const spread = [0, 1, 2];
    
    function srTest (a = -1, b, c, ...rest) {
        console.log(a, b, c, rest)
    }
    
    srTest(3, ...spread, ...[4], 5);