ট্র্যাক
/
JavaScript
JavaScript
/
অনুশীলনী
/
স্থানাঙ্ক রূপান্তর
স্থানাঙ্ক রূপান্তর

স্থানাঙ্ক রূপান্তর

লার্নিং অনুশীলনী

ভূমিকা

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

// Top-level declarations are global-scope
const dozen = 12;

{
  // Braces create a new block-scope
  // Referencing the outer variable is a closure.
  const twoDozen = dozen * 2;
}

// Because of the block-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

{} বন্ধনী ছাড়াও ফাংশন (এবং ক্লাস) নতুন স্কোপ তৈরি করে, এবং মানগুলোকে ঘিরে রাখতে পারে:

const dozen = 12;

// Functions create a new function-scope and block-scope.
// Referencing the outer variable here is a closure.
function nDozen(n) {
  // This is declared inside the function scope, and uses the top-level scope.
  // This works, and encloses the value 12.
  const twoDozen = dozen * 2;

  // This only uses the locally declared variable and the passed argument to the parameter `n`
  return (twoDozen / 2) * n;
}

// Because of the function-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

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

স্টেট সংরক্ষণ ও মান হস্তান্তরের জন্য ক্লোজার

মিউটেবল ভ্যারিয়েবল ডিক্লারেশন (যেমন let বা var) ব্যবহার করলে কিছু স্টেট সংরক্ষণ করা যায়:

let counter = 0;

// This function closure increments the counter's state in the outer lexical context.
// This way the counter can be shared between many calling contexts.
export function increment() {
  counter += 1;
  return counter;
}

increment();
// => 1

counter;
// => 1

স্টেট লিক না করে মান ঘিরে রাখা

দুটি ধারণা একসাথে করলে, অর্থাৎ স্টেট সংরক্ষণের জন্য একটি মান ঘিরে রাখা এবং ঘেরা মানগুলো যেন বাইরে লিক না করে, প্রাইভেট মান তৈরি করা সম্ভব।

সবচেয়ে কমন পদ্ধতি হলো এমন একটি ফাংশন বানানো, যা এমন একটি ফাংশন রিটার্ন করে যেটি কিছু স্টেট ঘিরে রাখে।

export function makeCounter() {
  let counter = 0;

  // This returns a new function that encloses the local variable counter
  return function increment() {
    counter += 1;
    return counter;
  };
}

// Counter did not leak
counter;
// => Uncaught ReferenceError: counter is not defined

// This creates a new counter.
// This assigns the increment function to the variable myFirstCounter.
const myFirstCounter = makeCounter();

typeof myFirstCounter;
// => function

myFirstCounter.name;
// => increment

myFirstCounter();
// => 1
myFirstCounter();
// => 2

// This creates new counter (with new, separate local state / enclosed counter variable)
const mySecondCounter = makeCounter();

mySecondCounter();
// => 1

// It does not affect the first counter.

myFirstCounter();
// => 3
Note

অনেক প্রোগ্রামার ক্লোজারকে কঠিন ধারণা মনে করেন, আর একটি ফাংশন থেকে ফাংশন রিটার্ন করা সব প্রোগ্রামিং ভাষায় কমন নয়, এমনকি সম্ভবও নয়। আরও পড়ার উপকরণ চাইলে MDN-এর ক্লোজার বিষয়ক গাইড বেশ বিস্তারিত।

নির্দেশনা

আপনার ডিজাইন কোম্পানি মূলত ওয়েব পেজ তৈরির জন্য CSS ট্রান্সফরমেশন নিয়ে কাজ করে আসছে। কিছু আলোচনার পর সিদ্ধান্ত হয় যে কিছু গণনা গতিশীলভাবে করার জন্য JavaScript ব্যবহার শুরু করা হবে। আপনার দলের কয়েকজন সদস্য JavaScript-এ কম অভিজ্ঞ, তাই আপনি {x, y} স্থানাঙ্ক জোড়ার জন্য পুনরায় ব্যবহারযোগ্য ট্রান্সফরমেশন তৈরি করতে একটি ফাংশন ক্লোজার ব্যবহার করার সিদ্ধান্ত নেন।

1. স্থানাঙ্ক ট্রান্সলেট করুন

