জাভাস্ক্রিপ্টের বেসিকস

এই নিবন্ধটি জাভাস্ক্রিপ্টের বেসিকস ব্যাখ্যা করে।

YouTube Video

Hello World! কার্যকর করা হচ্ছে।

জাভাস্ক্রিপ্টের ওভারভিউ

জাভাস্ক্রিপ্ট ওয়েব ডেভেলপমেন্টের অন্যতম বহুল ব্যবহৃত প্রোগ্রামিং ভাষা। এটি মূলত ওয়েব পৃষ্ঠায় গতিশীল উপাদান যোগ করতে ব্যবহৃত হয়, যা ব্যবহারকারী ইন্টারফেস হেরফের, ডেটা স্থানান্তর এবং অ্যানিমেশন তৈরির অনুমতি দেয়। Node.js-এর মতো প্রযুক্তি ব্যবহার করে এটি ক্লায়েন্ট সাইড (ব্রাউজারে) এবং সার্ভার সাইডেও অপারেট করতে পারে। এর সরলতা এবং নমনীয়তার কারণে এটি শিক্ষানবিসদের জন্য শেখা সহজ এবং পেশাদার ডেভেলপারদের দ্বারা ব্যাপক ব্যবহৃত হয়।

জাভাস্ক্রিপ্টে ভেরিয়েবলসমূহ

জাভাস্ক্রিপ্টের ভেরিয়েবলগুলি এমন কন্টেইনারের মতো যা ডেটা সংরক্ষণ এবং পুনর্ব্যবহার করার জন্য ব্যবহৃত হয়। ভেরিয়েবল ব্যবহার করে, আপনি আপনার প্রোগ্রামের মানগুলি রক্ষণাবেক্ষণ এবং পরিচালনা করতে পারেন।

ভেরিয়েবল ডিক্লারেশন

জাভাস্ক্রিপ্টে, ভেরিয়েবল ডিক্লার করার জন্য তিনটি কীওয়ার্ড রয়েছে।

• var: ভেরিয়েবল ডিক্লার করার একটি পুরানো পদ্ধতি, তবে এর স্কোপ পরিচালনা করা জটিল এবং সতর্কতার প্রয়োজন। এটি ফাংশন স্কোপের উপর ভিত্তি করে।

1var x = 10;

• let: ES6-এ পরিচয় করানো হয়েছিল, এটি ব্লক স্কোপ সহ ভেরিয়েবল ডিক্লার করার একটি পদ্ধতি। ইহা পুনরায় মান দেওয়া যেতে পারে কিন্তু একই স্কোপে পুনঃঘোষণা করা যাবে না।

1let y = 20;

• const: অপরিবর্তনীয় (ধ্রুবক) ভেরিয়েবল ঘোষণা করার জন্য ব্যবহৃত হয়। এটিতে ব্লক স্কোপ রয়েছে এবং ঘোষণা করার পরে এটি পুনরায় নিয়োগ বা পুনরায় ঘোষণা করা যাবে না।

1const z = 30;

স্কোপ

ভেরিয়েবলের ক্ষেত্রে স্কোপের ধারণা থাকে।

গ্লোবাল স্কোপ

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• গ্লোবাল স্কোপ ভেরিয়েবলগুলি যেকোনো জায়গা থেকে অ্যাক্সেসযোগ্য। var দিয়ে ঘোষণা করা ভেরিয়েবল গ্লোবাল বা ফাংশন স্কোপ রাখে, কিন্তু let এবং const ব্লক স্কোপ ধারণ করে।

ব্লক স্কোপ

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• ব্লক স্কোপ: let বা const দিয়ে ঘোষণা করা ভেরিয়েবল শুধুমাত্র {} (কার্লি ব্রেস) এর মধ্যে বৈধ।

• {} (কার্লি ব্র্যাকেট) এর বাইরে থেকে অ্যাক্সেস করার সময় একটি ত্রুটি ঘটে।

ফাংশন স্কোপ

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• ফাংশন স্কোপ: একটি ফাংশনের অভ্যন্তরে সংজ্ঞায়িত ভেরিয়েবল এবং ফাংশন বাইরের অংশ থেকে অ্যাক্সেস করা যায় না। var দিয়ে ফাংশনের মধ্যে ঘোষণা করা ভেরিয়েবলগুলি এই স্কোপের অন্তর্ভুক্ত।

