Chapter 11: Modern JavaScript ES6

11-1: বিদায় Var

পুরাতন ফোন আমরা ফেলে দেই বা ছোট ভাই-বোনকে দিয়ে দেই। পুরান স্কুলের বই আমরা ফেলে দেই বা ছোট ভাই-বোন থাকলে তাদের জন্য রেখে দেই।

জাভাস্ক্রিপ্টের সাথেও এই জিনিস ঘটেছে বেশ কয়েকবার। তার মধ্যে একটা বিশাল ঘটনা ঘটে 2015-তে। তখন জাভাস্ক্রিপ্টের হর্তাকর্তারা সিদ্ধান্ত নিল যে, জাভাস্ক্রিপ্টে নতুন কিছু আনার দরকার আছে। তুই জানিস, জাভাস্ক্রিপ্টের অফিসিয়াল নাম ECMAScript। এই ECMA থেকে E এবং Script থেকে S নিয়ে সংক্ষেপে ES বলে। তাই ES6 বলতে বুঝায় ECMAScript বা জাভাস্ক্রিপ্টের 6 নম্বর ভার্সন।

জাভাস্ক্রিপ্টের যখন 6 নম্বর ভার্সন রিলিজ হয়, তখন অনেকগুলা জিনিসের মধ্যে গুরুত্বপূর্ণ ছিল const, let আর এই দুইটা তুই অলরেডি ভেরিয়েবল ডিক্লেয়ার করার জন্য ইউজ করতেছিস। যদিও একটা সময় জাভাস্ক্রিপ্টে এই দুইটার কোনোটাই ছিল না। তখন ভেরিয়েবল লেখার জন্য var ইউজ করা হতো। আর এই var-এর কারণে অনেক সমস্যাও হতো।

এখনকার দিনে প্রায় সব ক্ষেত্রেই var ব্যবহার করার বিশেষ কোনো কারণ নাই। আমরা let এবং const ব্যবহার করব। let মানে তুই ভেরিয়েবলের মান পরিবর্তন করতে পারবি, কিন্তু const মানে সেটিকে পরিবর্তন করতে পারবি না। এইটুক তুই আগে থেকেই জানিস।

javascript

const money = 25;
money = 50;

এভাবে করলে জাভাস্ক্রিপ্ট মাইন্ড করবে। তখন তুই TypeError: Assignment to constant variable দেখতে পাবি। অর্থাৎ তুই যদি const দিয়ে কোনো ভ্যারিয়েবল ডিক্লেয়ার করিস, তাহলে সেটি আর পরিবর্তন করা যাবে না। তবে সেই মান দিয়ে অন্য কাজ করতে পারবি, কিন্তু মূল ভ্যারিয়েবলের মান চেইঞ্জ করতে পারবি না। যেমন:

javascript

const money = 25;
const rich = money + 25;
console.log(rich);

আর যদি কোনো মান পরিবর্তন করার দরকার হয়, তখন let দিয়ে ডিক্লেয়ার করবি। যেমন:

javascript

let count = 0;
count = count + 10;
console.log(count);

এভাবে করলে জাভাস্ক্রিপ্ট কোনো error দিবে না, ঠিকঠাক কাজ করবে।

যদিও const দিয়ে ভেরিয়েবল ডিক্লেয়ার করলে সেটার পুরা মান চেইঞ্জ করা যায় না। তবে ভেরিয়েবলের মান যদি array বা অবজেক্ট হয়, তাহলে তার ভিতরের উপাদান বা প্রোপার্টি চেইঞ্জ করতে পারবি। যেমন, তুই অ্যারের ভিতরের উপাদান চেঞ্জ করতে পারবি।

javascript

const numbers = [23, 4, 23, 12, 56];
numbers[1] = 55;
console.log(numbers);

এতে জাভাস্ক্রিপ্ট কোনো সমস্যা করবে না। আবার তুই উপাদান push বা popও করতে পারবি।

javascript

const numbers = [23, 4, 23, 12, 56];
numbers[1] = 55;
numbers.push(8, 9, 65);
console.log(numbers);

Output: [23, 55, 23, 12, 56, 8, 9, 65];

অবজেক্টের ক্ষেত্রেও একই নিয়ম প্রযোজ্য। পুরা ভেরিয়েবলের মান রি-অ্যাসাইন করার চেষ্টা করলে error দিবে।

javascript

  const student = {
    name: 'moyna pakhi',
    class: 12,
  }
  student = {
    name: 'kokil konthi'
  }
  console.log(student);