translate2d ফাংশনটি ইমপ্লিমেন্ট করুন, যা একটি ক্লোজার ব্যবহার করে একটি স্থানাঙ্ক জোড়ার পুনরাবৃত্তিযোগ্য 2d ট্রান্সলেশন করার একটি ফাংশন রিটার্ন করে।

জ্যামিতিতে, ট্রান্সলেশন বলতে বিন্দু, ভেক্টর বা আকৃতিকে একই দিকে একই দূরত্বে সরানো বোঝায়। এটিকে প্রতিটি বিন্দুর সাথে একটি ধ্রুবক যোগ করা হিসেবেও ব্যাখ্যা করা যায়।

const moveCoordinatesRight2Px = translate2d(2, 0);
const result = moveCoordinatesRight2Px(4, 8);
// result => [6, 8]

2. স্থানাঙ্ক স্কেল করুন

scale2d ফাংশনটি ইমপ্লিমেন্ট করুন, যা একটি ক্লোজার ব্যবহার করে একটি স্থানাঙ্ক জোড়ার পুনরাবৃত্তিযোগ্য 2d স্কেল করার একটি ফাংশন রিটার্ন করে।

জ্যামিতিতে, সমান স্কেলিং বলতে একই দিকে ভেক্টর বা আকৃতিকে বড় বা ছোট করা বোঝায়। এটিকে প্রতিটি বিন্দুকে একটি ধ্রুবক (স্কেলিং ফ্যাক্টর) দিয়ে গুণ করা হিসেবে ব্যাখ্যা করা যায়।

এই অনুশীলনীর জন্য ধরে নিন যে কেবল ধনাত্মক স্কেলিং মানই ব্যবহার হবে।

const doubleScale = scale2d(2, 2);
const result = doubleScale(6, -3);
// result => [12, -6]

3. ট্রান্সফরমেশন ফাংশন কম্পোজ করুন

পুনরাবৃত্তিযোগ্য ট্রান্সফরমেশন করার জন্য দুটি ট্রান্সফরমেশন ফাংশন একত্রিত করুন। একে প্রায়ই ফাংশন কম্পোজিশন বলা হয়, যেখানে প্রথম ফাংশন 'f(x)'-এর ফলাফল দ্বিতীয় ফাংশন 'g(x)'-এর ইনপুট হিসেবে ব্যবহৃত হয়।

const moveCoordinatesRight2Px = translate2d(2, 0);
const doubleCoordinates = scale2d(2, 2);
const composedTransformations = composeTransform(
  moveCoordinatesRight2Px,
  doubleCoordinates,
);
const result = composedTransformations(0, 1);
// result => [4, 2]

4. ফাংশনের ফলাফল সংরক্ষণ করুন

memoizeTransform ফাংশনটি ইমপ্লিমেন্ট করুন। এটি মেমোইজ করার জন্য একটি ফাংশন নেয়, তারপর এমন একটি নতুন ফাংশন রিটার্ন করে যা সরবরাহ করা ফাংশনের ইনপুটগুলো মনে রাখে, যাতে শেষ রিটার্ন ভ্যালুটি "মনে রাখা" যায় এবং একই আর্গুমেন্ট দিয়ে আবার কল করা হলে সেটি কেবল একবারই গণনা করা হয়।

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

const tripleScale = scale2d(3, 3);
const memoizedScale = memoizeTransform(tripleScale);

memoizedScale(4, 3); // => [12, 9], this is computed since it hasn't been computed before for the arguments
memoizedScale(4, 3); // => [12, 9], this is remembered, since it was computed already
GitHub-এর মাধ্যমে সম্পাদনা করুন লিংকটি একটি নতুন উইন্ডো বা ট্যাবে খোলে
JavaScript Exercism

স্থানাঙ্ক রূপান্তর শুরু করতে প্রস্তুত?

Exercism-এ সাইন আপ করুন, JavaScript ট্র্যাকের 37টি কনসেপ্ট159টি অনুশীলনী আর সত্যিকারের মানুষের মেন্টরিং দিয়ে শিখুন ও দক্ষ হয়ে উঠুন, সম্পূর্ণ বিনামূল্যে।