8.2 Let, Const, Literals এবং Destructuring

 

Let, Var, Const

আগে জাভাস্ক্রিপ্টে  ভ্যারিয়েবল ডিক্লেয়ার করার জন্য কেবলমাত্র var শব্দ তা ব্যবহার  করতে হতো। কিন্তু var কীওয়ার্ড এর কিছু সমস্যা এর কারণে ES6 এ let এবং const কীওয়ার্ড যুক্ত করা হয়। let এবং const এর মধ্যে মূল পার্থক্য হলো, const দিয়ে ডিক্লেয়ার করলে ভ্যারিয়েবল টা সবসময় constant থাকে এবং তাকে পুনরায় ডিক্লেয়ার এবং রিএসাইন করা যায় না। নিচের টেবিল টি দেখলে var , const এবং let  এর ব্যবহার প্রত্যক্ষ ভালো ভাবে বুঝা যাবে:

Feature

var let

const

Stored in Global Scope Yes No No
Function Scoped Yes Yes Yes
Block Scoped No Yes Yes
Reassignable Yes Yes No
Redeclarable yes No No
Can be Hoisted Yes No No
Hoisting Behavior Initialized with undefined Uninitialized Uninitialized

 

Template Literals

জাভাস্ক্রিপ্টে  সিঙ্গেল  quote অথবা  ডাবল  quote ব্যবহার করে স্ট্রিং অপারেশন অথবা স্ট্রিং এ কোনো ভ্যারিয়েবলক লিখতে চাইলে ‘+’ সাইন  ব্যবহার করলে যে সমস্যাগুলা তৈরী হয়, সেগুলা সলভ করার জন্য quote এর জায়গায় ` (ব্যাকটিক ওর একিউট সিম্বল) ব্যবহার করাকে, এবং ভ্যারিয়েবলকে প্লাস সাইন দিয়ে concat না করে ${} এর ভেতর লেখাকে Template Literal বলে।

যেমন নিচে নরমাল quote এবং প্লাস সিম্বল ব্যবহার করা হয়েছে:

var name = 'Jaber Al Nahian', age = 31, work= 'Vivasoft'; 

console.log('My name is ' + name + ' and I\'m ' + age + 'years old! Currently I\'m working at  ' + work);

এখানে আমাদের প্লাস + চিহ্ন দিয়ে ভ্যারিয়েবলগুলোকে আমার স্ট্রিংগুলোর সাথে কনক্যাট করতে হয়েছে। এটাও ঠিক আছে, কিন্তু বার বার এভাবে ‘ দিয়ে স্ট্রিং গুলোকে বেধে দিয়ে + দিয়ে এভাবে ভ্যারিয়েবলগুলোকে অ্যাক্সেস করা ঝামেলাপূর্ণ। অনেকসময় দেখা যায় বড় স্ট্রিং এর ক্ষেত্রে দুই একটা ‘ মিস হয়ে গেছে। আবার দেখুন এখানে I’m লেখার জন্যে এসকেপ ক্যারেক্টার \ ইউজ করতে হয়েছে। ওভারল এটা একটা মেস হয়ে গেছে। আর এইজন্যেই ইএস এ এসেছে টেমপ্লেট লিটারেল। এর প্রধান কাজ হচ্ছে এই স্ট্রিং কনক্যাটিনেশনের কমপ্লেক্সিটি কমানো। টেমপ্লেট লিটারেলে আমরা এই চিহ্ন ` (ব্যাকটিক, ট্যাব tab কীর উপরে) ইউজ করে পুরো স্ট্রিং টাকে বেঁধে ফেলি, তারপর ভিতরে কোনো ভ্যারিয়েবল বা সিম্পল ক্যাল্কুলেশন করতে চাইলে ${} এর ভিতরে রাখি। সেইম জিনিসটাই টেমপ্লেট লিটারেল দিয়ে প্রিন্ট করলে:

var name = 'Jaber Al Nahian', age = 31, work= 'Vivasoft'; 

console.log(`My name is ${name} and I\'m ${age}years old! Currently I\'m a ${work}`);

এখানে খেয়াল করলে আমরা বুঝতে পারবো, Template Literal ব্যাপারটাকে কত সহজ করে ফেলেছে। এমনকি Template Literal এর ভেতরে আমরা Arithmetic অপারেশন এবং মেথডস ও ব্যবহার  করতে পারি।

 

Object Literals

জাভাস্ক্রিপ্ট এ কারলি ব্রাকেট এর ভিতর name-value pair করে অবজেক্ট বানানোকে Object Literal বলে। যেমন: 

let jaberInfo = {‘name’: ‘Jaber Al Nahian’, ‘company’: ‘Vivasoft Ltd’, ‘age’: ‘31’}

 

