এই জাভাস্ক্রিপ্ট:একবার এবং সবার জন্য এটি বুঝুন

এই কীওয়ার্ড জাভাস্ক্রিপ্ট বোঝা

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

এখন, আপনি জাভাস্ক্রিপ্ট মাস্টার হওয়ার আগে এবং ব্রাঞ্চ আউট করার আগে, আপনাকে অবশ্যই মৌলিক বিষয়গুলি শিখতে হবে। এই কীওয়ার্ড সম্ভবত আপনার শেখার তালিকায় এক নম্বর হওয়া উচিত।

আসলে কি এটি?

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

এর দুটি প্রধান ব্যবহার রয়েছে। আসুন কিছু উদাহরণ সহ সেগুলি অন্বেষণ করি৷

এটি দিয়ে অবজেক্ট তৈরি করা

function Book(title, author, genre) {
  this.title = title;
  this.author = author;
  this.genre = genre;
}
const book1 = new Book("Lord Of The Rings", "J.R.R. Tolkien", "Fantasy");
const book2 = new Book("Tools Of Titans", "Tim Ferriss", "Self-help");
 
console.log(book1);
console.log(book2);

উপরের কোড নিম্নলিখিত আউটপুট উত্পাদন করে:

এখানে, আমরা একটি কনস্ট্রাক্টর ফাংশন সংজ্ঞায়িত করেছি যেখান থেকে আমরা বইয়ের বস্তু তৈরি করি যা একটি শিরোনাম, একটি লেখক এবং একটি জেনারকে প্যারামিটার হিসাবে গ্রহণ করে।

কনস্ট্রাক্টর ফাংশন হল একটি অবজেক্ট "ব্লুপ্রিন্ট" ফাংশন যা থেকে আমরা প্রদত্ত নামের বস্তু তৈরি করতে পারি (আমাদের ক্ষেত্রে বই)।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

আমরা মাইবুক নামে একটি অবজেক্ট তৈরি করেছি এবং প্রয়োজনীয় প্যারামিটার পাস করেছি (যখন আমরা একটি ফাংশনকে কল করি বা আহ্বান করি তখন এটিকে সংজ্ঞায়িত করার পরামিতির বিপরীতে আর্গুমেন্ট বলে)।

শেষে আমরা myBook লগ ইন করেছি, এবং বস্তুটিকে এর সংশ্লিষ্ট বৈশিষ্ট্য সহ ফিরে পেয়েছি। এইভাবে, প্রতিটি নতুন বই অবজেক্ট যা আমরা তৈরি করি তা পাস করা মানগুলি পায়৷

এটি দিয়ে বৈশিষ্ট্যগুলি অ্যাক্সেস করা :

const girl = {
  name: "Sarah",
  age: 26,
  introduce() {
    console.log(
      "Hi! " + "I'm " + this.name + " and I'm " + this.age + " years old."
    );
  },
};

এখানে আমরা মেয়ে নামক একটি পরিবর্তনশীলকে সংজ্ঞায়িত করেছি যা নাম এবং বয়স বৈশিষ্ট্য সহ একটি বস্তু ধারণ করে এবং একটি পরিচয় ফাংশন।

ফাংশনটি বস্তুর বৈশিষ্ট্যগুলি ব্যবহার করে একটি সূচনা বাক্য লগ করে, এটি দিয়ে তাদের অ্যাক্সেস করে .wanted_property.

এটি এবং জাভাস্ক্রিপ্টে সুযোগ

ডিফল্টরূপে, যখন গ্লোবাল স্কোপে ব্যবহার করা হয়, যার অর্থ একটি সংজ্ঞায়িত ফাংশন বা বস্তুর ভিতরে নয়, এটি গ্লোবাল অবজেক্ট উল্লেখ করবে। ব্রাউজারে, উইন্ডো হল বিশ্বব্যাপী বস্তু।

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

আপনি "খোলে" যা কিছু লিখুন, আপনি এমনভাবে পড়তে পারেন যেন একটি জানালা আছে। তার আগে লেখা। আসুন এই কোড স্নিপেটটি একবার দেখে নেওয়া যাক:

function returnThis() {
  return this;
}

প্রথমে আমরা বৈশ্বিক সুযোগে returnThis নামক একটি ফাংশন সংজ্ঞায়িত করি যা this এর মান প্রদান করে . তারপর আমরা returnThis() লিখে এটিকে কল করি .

যেহেতু এটি বিশ্বব্যাপী ব্যাপ্ত, তাই আমরা এটিকে window.returnThis() হিসাবে দেখতে পারি , যা বিন্দুর বাম দিকে আমাদের কাছে ফিরে আসে।

অবজেক্ট ফাংশন ওরফে পদ্ধতি

যদি আমরা এখন একটি নতুন বস্তুকে সংজ্ঞায়িত করি যার ভিতরে একই ফাংশন রয়েছে (একটি অবজেক্ট পদ্ধতি বলা হয়) এবং আমরা এটিকে আবার কল করি, আমরা সেই বস্তুটি (কোঁকড়া ধনুর্বন্ধনী দ্বারা চিহ্নিত) আমাদের কাছে ফিরে পাব।

