You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
208 lines
21 KiB
208 lines
21 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
|
|
"translation_date": "2025-08-25T21:40:52+00:00",
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
"language_code": "bn"
|
|
}
|
|
-->
|
|
# জাভাস্ক্রিপ্ট বেসিকস: মেথড এবং ফাংশন
|
|
|
|
|
|
> স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
## প্রাক-লেকচার কুইজ
|
|
[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/9)
|
|
|
|
কোড লেখার সময় আমরা সবসময় চাই আমাদের কোডটি পড়তে সহজ এবং বোধগম্য হোক। যদিও এটি প্রথমে অদ্ভুত শোনাতে পারে, কোড সাধারণত লেখার চেয়ে অনেক বেশি বার পড়া হয়। ডেভেলপারদের টুলবক্সে একটি গুরুত্বপূর্ণ উপকরণ যা কোড রক্ষণাবেক্ষণযোগ্য করে তোলে তা হলো **ফাংশন**।
|
|
|
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "মেথড এবং ফাংশন")
|
|
|
|
> 🎥 উপরের ছবিতে ক্লিক করুন মেথড এবং ফাংশন সম্পর্কে একটি ভিডিও দেখার জন্য।
|
|
|
|
> আপনি এই পাঠটি [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) এ নিতে পারেন!
|
|
|
|
## ফাংশন
|
|
|
|
মূলত, একটি ফাংশন হলো কোডের একটি ব্লক যা আমরা প্রয়োজন অনুযায়ী চালাতে পারি। এটি এমন পরিস্থিতির জন্য আদর্শ যেখানে একই কাজ বারবার করতে হয়; একাধিক স্থানে একই লজিক ডুপ্লিকেট করার পরিবর্তে (যা আপডেট করা কঠিন হয়ে পড়ে), আমরা এটি একটি কেন্দ্রীয় স্থানে রাখতে পারি এবং যখনই প্রয়োজন তখন এটি কল করতে পারি - এমনকি এক ফাংশন থেকে অন্য ফাংশনও কল করা যায়!
|
|
|
|
একটি ফাংশনের নাম দেওয়ার ক্ষমতাও সমান গুরুত্বপূর্ণ। যদিও এটি তুচ্ছ মনে হতে পারে, নামটি কোডের একটি অংশকে দ্রুত ডকুমেন্ট করার একটি উপায় প্রদান করে। আপনি এটি একটি বোতামের লেবেলের মতো ভাবতে পারেন। যদি আমি একটি বোতামে ক্লিক করি যেখানে লেখা আছে "Cancel timer", আমি জানি এটি ঘড়ি বন্ধ করবে।
|
|
|
|
## ফাংশন তৈরি এবং কল করা
|
|
|
|
ফাংশনের সিনট্যাক্স নিম্নরূপ দেখায়:
|
|
|
|
```javascript
|
|
function nameOfFunction() { // function definition
|
|
// function definition/body
|
|
}
|
|
```
|
|
|
|
যদি আমি একটি ফাংশন তৈরি করতে চাই যা একটি শুভেচ্ছা বার্তা প্রদর্শন করবে, এটি এমন দেখাতে পারে:
|
|
|
|
```javascript
|
|
function displayGreeting() {
|
|
console.log('Hello, world!');
|
|
}
|
|
```
|
|
|
|
যখনই আমরা আমাদের ফাংশন কল (অথবা ইনভোক) করতে চাই, আমরা ফাংশনের নামের পরে `()` ব্যবহার করি। এটি লক্ষণীয় যে আমাদের ফাংশনটি আমরা কল করার আগে বা পরে সংজ্ঞায়িত করা যেতে পারে; জাভাস্ক্রিপ্ট কম্পাইলার এটি খুঁজে নেবে।
|
|
|
|
```javascript
|
|
// calling our function
|
|
displayGreeting();
|
|
```
|
|
|
|
> **NOTE:** একটি বিশেষ ধরনের ফাংশন রয়েছে যা **মেথড** নামে পরিচিত, যা আপনি ইতিমধ্যেই ব্যবহার করছেন! আসলে, আমরা এটি আমাদের উপরের ডেমোতে দেখেছি যখন আমরা `console.log` ব্যবহার করেছি। মেথড এবং ফাংশনের মধ্যে পার্থক্য হলো মেথড একটি অবজেক্টের সাথে সংযুক্ত থাকে (`console` আমাদের উদাহরণে), যেখানে ফাংশন ফ্রি ফ্লোটিং হয়। অনেক ডেভেলপার এই শব্দগুলোকে একে অপরের পরিবর্তে ব্যবহার করেন।
|
|
|
|
### ফাংশনের সেরা অনুশীলন
|
|
|
|
ফাংশন তৈরি করার সময় কিছু সেরা অনুশীলন মনে রাখা গুরুত্বপূর্ণ:
|
|
|
|
- সর্বদা বর্ণনামূলক নাম ব্যবহার করুন যাতে আপনি জানেন ফাংশনটি কী করবে
|
|
- শব্দগুলো একত্রিত করতে **camelCasing** ব্যবহার করুন
|
|
- আপনার ফাংশনগুলোকে একটি নির্দিষ্ট কাজের উপর কেন্দ্রীভূত রাখুন
|
|
|
|
## ফাংশনে তথ্য প্রেরণ
|
|
|
|
একটি ফাংশনকে আরও পুনঃব্যবহারযোগ্য করতে আপনি প্রায়ই এতে তথ্য প্রেরণ করতে চাইবেন। যদি আমরা আমাদের উপরের `displayGreeting` উদাহরণটি বিবেচনা করি, এটি শুধুমাত্র **Hello, world!** প্রদর্শন করবে। এটি খুব বেশি কার্যকরী ফাংশন নয়। যদি আমরা এটি একটু বেশি নমনীয় করতে চাই, যেমন কাউকে শুভেচ্ছা জানানোর জন্য নাম নির্দিষ্ট করার অনুমতি দেওয়া, তাহলে আমরা একটি **প্যারামিটার** যোগ করতে পারি। একটি প্যারামিটার (যাকে কখনও কখনও **আর্গুমেন্ট** বলা হয়) হলো ফাংশনে পাঠানো অতিরিক্ত তথ্য।
|
|
|
|
প্যারামিটারগুলো সংজ্ঞা অংশে বন্ধনীতে তালিকাভুক্ত থাকে এবং কমা দিয়ে পৃথক করা হয়, যেমন:
|
|
|
|
```javascript
|
|
function name(param, param2, param3) {
|
|
|
|
}
|
|
```
|
|
|
|
আমরা আমাদের `displayGreeting` আপডেট করতে পারি যাতে এটি একটি নাম গ্রহণ করে এবং তা প্রদর্শন করে।
|
|
|
|
```javascript
|
|
function displayGreeting(name) {
|
|
const message = `Hello, ${name}!`;
|
|
console.log(message);
|
|
}
|
|
```
|
|
|
|
যখন আমরা আমাদের ফাংশন কল করতে চাই এবং প্যারামিটার প্রেরণ করতে চাই, আমরা এটি বন্ধনীর মধ্যে নির্দিষ্ট করি।
|
|
|
|
```javascript
|
|
displayGreeting('Christopher');
|
|
// displays "Hello, Christopher!" when run
|
|
```
|
|
|
|
## ডিফল্ট মান
|
|
|
|
আমরা আমাদের ফাংশনকে আরও নমনীয় করতে আরও প্যারামিটার যোগ করতে পারি। কিন্তু যদি আমরা চাই না যে প্রতিটি মান নির্দিষ্ট করা বাধ্যতামূলক হোক? আমাদের শুভেচ্ছা উদাহরণ ধরে রাখলে, আমরা নামটিকে প্রয়োজনীয় রাখতে পারি (আমাদের জানতে হবে কাকে শুভেচ্ছা জানানো হচ্ছে), কিন্তু আমরা চাই শুভেচ্ছাটি ইচ্ছামতো কাস্টমাইজ করার অনুমতি দিতে। যদি কেউ এটি কাস্টমাইজ করতে না চায়, আমরা একটি ডিফল্ট মান প্রদান করি। একটি প্যারামিটারে ডিফল্ট মান প্রদান করতে, আমরা এটি একটি ভেরিয়েবলের মান সেট করার মতো করে সেট করি - `parameterName = 'defaultValue'`। একটি সম্পূর্ণ উদাহরণ দেখতে:
|
|
|
|
```javascript
|
|
function displayGreeting(name, salutation='Hello') {
|
|
console.log(`${salutation}, ${name}`);
|
|
}
|
|
```
|
|
|
|
যখন আমরা ফাংশন কল করি, তখন আমরা সিদ্ধান্ত নিতে পারি যে আমরা `salutation` এর জন্য একটি মান সেট করব কিনা।
|
|
|
|
```javascript
|
|
displayGreeting('Christopher');
|
|
// displays "Hello, Christopher"
|
|
|
|
displayGreeting('Christopher', 'Hi');
|
|
// displays "Hi, Christopher"
|
|
```
|
|
|
|
## রিটার্ন মান
|
|
|
|
এখন পর্যন্ত আমরা যে ফাংশন তৈরি করেছি তা সর্বদা [console](https://developer.mozilla.org/docs/Web/API/console) এ আউটপুট দেবে। কখনও কখনও এটি ঠিক আমাদের যা প্রয়োজন তা হতে পারে, বিশেষত যখন আমরা এমন ফাংশন তৈরি করি যা অন্যান্য সার্ভিস কল করবে। কিন্তু যদি আমি একটি হেল্পার ফাংশন তৈরি করতে চাই যা একটি গণনা সম্পন্ন করবে এবং মানটি ফেরত দেবে যাতে আমি এটি অন্য কোথাও ব্যবহার করতে পারি?
|
|
|
|
আমরা এটি একটি **রিটার্ন মান** ব্যবহার করে করতে পারি। একটি রিটার্ন মান ফাংশন দ্বারা ফেরত দেওয়া হয় এবং এটি একটি ভেরিয়েবলে সংরক্ষণ করা যেতে পারে যেমন আমরা একটি স্ট্রিং বা সংখ্যার মতো একটি স্থির মান সংরক্ষণ করতে পারি।
|
|
|
|
যদি একটি ফাংশন কিছু ফেরত দেয় তবে `return` কীওয়ার্ড ব্যবহার করা হয়। `return` কীওয়ার্ডটি কী ফেরত দেওয়া হচ্ছে তার একটি মান বা রেফারেন্স আশা করে, যেমন:
|
|
|
|
```javascript
|
|
return myVariable;
|
|
```
|
|
|
|
আমরা একটি ফাংশন তৈরি করতে পারি যা একটি শুভেচ্ছা বার্তা তৈরি করবে এবং মানটি কলকারীকে ফেরত দেবে।
|
|
|
|
```javascript
|
|
function createGreetingMessage(name) {
|
|
const message = `Hello, ${name}`;
|
|
return message;
|
|
}
|
|
```
|
|
|
|
যখন আমরা এই ফাংশন কল করব, আমরা মানটি একটি ভেরিয়েবলে সংরক্ষণ করব। এটি অনেকটা এমনভাবে কাজ করে যেমন আমরা একটি স্থির মান সেট করি (যেমন `const name = 'Christopher'`)।
|
|
|
|
```javascript
|
|
const greetingMessage = createGreetingMessage('Christopher');
|
|
```
|
|
|
|
## ফাংশনকে ফাংশনের প্যারামিটার হিসেবে ব্যবহার করা
|
|
|
|
আপনার প্রোগ্রামিং ক্যারিয়ারে অগ্রসর হওয়ার সাথে সাথে, আপনি এমন ফাংশন দেখতে পাবেন যা ফাংশনকে প্যারামিটার হিসেবে গ্রহণ করে। এই চমৎকার কৌশলটি সাধারণত তখন ব্যবহৃত হয় যখন আমরা জানি না কখন কিছু ঘটবে বা সম্পন্ন হবে, কিন্তু আমরা জানি যে আমাদের প্রতিক্রিয়ায় একটি অপারেশন সম্পাদন করতে হবে।
|
|
|
|
উদাহরণস্বরূপ, [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) বিবেচনা করুন, যা একটি টাইমার শুরু করে এবং এটি সম্পন্ন হলে কোড কার্যকর করে। আমাদের এটি জানাতে হবে যে আমরা কোন কোডটি কার্যকর করতে চাই। এটি একটি ফাংশনের জন্য উপযুক্ত কাজ বলে মনে হচ্ছে!
|
|
|
|
যদি আপনি নিচের কোডটি চালান, ৩ সেকেন্ড পরে আপনি বার্তাটি দেখতে পাবেন **3 seconds has elapsed**।
|
|
|
|
```javascript
|
|
function displayDone() {
|
|
console.log('3 seconds has elapsed');
|
|
}
|
|
// timer value is in milliseconds
|
|
setTimeout(displayDone, 3000);
|
|
```
|
|
|
|
### অ্যানোনিমাস ফাংশন
|
|
|
|
আসুন আমরা যা তৈরি করেছি তা আবার দেখি। আমরা একটি ফাংশন তৈরি করছি যার একটি নাম রয়েছে যা একবার ব্যবহৃত হবে। আমাদের অ্যাপ্লিকেশন যত জটিল হবে, আমরা দেখতে পাব যে আমরা অনেক ফাংশন তৈরি করছি যা শুধুমাত্র একবার কল করা হবে। এটি আদর্শ নয়। দেখা যাচ্ছে, আমাদের সবসময় একটি নাম প্রদান করার প্রয়োজন নেই!
|
|
|
|
যখন আমরা একটি ফাংশনকে প্যারামিটার হিসেবে প্রেরণ করি, তখন আমরা এটি আগে থেকে তৈরি না করেও প্যারামিটারের অংশ হিসেবে তৈরি করতে পারি। আমরা একই `function` কীওয়ার্ড ব্যবহার করি, তবে আমরা এটি একটি প্যারামিটার হিসেবে তৈরি করি।
|
|
|
|
আসুন উপরের কোডটি একটি অ্যানোনিমাস ফাংশন ব্যবহার করে পুনরায় লিখি:
|
|
|
|
```javascript
|
|
setTimeout(function() {
|
|
console.log('3 seconds has elapsed');
|
|
}, 3000);
|
|
```
|
|
|
|
যদি আপনি আমাদের নতুন কোডটি চালান, আপনি লক্ষ্য করবেন আমরা একই ফলাফল পাই। আমরা একটি ফাংশন তৈরি করেছি, কিন্তু এটিকে একটি নাম দিতে হয়নি!
|
|
|
|
### ফ্যাট অ্যারো ফাংশন
|
|
|
|
অনেক প্রোগ্রামিং ভাষায় (জাভাস্ক্রিপ্ট সহ) একটি সাধারণ শর্টকাট হলো **অ্যারো** বা **ফ্যাট অ্যারো** ফাংশন ব্যবহার করার ক্ষমতা। এটি `=>` নামে একটি বিশেষ চিহ্ন ব্যবহার করে, যা একটি তীরের মতো দেখায় - তাই নামটি! `=>` ব্যবহার করে, আমরা `function` কীওয়ার্ডটি বাদ দিতে পারি।
|
|
|
|
আসুন আমাদের কোডটি আরেকবার পুনরায় লিখি একটি ফ্যাট অ্যারো ফাংশন ব্যবহার করে:
|
|
|
|
```javascript
|
|
setTimeout(() => {
|
|
console.log('3 seconds has elapsed');
|
|
}, 3000);
|
|
```
|
|
|
|
### কখন কোন কৌশল ব্যবহার করবেন
|
|
|
|
আপনি এখন দেখেছেন যে আমরা একটি ফাংশনকে প্যারামিটার হিসেবে প্রেরণের তিনটি উপায় পেয়েছি এবং হয়তো ভাবছেন কখন কোনটি ব্যবহার করবেন। যদি আপনি জানেন যে ফাংশনটি একাধিকবার ব্যবহার করা হবে, তবে এটি সাধারণভাবে তৈরি করুন। যদি এটি শুধুমাত্র একটি স্থানে ব্যবহৃত হবে, তবে সাধারণত একটি অ্যানোনিমাস ফাংশন ব্যবহার করা সেরা। আপনি ফ্যাট অ্যারো ফাংশন বা আরও ঐতিহ্যবাহী `function` সিনট্যাক্স ব্যবহার করবেন কিনা তা আপনার উপর নির্ভর করে, তবে আপনি লক্ষ্য করবেন যে বেশিরভাগ আধুনিক ডেভেলপার `=>` পছন্দ করেন।
|
|
|
|
---
|
|
|
|
## 🚀 চ্যালেঞ্জ
|
|
|
|
আপনি কি এক বাক্যে ফাংশন এবং মেথডের মধ্যে পার্থক্য ব্যাখ্যা করতে পারবেন? চেষ্টা করে দেখুন!
|
|
|
|
## পোস্ট-লেকচার কুইজ
|
|
[পোস্ট-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/10)
|
|
|
|
## পুনরালোচনা ও স্ব-অধ্যয়ন
|
|
|
|
[অ্যারো ফাংশন সম্পর্কে আরও পড়া](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) মূল্যবান, কারণ এগুলো ক্রমবর্ধমানভাবে কোড বেসে ব্যবহৃত হচ্ছে। একটি ফাংশন লিখুন এবং তারপর এটি এই সিনট্যাক্স দিয়ে পুনরায় লিখুন।
|
|
|
|
## অ্যাসাইনমেন্ট
|
|
|
|
[ফান উইথ ফাংশনস](assignment.md)
|
|
|
|
**অস্বীকৃতি**:
|
|
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিক অনুবাদের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় থাকা আসল সংস্করণটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই। |