• এই উদাহরণে, পরিবর্তনশীল functionVar কে {} (কোঁকড়া বন্ধনী) এর বাইরে থেকে অ্যাক্সেস করা যেতে পারে যতক্ষণ এটি ফাংশনের স্কোপের মধ্যে রয়েছে। অন্যদিকে, পরিবর্তনশীল functionScoped কে ফাংশন স্কোপের বাইরে থেকে অ্যাক্সেস করলে একটি ত্রুটি ঘটে।

এইভাবে, var দিয়ে ঘোষণা করা ভেরিয়েবলগুলির কেবল ফাংশন স্কোপ থাকে এবং ব্লক স্কোপ থাকে না, যা অপ্রত্যাশিত ক্ষেত্রে ব্যবহারের ঝুঁকি সৃষ্টি করতে পারে। যেসব ভেরিয়েবল পরিবর্তন হয় না তাদের জন্য const ব্যবহার করাই উত্তম এবং সাধারণত let ব্যবহার করা উচিত, যতটা সম্ভব var ব্যবহারের এড়িয়ে চলা দরকার।

ডেটা টাইপস

জাভাস্ক্রিপ্ট ভেরিয়েবলগুলি বিভিন্ন ডেটা টাইপের মান সংরক্ষণ করতে পারে। পাতার টেক্সট পরিচালনার জন্য string এবং সংখ্যাসূচক মান পরিচালনার জন্য number রয়েছে।

প্রধান ডেটা টাইপগুলি নিম্নরূপ:।

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• প্রিমিটিভ টাইপস:
  • number: সাংখ্যিক মান (পূর্ণসংখ্যা এবং দশমিক সংখ্যা) পরিচালনা করে।
  • string: অক্ষরমালার স্ট্রিং পরিচালনা করে।
  • বুলিয়ান: বুলিয়ান মানগুলো যেমন true বা false পরিচালনা করে।
  • null: স্পষ্টভাবে 'কিছুই নেই' এমন একটি মান উপস্থাপন করে।
  • undefined: এমন একটি মান যা স্বয়ংক্রিয়ভাবে এমন ভেরিয়েবলগুলিতে বরাদ্দ করা হয় যেগুলি আরম্ভ করা হয়নি।
  • Symbol: অনন্য মান তৈরি করার জন্য ব্যবহৃত একটি ডেটা টাইপ।

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• বস্তু প্রকারগুলি::
  • অবজেক্ট: একটি ডাটা কাঠামো যা একাধিক বৈশিষ্ট্য ধারণ করে।
  • অ্যারে: এমন একটি তালিকা যা একাধিক মান ধারণ করে।
  • ফাংশন: একটি ফাংশন অবজেক্ট।

ভেরিয়েবলের জন্য নিযুক্তি এবং পুনঃনিযুক্তি

let বা var দিয়ে ঘোষণা করা ভেরিয়েবল পুনরায় নিযুক্ত করা যেতে পারে, তবে const একবার ঘোষণা করার পরে পুনরায় নিযুক্ত করা যাবে না।

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

ভেরিয়েবল হোইস্টিং

জাভাস্ক্রিপ্টে এমন একটি ঘটনা রয়েছে যেখানে ভেরিয়েবল ঘোষণা তাদের স্কোপের উপরে 'হোইস্টেড' হয়। var দিয়ে ঘোষণা করা ভেরিয়েবল হোইস্টেড হয়, কিন্তু ঘোষণা করার আগে let বা const ব্যবহার করলে একটি ত্রুটি ঘটে।

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• এই ক্ষেত্রে, var দিয়ে ঘোষিত ভেরিয়েবলগুলি উত্তোলিত হয় এবং তাদের মান আউটপুট হয়।

1console.log(b); // ReferenceError
2let b = 20;

• let দিয়ে ঘোষিত ভেরিয়েবলগুলি উত্তোলিত হয় না, যার ফলে একটি ত্রুটি দেখা দেয়।

ভেরিয়েবলগুলোর সঠিক ব্যবহার

ভেরিয়েবলগুলোর সঠিক ব্যবহারের জন্য নিম্নলিখিত বিষয়গুলো বিবেচনা করুন।

