# জাভাস্ক্রিপ্ট বেসিকস: মেথড এবং ফাংশন  > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) ## প্রি-লেকচার কুইজ [প্রি-লেকচার কুইজ](https://ff-quizzes.netlify.app) কোড লেখার সময় আমরা সবসময় চাই আমাদের কোডটি সহজে পড়া যায়। যদিও এটি প্রথমে অদ্ভুত শোনায়, কোড লেখার চেয়ে অনেক বেশি বার পড়া হয়। ডেভেলপারদের টুলবক্সে একটি গুরুত্বপূর্ণ টুল হলো **ফাংশন**, যা কোডকে রক্ষণাবেক্ষণযোগ্য রাখতে সাহায্য করে। [](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!** দেখাবে। এটি খুব একটা কার্যকরী ফাংশন নয়। যদি আমরা এটিকে একটু বেশি নমনীয় করতে চাই, যেমন কাউকে অভিবাদন জানানোর জন্য নাম নির্দিষ্ট করার অনুমতি দেওয়া, তাহলে আমরা একটি **প্যারামিটার** যোগ করতে পারি। একটি প্যারামিটার (যাকে কখনও কখনও **argument** বলা হয়) হলো ফাংশনে পাঠানো অতিরিক্ত তথ্য। প্যারামিটারগুলো সংজ্ঞার অংশে বন্ধনীর মধ্যে তালিকাভুক্ত থাকে এবং কমা দিয়ে পৃথক করা হয়, যেমন: ```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) ## রিভিউ এবং সেলফ স্টাডি [অ্যারো ফাংশন সম্পর্কে আরও পড়া](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) মূল্যবান, কারণ এগুলো ক্রমবর্ধমানভাবে কোড বেসে ব্যবহৃত হচ্ছে। একটি ফাংশন লিখুন এবং তারপর এটি এই সিনট্যাক্স দিয়ে পুনর্লিখন করুন। ## অ্যাসাইনমেন্ট [Fun with Functions](assignment.md) --- **অস্বীকৃতি**: এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।