const object = {
  returnThis() {
    return this;
  },
};
object.returnThis();

এর এটি এবং এটি তিনটি সমাধান

যদি একটি ফাংশন সরাসরি একটি বস্তুর সাথে আবদ্ধ না হয়, তাহলে এটি ফাংশনের ভিতরে গ্লোবাল অবজেক্ট উল্লেখ করবে।

const weirdBehaviorObject = {
        directlyTiedFunction() {
          return this;
        },
        directlyTiedOuterFunction() {
          return function indirectNestedFunction() {
            return this;
          };
        },
      };

আসুন এটি ব্রাউজারে চালান এবং দেখুন আমরা কী পাই:

আমরা এটি ফেরত একটি ফাংশন সহ একটি বস্তুকে সংজ্ঞায়িত করেছি আবার, এবং অন্য একটি যা একটি অভ্যন্তরীণ ফাংশন প্রদান করে, যা তারপর এটি প্রদান করে .

যখন আমরা indirectNestedFunction কল করতে চাই, আমরা প্রথমে () লিখি একবার বাইরের ফাংশনকে কল করতে যা ভিতরের রিটার্ন করে।

তারপরে আমরা ভিতরেরটিকে আরেকটি () দিয়ে কল করি যা জানালা ফিরিয়ে দেয়।

এটি জাভাস্ক্রিপ্টের রহস্যময় আচরণগুলির মধ্যে একটি, এবং এটি কিছু অপ্রত্যাশিত এবং অবাঞ্ছিত বিস্ময়ের পথ দেয়।

সৌভাগ্যবশত, এই সমস্যা সমাধানের উপায় আছে. প্রথমটি হল একটি ক্লোজার তৈরি করে, যেটি ES6-এর আগে করা হয়েছিল। দ্বিতীয় উপায় হ'ল তীর ফাংশন ব্যবহার করে, এবং তৃতীয়টি হল বাইন্ড পদ্ধতি ব্যবহার করে, যা কল এবং প্রয়োগ পদ্ধতিগুলির সাথে ঘনিষ্ঠভাবে সম্পর্কিত৷

#1 সমাধান করা এটি বন্ধের সাথে

একটি ক্লোজার একটি স্থায়ী মেমরি স্টোর, যার অর্থ ফাংশনটি কার্যকর করা শেষ হলে ভেরিয়েবলটি অদৃশ্য হয়ে যায় না। এটি জাভাস্ক্রিপ্ট ইঞ্জিন দ্বারা তৈরি করা হয় যখন একটি নেস্টেড ফাংশন একটি বহিরাগত ফাংশনে সংজ্ঞায়িত একটি ভেরিয়েবলকে উল্লেখ করে যাতে বাইরের ফাংশনটি চালানো শেষ হয়ে গেলেও এটিতে অ্যাক্সেস থাকে। আমাদের এটি এর সাথে এটি দেখতে কেমন তা এখানে উদাহরণ:

const objectWithClosure = {
        closureFunction() {
          const self = this;
          return function enclosedFunction() {
            return self;
          };
        },
      };

আমরা একটি অবজেক্টকে একটি ক্লোজার ফাংশন দিয়ে সংজ্ঞায়িত করেছি, যেখানে আমরা আমাদের এটি সংরক্ষণ করার জন্য স্ব নামক একটি পরিবর্তনশীলকে সংজ্ঞায়িত করেছি মান যেহেতু ক্লোজার ফাংশন সরাসরি সম্বলিত বস্তুর সাথে আবদ্ধ, তাই এই এর মান এটা বোঝায়। এখন, আমাদের আবদ্ধ ফাংশনে, এটি সাধারণত উইন্ডো অবজেক্ট উল্লেখ করবে। যেহেতু আমরা এটি অ্যাক্সেস করতে একটি বন্ধ ব্যবহার করেছি৷ ধারণকারী ফাংশন থেকে, আমরা কলিং অবজেক্টটিকে এর মান হিসাবে সংরক্ষণ করতে সক্ষম।

#2 সমাধান করা এটি তীর ফাংশন সহ

দ্বিতীয় সমাধানটি তর্কযোগ্যভাবে ES6 এর সাথে আসা সেরা বৈশিষ্ট্যগুলির মধ্যে একটি ব্যবহার করছে, যা তীর ফাংশন।

তীর ফাংশন ফাংশন লেখার জন্য আরও সংক্ষিপ্ত বাক্য গঠন উপস্থাপন করে। তা ছাড়াও, তারা এটি খোঁজার সুযোগে এক স্তর উপরে দেখবে এর মধ্যে যে ফাংশনটি রয়েছে তার অর্থ।

তাই যদি আমরা আমাদের বস্তুটিকে এভাবে সংজ্ঞায়িত করি:

const arrowFunctionObject = {
        outerFunc() {
          return () => this;
        },
      };

আমরা দেখতে পাচ্ছি যে তীর ফাংশন প্রকৃত বস্তু প্রদান করে, উইন্ডো নয়।