• টোগ্রাফিক পরিচালকর মধ্যে const ব্যবহার করতে এবং var এড়িয়ে চলুন।
• ভেরিয়েবলের নামকরনের প্রচলিত নিয়ম অনুসরণ করুন।
  • camelCase ব্যবহার করুন, যেমন userName বা totalPrice।
  • data বা value এর মতো অস্পষ্ট নাম এড়িয়ে চলুন এবং স্পষ্ট অর্থবোধক নাম ব্যবহার করুন যাতে পাঠযোগ্যতা বাড়ে।
  • কোন ভেরিয়েবলের নাম নম্বর দিয়ে শুরু করা যাবে না, যেমন 1variable অনুমোদিত নয়।
• গ্লোবাল ভেরিয়েবল অতিরিক্ত ব্যবহার করলে স্কোপ অস্পষ্টতা সৃষ্টি হতে পারে এবং বাগ সৃষ্টি হতে পারে, তাই এটি যতটা সম্ভব এড়িয়ে চলুন।

সারসংক্ষেপ

• var: একটি পুরানো ভেরিয়েবল ঘোষণা পদ্ধতি যার ফাংশন স্কোপ রয়েছে।
• let: একটি ব্লক-স্কোপড ভেরিয়েবল যা পুনরায় নিযুক্ত করা যেতে পারে।
• const: একটি ব্লক-স্কোপড ভেরিয়েবল যা পুনরায় নিযুক্ত করা যাবে না (কনস্ট্যান্ট)।
• তাদের ডাটা প্রকার অনুযায়ী ভেরিয়েবল ব্যবহার করা এবং তাদের স্কোপ সম্পর্কে সচেতন থাকা গুরুত্বপূর্ণ।

জাভাস্ক্রিপ্টে এস্কেপ অক্ষরগুলি কী?

এস্কেপ অক্ষরগুলি বিশেষ অর্থ বোঝাতে ব্যবহার করা একটি পদ্ধতি, যা সাধারণ স্ট্রিং লিটারেলে ব্যবহৃত হয়। জাভাস্ক্রিপ্টে, স্ট্রিংয়ে বিশেষ প্রভাব দিতে বা কন্ট্রোল চরিত্র অন্তর্ভুক্ত করতে ব্যাকস্ল্যাশ \ দিয়ে এস্কেপ অক্ষরের সূচনা করা হয়। এস্কেপ অক্ষরগুলি নতুন লাইন, ট্যাব বা উদ্ধৃতি চিহ্নের মতো উপাদান স্ট্রিংয়ে অন্তর্ভুক্ত করতে কার্যকর।

এস্কেপ অক্ষরগুলির ব্যবহারের উদাহরণ

নিচে এস্কেপ অক্ষরগুলির ব্যবহার করা কিছু নমুনা কোড রয়েছে।

ডাবল এবং সিঙ্গেল কোট এস্কেপ করা

স্ট্রিংয়ের মধ্যে ডাবল বা সিঙ্গেল কোট প্রকাশ করতে এস্কেপ অক্ষর ব্যবহার করুন।

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

ব্যাকস্ল্যাশ এস্কেপ করা

স্ট্রিংয়ের মধ্যে ব্যাকস্ল্যাশ নিজেই অন্তর্ভুক্ত করতে, এটিকে \ দিয়ে এস্কেপ করুন।

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

নতুন লাইন এবং ট্যাব এস্কেপ করা

লম্বা স্ট্রিংগুলি আরও পাঠযোগ্য করার জন্য নতুন লাইন এবং ট্যাব যুক্ত করতে পারেন।

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

ইউনিকোড অক্ষর এস্কেপ করা

ইউনিকোড এস্কেপ ক্রম ব্যবহার করে আপনি ষড়দেশীয় কোডের মাধ্যমে নির্দিষ্ট অক্ষর প্রকাশ করতে পারেন।

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

নোটস

অতিরিক্ত এস্কেপ ব্যবহারে পড়ার সুবিধা কমে যেতে পারে

অতিরিক্ত এস্কেপ অক্ষর ব্যবহারে আপনার কোডের পাঠযোগ্যতা হ্রাস হতে পারে। বিশেষত লম্বা স্ট্রিংগুলিতে সাবধানতার সাথে এস্কেপ অক্ষর ব্যবহার করা গুরুত্বপূর্ণ।

টেমপ্লেট লিটারেল ব্যবহারের কথা বিবেচনা করুন