Output:

  TypeError: Assignment to constant variable.

কিন্তু ভেতরের প্রোপার্টি আপডেট করতে পারবি বা নতুন প্রোপার্টি যোগ করতে পারবি।

javascript

  const student = {
    name: 'moyna pakhi',
    class: 12,
  }
  student.name = 'moyur konthi';
  console.log(student);

Output:

  { name: 'moyur konthi', class: 12 }

ফাইনাল কথা হচ্ছে, বেশির ভাগ সময় const ইউজ করবি, আর মাঝেমধ্যে দরকার হলে let ইউজ করবি। তবে var কখনোই ইউজ করবি না।

Modern JavaScript Practice:

var, let, এবং const-এর মধ্যে ডিফারেন্স কি?
var কে কেন বিদায় দেওয়া হলো? var দিয়ে ভেরিয়েব্ল ডিক্লেয়ার করলে কি কি সমস্যা তৈরি হয়?

11-2: Default ফ্রেন্ডজোন

কিছু স্মার্ট পোলাপান আছে, ধুমাইয়া প্রেম করে আর ক্লোজ একজনকে ফ্রেন্ডজোন করে রাখে। কোনো কারণে ব্রেকাপ হয়ে গেলে ফ্রেন্ডজোনের সাথে কিছুদিন টাইম পাস করে। তারপর আবার ফ্রেন্ডজোনের কথা ভুলে গিয়ে নতুন আরেকটা প্রেম করে। সেটাও ব্রেকাপ হয়ে গেলে আবার ফ্রেন্ডজোনের কাছে ফেরত আসে। অর্থাৎ প্রেম থাকলে ধুমাইয়া প্রেম করে। আর প্রেম না থাকলে ফ্রেন্ডজোনের সাথে সাময়িকভাবে টাইমপাস করে।

এই কাজটা জাভাস্ক্রিপ্টের ফাংশনও করে।

এইখানে একটা ফাংশন আছে। আমরা ভদ্র বাচ্চার মতো এই function কল করার সময় দুটা ভ্যালু বা দুইটা ভেরিয়েবলকে প্যারামিটার (arguments) হিসেবে পাঠিয়ে দেই। যেমন, নিচে 5 এবং 7-কে দেয়া হয়েছে।

javascript

function add(num1, num2) {
  const result = num1 + num2;
  return result;
}

const sum = add(5, 7);
console.log(sum);

Output: 12;

তুই যেহেতু ভদ্র বাচ্চা, আউটপুটও ভদ্রভাবে পাবি। কিন্তু কিছু বাচ্চা আছে অভদ্র, একটু দুষ্ট; তারা দুইটা parameter-এর জায়গায় একটা parameter দিল।

javascript

  function add(num1, num2){
    const result = num1 + num2;
    console.log(num1, num2, result);
    return result;
  }

  const sum = add(5);
  console.log(sum);

Output:

  5 undefined NaN
  NaN

ফাংশন কল করার সময় যখন কোনো প্যারামিটারের মান পাবে না, তখন ওটা undefined হয়ে যাবে। অর্থাৎ তুই একটা প্যারামিটারের মান দিয়ে ফাংশনকে কল করেছিস। তাই সেটা প্রথম প্যারামিটার অর্থাৎ num1-এর মান হয়ে যাবে। আর তুই যেহেতু সেকেন্ড প্যারামিটারে মান দিস নাই, তাই সেটার মান ডিফাইন করা নাই। তখন num2-এর মান undefined হয়ে যাবে। তারপর থেকে শুরু হবে ক্যাচাল।

কারণ, ফাংশনের ভিতরে num1 + num2-এর জায়গায় হয়ে যাবে 5 + undefined, আর কোনো সংখ্যার সাথে undefined যোগ করলে সেটার মান NaN বা Not a Number হয়ে যাবে। অর্থাৎ 5-এর সাথে undefined যোগ করা যায় না, তাই NaN আউটপুট হবে।

আবার, একইভাবে তুই একদম কোনো প্যারামিটার না দিয়েই যদি add() ফাংশনকে কল করিস, তখন ফাংশনের ভিতরে undefined + undefined-এর মানও NaN দেখাবে।

তাহলে করণীয় কী? করণীয় হচ্ছে প্যারামিটারের ডিফল্ট মান রাখা। যাতে প্যারামিটারের মান দিলে যেটা দিবে, সেটা ইউজ হবে। আর যদি কোনো কারণে মান না দেয়, তাহলে যেন ডিফল্ট মান ইউজ করা যায়।