কারণ এটি বাইরের ফাংশনের দিকে তাকাচ্ছে যা এটিকে বলে, যেখানে এটি arrowFunctionObject বোঝায়। সুতরাং, তীর ফাংশন এক ধরনের অন্তর্নির্মিত বন্ধ আছে.

নেস্টেড অ্যারো ফাংশন

অবশ্যই, এটি জাভাস্ক্রিপ্ট, তাই এখানে আরেকটি পাওয়া যাচ্ছে। এটি এমন কিছু যা আপনি সম্ভবত কোনও প্রযুক্তিগত সাক্ষাত্কারের বাইরে কখনই সম্মুখীন হবেন না, তবে এটি জানার যথেষ্ট কারণ।

আমরা একটি নিয়মিত ফাংশন ভিতরে একটি তীর ফাংশন নেস্ট হলে কি হবে, এবং আবার অন্য ফাংশন ভিতরে? এটি এই মত দেখায়:

const arrowNestedInRegularFunctionObject = {
        outerFunction() {
          return function regularFunction() {
            return () => this;
          };
        },
      };

আমাদের অবজেক্টের একটি বাহ্যিক ফাংশন আছে যা কল করা হলে, ভিতরের, নিয়মিত ফাংশন প্রদান করে।

আমরা তারপরে রেগুলার ফাংশনকে কল করি এবং এটি সবচেয়ে ভিতরের তীর ফাংশন প্রদান করে।

এখন, এটিকে কল করার সময়, এটি উইন্ডো অবজেক্টটি ফেরত দেয়।

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

যাইহোক, যদি আমরা একটি তীর ফাংশনের ভিতরে একটি তীর ফাংশন নেস্ট করি, একটি নিয়মিত ফাংশনের ভিতরে, আমরা প্রত্যাশিত ফলাফল পাব, যা প্রকৃত ধারণকারী বস্তু।

const nestedArrowFunctionObject = {
        outerFunction() {
          return () => {
            return () => this;
          };
        },
      };

এই ক্ষেত্রে ভিতরের তীর ফাংশন বাইরের এক পর্যন্ত দেখায়. বাইরেরটি একটি তীর ফাংশন তাই এটি আরও একটি স্তর দেখায়। নিয়মিত আউটার ফাংশন সরাসরি কলিং

অবজেক্ট, এবং ফলস্বরূপ, অবজেক্ট হল যা এটি হিসাবে ফিরে আসে ।

#3 সমাধান করা এটি বাঁধাই পদ্ধতির সাথে

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

const arrowNestedInRegularFunctionObject = {
        outerFunction() {
          return function regularFunction() {
            return () => this;
          }.bind(arrowNestedInRegularFunctionObject);
        },
      };

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

এটি আপনি যখন JavaScript বোঝেন তখন এটি কঠিন নয়

উফফ! যে বেশ একটি ডুব ছিল. এখন, আপনি জিজ্ঞাসা করতে পারেন, কেন এটি নিয়ে সমস্ত ঝামেলা এবং বিভ্রান্তি ?

কারণ হল, জাভাস্ক্রিপ্টের অন্য সব কিছুর বিপরীতে, এটি গতিশীলভাবে ব্যাপ্ত হয়। এর মানে হল যে JavaScript ইঞ্জিন কি এটি সংজ্ঞায়িত করে কোডটি চালানো হলে রানটাইমে প্রতিনিধিত্ব করে, কোথা থেকে এবং কে কল করছে তা দেখে।

এর বিপরীতে, জাভাস্ক্রিপ্টের অন্য সবকিছুই লেক্সিক্যালি স্কোপড, যার মানে কোড লেখার সময় ভ্যারিয়েবল যেখানে সংজ্ঞায়িত করা হয় সেখানে এর মান সংজ্ঞায়িত করা হয়।

এর জন্য ধন্যবাদ , আমরা একবার একটি বস্তু "ব্লুপ্রিন্ট" তৈরি করতে পারি এবং গতিশীলভাবে বিভিন্ন সম্পত্তি মান সহ বস্তু তৈরি করতে পারি যেমনটি আমরা আমাদের বইয়ের উদাহরণে দেখেছি।

আমরা এমন পদ্ধতিও তৈরি করতে পারি যেগুলি এটি দিয়ে একটি বস্তুর বৈশিষ্ট্যগুলিকে প্রকাশ এবং ম্যানিপুলেট করে .ওয়ান্টেড_প্রপার্টি।

আমরা JavaScript এর quirks চারপাশে কাজ করতে পারি, এবং আত্মবিশ্বাসের সাথে এটির আচরণ নির্দেশ করতে পারি এবং প্রত্যাশিত ফলাফল তৈরি করতে পারি।

এখন আপনি এটি বুঝতে পেরেছেন JavaScript-এ, সেইসাথে আরও কয়েকটি মৌলিক ধারণা, আপনি যেতে পারেন এবং পরীক্ষা, অনুশীলন এবং আরও আত্মবিশ্বাসের সাথে JavaScript আয়ত্তের দিকে পদক্ষেপ নিতে পারেন।

আপনি এটি পেয়েছেন !