জাভাস্ক্রিপ্টে, ব্যাকটিক ব্যবহার করে টেমপ্লেট লিটারেল আপনাকে এস্কেপ অক্ষর ছাড়াই নতুন লাইন বা এম্বেড করা এক্সপ্রেশন অন্তর্ভুক্ত করতে দেয়।

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

সারসংক্ষেপ

স্ট্রিংয়ের মধ্যে বিশেষ বা কন্ট্রোল অক্ষর প্রকাশ করতে এস্কেপ অক্ষর অপরিহার্য। সিঙ্গেল বা ডাবল কোট এস্কেপ করে এবং নতুন লাইন বা ট্যাব যুক্ত করে, আপনি আরো নমনীয় স্ট্রিং তৈরি করতে পারেন। তবুও, এস্কেপ অক্ষরের অতিরিক্ত ব্যবহার কোড পড়তে অসুবিধা করতে পারে, তাই প্রয়োজনে টেমপ্লেট লিটারেল ব্যবহারের পরামর্শ দেয়া হয়।

জাভাস্ক্রিপ্টের সংস্করণগুলি

জাভাস্ক্রিপ্টের একটি মানক স্পেসিফিকেশন আছে, যা বলা হয় ECMAScript (ES)। জাভাস্ক্রিপ্ট এই মানকটির ওপর ভিত্তি করে বিকশিত হয়েছে। নিচে এর প্রধান সংস্করণগুলির সংক্ষিপ্ত বিবরণ দেওয়া হলো।

• ES3 (১৯৯৯)

  প্রথম বৃহত্তর পরিসরে গৃহীত সংস্করণ। মৌলিক সিনট্যাক্স এবং বৈশিষ্ট্যগুলি প্রতিষ্ঠিত হয়েছিল।

• ES5 (২০০৯)

  strict mode চালু হয়েছিল, এবং Array.prototype.forEach, Object.keys ইত্যাদির মতো নতুন বৈশিষ্ট্য যোগ করা হয়েছিল।

• ES6 / ES2015 (২০১৫)

  জাভাস্ক্রিপ্টে একটি বড় আপডেট করা হয়েছে। আধুনিক জাভাস্ক্রিপ্টের ভিত্তিভূমি হিসাবে let, const, arrow functions, classes, promises, modules ইত্যাদি অনেক বৈশিষ্ট্য পরিচয় করানো হয়েছিল।

• ES7 / ES2016 (২০১৬)

  Array.prototype.includes এবং Exponentiation Operator (**) যোগ করা হয়েছিল।

• ES8 / ES2017 (২০১৭)

  async/await পরিচয় করানো হয়েছিল, যা অ্যাসিঙ্ক্রোনাস প্রক্রিয়া লেখা সহজ করে তোলে।

• ES9 / ES2018 (২০১৮)

  অ্যাসিঙ্ক্রোনাস ইটারেটর এবং Rest/Spread Properties যোগ করা হয়েছিল।

• ES10 / ES2019 (২০১৯)

  flatMap এবং Object.fromEntries যোগ করা হয়েছিল।

• ES11 / ES2020 (২০২০)

  Optional Chaining (?.) এবং Nullish Coalescing Operator (??) যোগ করা হয়েছিল, যা সহজ এবং নিরাপদভাবে কোড লেখার সুযোগ দেয়।

• ES12 / ES2021 (2021)

  String.prototype.replaceAll এবং Promise.any, প্রভৃতির মতো বৈশিষ্ট্যগুলো যুক্ত করা হয়েছে।

• ES13 / ES2022 (2022)

  Array.prototype.at এবং ক্লাসের private ফিল্ড (#field), প্রভৃতিগুলো যুক্ত করা হয়েছে।

• ES14 / ES2023 (2023)

  Array.prototype.toSorted এবং Symbol.prototype.description, প্রভৃতিগুলো যুক্ত করা হয়েছে।

• ES15 / ES2024 (2024)

  Promise পরিচালনা সহজতর করার জন্য Promise.withResolvers এবং রিসাইজযোগ্য ArrayBuffer যুক্ত করা হয়েছে, প্রভৃতির পাশাপাশি।

বর্তমান জাভাস্ক্রিপ্ট প্রতি বছর আপডেট করা হয় এবং নতুন ফিচারগুলি সর্বশেষ সংস্করণেও যোগ করা হয়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video