তখন ওই default মান ব্যবহার করে ফাংশনটি কোনো error ছাড়াই চলবে। বিষয়টা একটা উদাহরণ দেখলে আরও বেশি ক্লিয়ার হবে:

javascript

  function add(num1, num2 = 0){
    const result = num1 + num2;
    console.log(num1, num2, result);
    return result;
  }

  const sum = add(5);
  console.log(sum);

Output:
  5 0 5
  5

এখানে খেয়াল করে দেখবি, আমরা আমাদের ফাংশনের দ্বিতীয় parameter-এর default মান 0 করে দিয়েছি। জাস্ট প্যারামিটারের নামের পর একটা সমান চিহ্ন দিয়ে 0 ডিফল্ট মান হিসেবে সেট করে দিছি। যাতে এই ফাংশনটাকে কল করার সময় যদি একটা parameter দেয়া হয়, অর্থাৎ সেকেন্ড প্যারামিটার না দেয়া হয়, তখন সে সেকেন্ড প্যারামিটারকে 0 হিসেবে ধরে নিবে। ঠিকঠাক মতো আউটপুট দিবে। কোনো error দিবে না।

আমরা চাইলে সব প্যারামিটারের ডিফল্ট মান ইউজ করতে পারি।

javascript

  function add(num1 = 0, num2 = 0){
    const result = num1 + num2;
    console.log(num1, num2, result);
    return result;
  }

  const sum = add();
  console.log(sum);
  const total = add(17, 19);
  console.log(total);

Output:
  0 0 0
  0
  17 19 36
  36

এবার বল, এখানে কী ঘটনা ঘটেছে? ওই যে default মান যেটা দিয়েছিলাম, সেটার জায়গায় তুই যখন তোর দ্বিতীয় parameter-সহ দিয়েছিস, তখন সেটা কিন্তু ওই default মানকে replace করে ফেলেছে এবং তোর কোড বা ফাংশন পারফেক্টলি রান করেছে কোনো সমস্যা ছাড়াই।

কখনো যদি ফাংশনের প্যারামিটার হিসেবে অবজেক্ট থাকে, তাহলে সেটার ডিফল্ট মান হিসেবে একটা খালি অবজেক্ট হতে পারে। আবার কিছু কিছু ক্ষেত্রে অবজেক্টের ভিতরে কিছু প্রোপার্টির ডিফল্ট মানসহ হতে পারে। একইভাবে যদি ফাংশনের প্যারামিটার হিসেবে array থাকে, তখন ডিফল্ট মান হিসেবে একটা খালি array হতে পারে। নিচের উদাহরণের মতো—

javascript

function createUser(name = "", education = {}, age = 0, hobbies = []) {}

কিছু ডিফল্ট মানের উদাহরণ

১. যোগ করলে সংখ্যা টাইপ প্যারামিটার হলে সেটার ডিফল্ট মান 0 হতে পারে। আবার ক্ষেত্রবিশেষে অন্য কোনো উপযুক্ত সংখ্যা হতে পারে।

২. গুণ বা ভাগ করলে ডিফল্ট মান 1 হতে পারে।

৩. স্ট্রিং হলে সেটার ডিফল্ট মান খালি স্ট্রিং ('') হতে পারে।

৪. প্যারামিটার array হলে সেটার ডিফল্ট মান [ ] হতে পারে।

৫. প্যারামিটার object হলে সেটার ডিফল্ট মান { } হতে পারে।

আর মন খারাপ করবি না, যদি সে তোকে ডিফল্ট ভ্যালু হিসেবে ফ্রেন্ডজোন করে রাখে।

Practice:

