let-const-literals-and-destructuring

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);

8.2 Let, Const, Literals এবং Destructuring

Let, Var, Const

Template Literals

Object Literals

Assignment Destructuring

ঠিকানা

লিংকসমূহ

অন্যান্য

যোগাযোগ করুন

© Vivasoft 2023 • All rights reserved.