উপরে Object Literal সিনটেক্স ব্যবহার করে একটি Object ডিক্লেয়ার করা হয়েছে।  আর তাছাড়াও অবজেক্ট ডিক্লেরেশন আরো অনেক ভৱে করা যায়, যেমন:

let newObj = new Object();

let newObj = {};

 

Assignment Destructuring

জাভাস্ক্রিপ্টে  destructuring  খুবই একটি গুরুত্বপূর্ণ বিষয়।  যখন আমরা একটি অবজেক্ট  অথবা array এর sub-item গুলোকে অন্য  ভ্যারিয়েবল এ এসাইন করি, তখন যদি আমরা চাই শুধু কিছু নির্দিষ্ট আইটেম কে নিতে, সেটা Destructuring Assignment এর মাধ্যমে সম্ভব। যদিও সেটা ডট অপারেটর দিয়ে করা যায়। যেমন:

let companyInfo = {
name : ‘Vivasoft’,
service : ‘Software Development’,
loc: ‘Dhaka, BD’
};

নিচের এক্সাম্পল গুলা দিয়ে আমরা পরিষ্কার ধারণা পেতে পারি:

Case example: 

Assignment Destructuring Assignment এর মাধ্যমে:

let {name, loc} = companyInfo;

console.log(name); //vivasoft

Equivalent normal assignment এর মাধ্যমে:

let name = companyInfo.name;

let location = companyInfo.location;
উদাহরন
  • let, const function scoped হওয়ায় এদের নিজস্ব ফাংশনের বাইরে থেকে অ্যাক্সেস করা যায়না
    function test() {
      let a = 1;
      const b = 2;
    }
    console.log(a, b); // ReferenceError
  • আবার এরা block scoped হওয়ায় test ফাংশনের ভেতর থাকার পরেও reference error দিবে
    function test() {
      {
        let a = 1;
        const b = 2;
      }
      console.log(a, b);
    }
    test(); // ReferenceError
    
  • const এ ভ্যালু reassign করা যায়না। কিন্তু const variable এ থাকা object এর ভ্যালু আপডেট করা যায়। কারণ const, ভ্যারিয়েবলের reference\memory address ধরে রাখে, ভ্যালু না। reassign মানে নতুন reference অ্যাসাইন করা। নিচের কোড type error দিবে কারণ এখানে সরাসরি a এর reference পাল্টানোর চেষ্টা করা হয়েছে
    const a = 1;
    a = 2; // TypeError

    কিন্তু নিচের কোড আবার ঠিকঠাক run হবে সাথে name এর ভ্যালুও পাল্টাবে

    const person = {name: 'sania'};
    person.name = 'rahman';
    
    console.log(person); // { name: 'rahman' }
  • Assignment Destructuring,
    const companyInfo = {
      name: "Vivasoft",
      service: "Software Development",
      loc: "Dhaka, BD",
    };
    const { name: companyName, loc: companyLocation } = companyInfo;
    
    console.log(companyName); // Vivasoft
    console.log(companyLocation); // Dhaka, BD
  • template literal ব্যাবহার করে string এ ডাইনামিক ভ্যালু বসানো যায়। যেমন,
    function test(a) {
        console.log(`${a} is an ${a % 2 ? 'odd' : 'even'} number`)
    }
    
    test(1); // 1 is an odd number
    test(2); // 2 is an even number
এসো নিজে করি
  • নিচের কোডের আউটপুট কি হবে?
    var a = 1;
    
    function varTest() {
      a = 3;
      var a = 2;
      console.log(a);
    
      x = 4;
    }
    
    varTest();
    
    console.log(a);
    console.log(x);
  • নিচের কোডের আউটপুট কি হবে?
    console.log(c);
    const c = 4;
    
    function constTest() {
      console.log(c);
      const c = 5;
      console.log(c);
    }
    
    constTest();
    
    c = 6;
    console.log(c);
  • নিচের কোডের আউটপুট কি হবে?
    console.log(b);
    let b = 4;
    
    function letTest() {
      console.log(b);
      let b = 5;
      console.log(b);
    }
    
    letTest();
  • নিচের কোডের আউটপুট কি হবে?
    console.log(`${d ? d : -1}`);
    var d = 7;
  • নিচের কোডের আউটপুট কি হবে?
    const object_1 = {
      name: "sania",
    };
    
    const object_2 = object_1;
    
    object_1.job = "swe";
    
    console.log("object_1", object_1);
    console.log("object_2", object_2);
  • নিচের কোডের আউটপুট কি হবে?
    const key = "z";
    const { [key]: foo } = { z: "bar" };
    
    console.log(foo);