এমন একটি ফাংশন তৈরি কর যা তিনটি সংখ্যার যোগফল বের করবে। ডিফল্ট মান হিসেবে প্রতিটি প্যারামিটারের জন্য 0 সেট কর।
তুই এমন একটি ফাংশন লিখবি, যেখানে টাকা জমা দেওয়ার সুযোগ থাকবে। যদি কোনো টাকার পরিমাণ না দেওয়া হয়, তাহলে জমা হিসেবে ডিফল্ট 50 টাকা দেখাবে।
এমন একটি ফাংশন তৈরি কর, যেখানে নাম আর তার মাসিক আয় নিবি। যদি নাম না দেওয়া হয়, তাহলে ডিফল্ট হিসেবে anonymous ইউজ করবি। আর মাসিক আয় দেয়া না থাকলে সেখানে ডিফল্ট হিসেবে 0 ইউজ করবি।
এমন একটি ফাংশন লিখ, যা একটি সংখ্যা নেবে এবং সেটার বর্গ বের করবে। যদি সংখ্যা না দেওয়া হয়, সেটার ডিফল্ট মান 1 রাখ।
এমন একটি ফাংশন বানা, যেটা কোনো পণ্যের নাম ও তার মূল্য নিবে। যদি নাম না দেওয়া হয়, তাহলে "Unknown product" এবং মূল্য না থাকলে 1 সেট কর।
একটা ফাংশন তৈরি কর, যা তোর সব প্রিয় বইয়ের নাম অ্যারে প্যারামিটার হিসেবে নিবে। যদি কোনো প্যারামিটার না পাঠানো হয়, তাহলে ডিফল্ট একটা অ্যারে রাখবি, সেটার মধ্যে একটা মান থাকবে JS book নামে।
একটি ফাংশন তৈরি কর, যেখানে একটি অবজেক্ট প্যারামিটার নিবে। অবজেক্টে price এবং quantity থাকবে। যদি অবজেক্ট না পাঠানো হয়, ডিফল্ট মান হিসেবে price 10 এবং quantity 1 সেট কর। ফাংশন total price রিটার্ন করবে।
এমন একটি ফাংশন বানা, যেখানে একটি অ্যারে প্যারামিটার নিবে। প্রতিটি উপাদানকে 2 দিয়ে গুণ করে নতুন অ্যারে রিটার্ন করবে। যদি অ্যারে না দেওয়া হয়, ডিফল্ট হিসেবে [5, 10, 15] সেট কর।
একটি ফাংশন তৈরি কর, যা একটি অবজেক্ট প্যারামিটার নিবে। অবজেক্টে principal এবং rate থাকবে। যদি অবজেক্ট না পাঠানো হয়, ডিফল্ট principal 1000 এবং rate 5 রাখ। ফাংশন simple interest হিসাব কর, এই ফর্মুলা দিয়ে (principal * rate / 100), তাহলে রেজাল্ট রিটার্ন করবে।
একটি ফাংশন তৈরি কর, যা একটি অবজেক্ট প্যারামিটার নিবে। অবজেক্টে salary এবং tax থাকবে। যদি অবজেক্ট না পাঠানো হয়, ডিফল্ট salary 50000 এবং tax 10 সেট কর। ফাংশন এর ভিতরে ট্যাক্স এর পার্সেন্ট দিয়ে ট্যাক্স এর টাকার পরিমান বের করবি তারপর স্যালারি থেকে ট্যাক্স এর টাকার পি পরিমান বিয়োগ করে রেজাল্ট রিটার্ন করবি।

11-3: Template String ডিস্টিং ডিস্টিং

তুই স্ট্রিং জোড়া লাগাতে পারিস, জাস্ট প্লাস চিহ্ন দিয়ে এবং চাইলে দুইটা স্ট্রিংয়ের মাঝখানে হোয়াইট স্পেসসহ জোড়া দিতে পারস নিচের মতো করে—

javascript

  const first = 'jaan';
  const last = 'pakhi';
  const name = first + ' ' + last + ' '+ 'potash potash';
  console.log(name)


Output: jaan pakhi potash potash

তবে কিছুদিন পরে বুঝতে পারবি, স্ট্রিংয়ের মধ্যে ভেরিয়েবল যোগ করতে গেলে অনেক প্যারা হয়। ধরে ধরে আলাদা আলাদাভাবে স্পেস যোগ করতে হয়। স্পেশাল ডাইনামিক ক্যালকুলেশন করা আরও ঝামেলার।

javascript

  const a = 10;
  const b = 20;

  const result = 'The sum of ' + a + ' and ' + b + ' is ' + (a + b);
  console.log(result);


Output: The sum of 10 and 20 is 30

এই সমস্যাটাকে সহজ করার জন্য তোকে কি-বোর্ডের সাথে একটু পরিচিত হতে হবে। তোর কি-বোর্ডে ESC বাটনের নিচে একটা বাটন তুই দেখতে পাবি, সেটাকে বলা হয় backtick (`)। অর্থাৎ, এইরকম একটা সিম্বল তুই সেখানে দেখতে পাবি।

backtick দিয়েও তুই string ডিক্লেয়ার করতে পারবি, কিন্তু এইটার আরেকটা superpower আছে। সেই superpower হলো, তুই স্ট্রিংয়ের মধ্যে ভেরিয়েবলের মান সরাসরি ব্যবহার করতে পারবি।

১. সহজে ভেরিয়েবলের মান স্ট্রিং যোগ করা

নিচের দুইটা console log দেখলে বুঝতে পারবি। কীভাবে কনসোল লগে লেখা অনেক বেশি সহজ হয়ে গেছে। জাস্ট ব্যাকটিক দিয়ে স্ট্রিং শুরু করবি। তারপর মধ্যে ডলার চিহ্ন ($) দিয়ে সেকেন্ড ব্র্যাকেট ( { } ), এতে যেকোনো ভেরিয়েবল আর নাম লিখে ফেলতে পারবি। কোনো প্লাস চিহ্ন ইউজ করা লাগবে না। কী সহজ। কী মজা !

javascript

  const name = "Rafiq";
  const age = 30;
  console.log("Name: " + name + ", Age: " + age);
  console.log(`Name: ${name}, Age: ${age}`);


Output:
Name: Rafiq, Age: 30
Name: Rafiq, Age: 30

২. এক্সপ্রেশন যোগ করা

ব্যাকটিক (`) দিয়ে স্ট্রিংয়ের মধ্যে যোগ-বিয়োগ, গুণ-ভাগ বা আরেকটু জটিল অঙ্ক করা যায়।

javascript

  const a = 10;
  const b = 20;

  const math = `The sum of ${a} and ${b} is ${a + b}`;
  console.log(math)


Output: The sum of 10 and 20 is 30

৩. মাল্টি-লাইন স্ট্রিং

আরেকটা ব্যবহার হলো, তুই যখন single quotation দিয়ে কোনো বড় আর্টিকেল বা দুই-তিন লাইনের কিছু লিখতে যাবি, তখন তোকে \n ব্যবহার করে লাইন ব্রেক দিতে হবে। কিন্তু backtick দিয়ে সহজে multiline string লিখতে পারবি।

javascript

const email = `John Cena
  cena naki ochena
  mair khaile bachena`;

এখানে \n ব্যবহার করার দরকার নাই। জাস্ট নরমালভাবে আলাদা আলাদা নতুন লাইনে লিখলেই কাজ হয়ে যায়।

৪. ফাংশন কল যোগ করা

অনেক সময় ফাংশনে কল করে তারপর সেটার আউটপুট একটা ভেরিয়েবলে রেখে সেটাকে দিয়ে কিছু করতে হয় বা কোনো স্টেটমেন্টে রাখতে হয়। এই কাজটা সহজেই স্ট্রিংয়ের মধ্যেই ফাংশনকেও কল করা যায় এবং ফাংশনের রিটার্ন যদি কোনো স্ট্রিং বা মান হয়, তাহলে সেটা সরাসরি স্ট্রিংয়ের মধ্যে বসে যাবে।

javascript

  const getName = function(){
      return "Nadia";
   }
   const message = `Na Bolle Sadia, ase amar ${getName()}!`;
   console.log(message);


Output: Na Bolle Sadia, ase amar Nadia!

৫. শর্ত যোগ করা

শর্টকাটে স্ট্রিংয়ের মধ্যে টার্নারি অপারেটর ইউজ করে শর্তসাপেক্ষে নতুন স্ট্রিং বা মান যোগ করা যায়।

javascript

  const age = 20;
  const status = `You are ${age >= 18 ? "Adult" : "Minor"}`;
  console.log(status);


Output: You are Adult

৬. স্ট্রিংয়ে অবজেক্ট প্রোপার্টি যোগ করা

অবজেক্ট থেকে সরাসরি কোনো প্রোপার্টির মান চাইলে ডাইরেক্ট যোগ করে ফেলা যায়।

javascript

  const user = { name: "Tariq", age: 25 };
  const info = `Name: ${user.name}, Age: ${user.age}`;
  console.log(info);


Output: Name: Tariq, Age: 25

৭. অ্যারের সাথে কাজ করা

স্ট্রিংয়ে সরাসরি array-এর কোনো ভ্যালু ব্যবহার করা যায়। আবার স্ট্রিং উপাদানওয়ালা একটা array-এর সব উপাদান join করে বড় স্ট্রিং বানিয়ে ব্যবহার করা যায়।

javascript

  const fruits = ["Apple", "Banana", "Mango"];
  const second= `My second favorite fruit is: ${fruits[1]}.`;
  const list = `My favorite fruits are: ${fruits.join(", ")}.`;
  console.log(list);


Output: My favorite fruits are: Apple, Banana, Mango.

৮. টেমপ্লেট স্ট্রিংয়ের মাধ্যমে HTML টেমপ্লেট তৈরি করা

ডাইনামিক HTML তৈরি করার জন্য টেমপ্লেট স্ট্রিং খুবই পাওয়ারফুল একটা জিনিস।

javascript

const title = "Welcome";
const body = "This is a dynamic template.";
const html = `<div>
    <h1>${title}</h1>
    <p>${body}</p>
  </div>`;
console.log(html);

৯. স্ট্রিংয়ের মধ্যে হিসাবের জন্য ব্যবহার

মাঝেমধ্যে দরকার পড়লে টেমপ্লেট স্ট্রিংয়ের মধ্যে ছোটখাটো হিসাব করে সেটার ফল সরাসরি আউটপুট হিসেবে দেখানো যায়।

javascript

  const radius = 5;
  const area = `Circle area is ${Math.PI * radius ** 2}.`;
  console.log(area);


Output: Circle area is 78.53981633974483.

১০. যেখানে-সেখানে মিক্সড স্ট্রিং

ফাংশন থেকে স্ট্রিংওয়ালা কোনো ভ্যালু (সেটা আরেকটা স্ট্রিং হোক বা আরেকটা সংখ্যাওয়ালা ভেরিয়েবল হোক) সেটাকে রিটার্ন করা বা অন্য কোনো সিমিলার কাজ করা অনেক সহজ হয়ে গেছে।

javascript

const greet = function (name) {
  return `Hello, ${name}`;
};
console.log(greet("Nadia"));

Output: (Hello, Nadia);

Practice:

টেমপ্লেট স্ট্রিংয়ের মাধ্যমে দুটি সংখ্যার বিয়োগফল দেখা। যেমন: The difference between 100 and 20 is 80।
একটি অবজেক্ট employee তৈরি কর, যেখানে name, age এবং salary থাকবে। টেমপ্লেট স্ট্রিং দিয়ে তার নাম, বয়স এবং স্যালারি দেখা।
fruits নামে একটি অ্যারে তৈরি কর। টেমপ্লেট স্ট্রিং ব্যবহার করে দেখা যে, তোর পছন্দের তৃতীয় ফলটি কী।
const a = 50 এবং const b = 10 থাকলে টেমপ্লেট স্ট্রিং দিয়ে দেখা The division of a and b is 5।
const person = { firstName: "Amit", lastName: "Kumar" }; টেমপ্লেট স্ট্রিং ব্যবহার করে দেখা Full Name: Amit Kumar।
একটি অ্যারে animals = ["Cat", "Dog", "Elephant"] তৈরি কর এবং টেমপ্লেট স্ট্রিং ব্যবহার করে দেখা My favorite animals are Cat, Dog, Elephant।
তোর কাছে স্টুডেন্ট নামে একটা অবজেক্ট আছে, সেই স্ট্রিংয়ের মধ্যে তার নাম আছে, তার বয়স আছে এবং তার তিনটা সাবজেক্টের মার্কস দেয়া আছে results নামক একটা প্রোপার্টির মধ্যে। যেটার মান একটা অ্যারে। এখন তোর কাজ হবে একটা টেমপ্লেট স্ট্রিং দিয়ে একটা স্ট্রিংয়ের মধ্যে এই স্টুডেন্টের নাম, তার তিনটা সাবজেক্টের রেজাল্টের গড় দেখানো। গড় দেখানোর জন্য তিনটা সাবজেক্টের মান যোগ করে তিন দিয়ে ভাগ করবি।

11-4: তীর ধনুকের Arrow Function

তীর লাগে হৃদয়ে। ভেঙে ফেলে রিলেশনকে। আর জাভাস্ক্রিপ্টে তীর বা Arrow লাগলে সেটা ফাংশনকে সোজা করে ফেলে। তবে তীরের তাড়া খাওয়ার আগে দুইটা প্যারামিটার দিয়ে একটা ফাংশন ডিক্লেয়ার করে ফেল।

javascript

function add(a, b) {
  const result = a + b;
  return result;
}

const sum = add(5, 90);
console.log(sum);

Output: 95;

এবং এই সেইম ফাংশনকে তুই আরেকটু ছোট করে লিখতে পারিস।

javascript

function add(a, b) {
  return a + b;
}

const sum = add(5, 90);
console.log(sum);

Output: 95;

এটা হলো ফাংশন ডিক্লারেশন, যেখানে আমরা function কি-ওয়ার্ড দিয়ে ফাংশন ডিক্লেয়ার করি। কিন্তু তুই চাইলে ফাংশনকে ভেরিয়েবলের মতোও লিখতে পারিস, এইটাকে বলে ফাংশন এক্সপ্রেশন।

javascript

const add2 = function (a, b) {
  return a + b;
};

এখানে কোনো স্পেশাল কিছু নাই, শুধু ফাংশনকে ভেরিয়েবলের মতো করে ডিক্লেয়ার করেছি। এই পদ্ধতিতেও কাজ একইভাবে হয়, শুধু এভাবে লেখা হয় বলে এটাকে বলে function expression।

এখন আসি arrow function-এর কথায়। এটি ফাংশন এক্সপ্রেশনের আরও সংক্ষিপ্ত একটি ফর্ম, যেখানে function কি-ওয়ার্ডটি বাদ দিয়ে একটি অ্যারো (=>) ব্যবহার করা হয়। অ্যারো (arrow) মানে একটা সমান চিহ্ন (=)-এর পর একটা গ্রেটার দ্যান (>) চিহ্ন দিলে => এমন হয়, যেটা দেখতে অনেকটা তীর বা arrow-এর মতো দেখায়।

javascript

const add3 = (a, b) => a + b;

const sum = add3(5, 30);
console.log(sum);

এটাই হলো অ্যারো ফাংশন। এখানে return স্টেটমেন্টটি আলাদাভাবে দিতে হবে না, যদি এক লাইনে সব কিছু করা যায়। তবে তুই চাইলে { } ব্যবহার করে return স্টেটমেন্টও দিতে পারবি।

এখন আমরা যদি অনেক প্যারামিটার নিয়ে কাজ করতে চাই, সেখানেও arrow function ব্যবহার করতে পারি।

javascript

const add4 = (num1, num2, num3, num4) => num1 + num2 + num3 + num4;

const sum = add4(5, 30, 4, 6);
console.log(sum);

Output: 45;

এই অ্যারো ফাংশনের মাধ্যমে আমরা আগের সব ফাংশনের কাজ করতে পারি, তবে অনেক কম কোড লিখতে হয়।

অ্যারো ফাংশনে যদি একাধিক প্যারামিটার থাকে, তাহলে সবগুলা প্যারামিটারকে ব্র্যাকেটে রাখতে হয়। আর যদি একটিমাত্র প্যারামিটার হয়, তাহলে চাইলে ব্র্যাকেট () দিতে পারবি। আবার না দিলেও চলে। তাই এমন কয়েকটা উদাহরণ দেখি—

javascript

const student = {
  name: "ananta",
  age: 23,
};

const getName = (person) => person.name;
const getAge = (person) => person.age;
const age = getAge(student);
console.log(age);

Output: 23;

এখানে আমরা একটি অ্যারো ফাংশনে অবজেক্ট পাস করেছি এবং সেই অবজেক্টের age প্রোপার্টি রিটার্ন করেছি। এবার একটি অ্যারো ফাংশন তৈরি করি, যেখানে একটি array পাস করা হবে এবং সেটির একটি নির্দিষ্ট ইনডেক্স প্রিন্ট করা হবে।

javascript

const getThird = (numbers) => numbers[3];

const third = getThird([5, 34, 6, 26, 6]);
console.log(third);

Output: 26;

এখন আরেকটি উদাহরণ দেখি, যেখানে কোনো প্যারামিটার নেই—

javascript

const getPi = () => Math.PI;
console.log(getPi());

Output: 3.141592653589793;

এখন যদি আমাদের একটি বড় অ্যারো ফাংশন থাকে, যেখানে একাধিক লাইন কোড থাকে, তখন আমরা { } ব্যবহার করব।

javascript

const doMath = (x, y, z) => {
  const sum = x + y + z;
  const mult = x * y * z;
  const result = sum + mult;
  return result;
};
const result = doMath(3, 5, 8);
console.log(result);

Output: 136;

এখানে আমরা return কেন ব্যবহার করেছি? কারণ, এক লাইনের অ্যারো ফাংশনে রিটার্ন (return) না লিখলেও রিটার্ন অটোমেটিক হয়ে যাবে। অন্যদিকে arrow ফাংশনের মধ্যে সেকেন্ড ব্র্যাকেট দিয়ে যদি এক বা একাধিক লাইন কোড লিখিস, তাহলে কিন্তু অটোমেটিক কোনো কিছু রিটার্ন হবে না; বরং কিছু রিটার্ন করতে চাইলে সেটা স্পষ্টভাবে return লিখে তারপর যেটাকে রিটার্ন করতে চাস, সেটার নাম বা মান লিখে দিতে হবে।

রেগুলার ফাংশন এবং অ্যারো ফাংশনের মূল পার্থক্য

অ্যারো ফাংশন ছোট ও সহজ কাজের জন্য এবং কলব্যাক ফাংশনের জন্য উপযুক্ত। তবে যদি this কি-ওয়ার্ড প্রয়োজন হয়, তখন রেগুলার ফাংশন ভালো কাজ করে।

রেগুলার ফাংশনের নিজস্ব this থাকে, যেখানে অ্যারো ফাংশন তার আশেপাশের স্কোপ থেকে this ইনহেরিট করে। এটি অবজেক্ট বা ক্লাসের সাথে কাজ করার সময় কাজে আসে। এই কথাগুলো এখন তোর কঠিন লাগবে। তবে যখন this কি-ওয়ার্ড এবং স্কোপ নিয়ে আরেকটু জানবি, তখন এইগুলা একদম ক্লিয়ার হয়ে যাবে।

javascript

const person = {
  name: "Ananta",
  greetRegular: function () {
    console.log("Hello, " + this.name);
  },
  greetArrow: () => {
    console.log("Hello, " + this.name);
  },
};

person.greetRegular();
person.greetArrow();

Output: (Hello, Ananta);
(Hello, undefined);

ডিফল্ট প্যারামিটারসহ অ্যারো ফাংশন

javascript

  const greet = (name = "Guest") => `Hello, ${name}!`;
  console.log(greet());
  console.log(greet("Ananta"));

Output:
Hello, Guest!
Hello, Ananta!

অবজেক্ট রিটার্ন

অ্যারো ফাংশনে অবজেক্ট রিটার্ন করতে গেলে অনেক সময় ক্যাঁচাল লাগে। প্যারেনথেসিস দিয়ে এটি হ্যান্ডেল করতে হয়।

javascript

// wrong
const getObject = () => {
  key: "value";
};
console.log(getObject());

Output: undefined;

// right
const getObject = () => ({ key: "value" });
console.log(getObject());

Output: {
  key: "value";
}

Practice:

একটি array-এর প্রথম ইনডেক্সের মান রিটার্ন করবে, এমন একটা অ্যারো ফাংশন লিখ।
তিনটি সংখ্যা নিয়ে তাদের গুণফল রিটার্ন করে, এমন একটা অ্যারো ফাংশন লিখ।
এমন একটি arrow function তৈরি কর, যা কোনো প্যারামিটার নেয় না শুধু "unknown" রিটার্ন করে।
একটি object-এর মধ্যে নাম এবং পকেটে কত টাকা আছে এমন দুইটা প্রপার্টি আছে। এখন এমন একটা অ্যারো ফাংশন লিখ, যেটা টাকার পরিমাণকে 5 দিয়ে ভাগ করে ভাগফল রিটার্ন করবে।
জাভাস্ক্রিপ্টে কোনো একটা অ্যারের শেষ উপাদান পাওয়ার জন্য শেষ উপাদানের ইনডেক্স বের করতে হয়। শেষ উপাদানের ইনডেক্স বের করার সিস্টেম হচ্ছে, অ্যারের লেংথ বের করে সেটা থেকে 1 বিয়োগ করবি। এইটা আগে একটু প্র্যাকটিস করে ফেল। তারপর একটি array-এর প্রথম ও শেষ উপাদান যোগ করে যোগফল রিটার্ন করবে, এমন একটা arrow function লিখে ফেল।
এমন একটা ফাংশন তৈরি কর, যা দুইটা সংখ্যা যোগ করবে। প্রথম সংখ্যা না থাকলে 10, আর দ্বিতীয় সংখ্যা না থাকলে 5 ধরে যোগফল দেখাবে। এইটা Arrow function দিয়ে করবি।

Chapter 11: Modern JavaScript ES6 ​

11-1: বিদায় Var ​

11-2: Default ফ্রেন্ডজোন ​

11-3: Template String ডিস্টিং ডিস্টিং ​

11-4: তীর ধনুকের Arrow Function ​

Chapter 11: Modern JavaScript ES6

11-1: বিদায় Var

11-2: Default ফ্রেন্ডজোন

11-3: Template String ডিস্টিং ডিস্টিং

11-4: তীর ধনুকের Arrow Function