JavaScript Function কী? Complete Guide, Examples ও Rules

JavaScript Function হলো এমন একটি reusable code block, যা নির্দিষ্ট কোনো কাজ সম্পন্ন করার জন্য তৈরি করা হয়। একটি function একবার তৈরি করে প্রয়োজন অনুযায়ী অনেকবার ব্যবহার করা যায়।

JavaScript-এ function ব্যবহার করলে code সহজে organize করা যায়, একই code বারবার লেখার প্রয়োজন হয় না এবং বড় program পরিচালনা করা সহজ হয়।

What is a JavaScript Function?

একটি function-এর মধ্যে কিছু JavaScript statements থাকে। Function তৈরি করার পর সেটিকে call বা invoke করলে function-এর ভিতরের code execute হয়।

Basic Function Syntax

function functionName() {
  // code to be executed
}

এখানে functionName হলো function-এর নাম এবং curly brackets { }-এর ভিতরে function-এর code থাকে।

Creating a JavaScript Function

JavaScript-এ সাধারণ function তৈরি করতে function keyword ব্যবহার করা হয়।

function sayHello() {
  console.log("Hello World");
}

উপরের code-এ function তৈরি হয়েছে, কিন্তু এখনো function execute হয়নি। Function চালানোর জন্য function-টিকে call করতে হবে।

Calling a Function

Function call করার জন্য function-এর নামের পরে parentheses () ব্যবহার করতে হয়।

function sayHello() {
  console.log("Hello World");
}

sayHello();

Output:

Hello World

এখানে sayHello() function-টিকে call বা invoke করেছে।

Function Invocation

Function define করার সময় function-এর ভিতরের code execute হয় না। Function execute হয় যখন সেটিকে invoke করা হয়।

প্রথমে function তৈরি করা হয়।
তারপর function call করা হয়।
Function-এর ভিতরের statements execute হয়।
Function কোনো value return করলে সেটি পাওয়া যায়।

Example

function greet() {
  return "Hello World";
}

greet();

Function Parameters

Function-এর parentheses-এর মধ্যে যে variable names লেখা হয় সেগুলোকে parameters বলা হয়।

function add(a, b) {
  return a + b;
}

এখানে a এবং b হলো parameters। এগুলো function-এর ভিতরে value গ্রহণ করার জন্য ব্যবহার করা হয়।

Function Arguments

Function call করার সময় যে actual values পাঠানো হয় সেগুলোকে arguments বলা হয়।

function add(a, b) {
  return a + b;
}

let result = add(10, 20);

console.log(result);

Output:

এখানে a এবং b হলো parameters, আর 10 এবং 20 হলো arguments।

Parameters vs Arguments

function multiply(x, y) {
  return x * y;
}

multiply(4, 5);

এখানে x এবং y হলো parameters। আর 4 এবং 5 হলো arguments।

The return Statement

Function থেকে কোনো value ফেরত পাঠানোর জন্য return statement ব্যবহার করা হয়।

function add(a, b) {
  return a + b;
}

let result = add(5, 10);

console.log(result);

Output:

এখানে return a + b function থেকে 15 value ফেরত দেয়।

Return Stops Function Execution

একটি function-এর মধ্যে কোনো return statement execute হলে function-এর execution সঙ্গে সঙ্গে বন্ধ হয়ে যায়।

function multiply(a, b) {
  return "Done";

  return a * b;
}

let result = multiply(4, 3);

console.log(result);

Output:

Done

দ্বিতীয় return a * b execute হবে না, কারণ প্রথম return function execution বন্ধ করে দিয়েছে।

Using a Function Return Value

Function-এর returned value variable-এর মধ্যে store করা যায়।

function sayHello() {
  return "Hello World";
}

let greeting = sayHello();

console.log(greeting);

Output:

Hello World

Returned value সরাসরি অন্য expression-এর মধ্যেও ব্যবহার করা যায়।

function add(a, b) {
  return a + b;
}

let text = "Result: " + add(10, 20);

console.log(text);

Output:

Result: 30

Function as a Variable

একটি function-এর returned value variable-এর মতো ব্যবহার করা যায়।

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

let value = toCelsius(77);

console.log(value);

Output:

আবার function-কে parentheses ছাড়া লিখলে function execute হয় না। তখন function-এর reference পাওয়া যায়।

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

let value = toCelsius;

console.log(value);

এখানে toCelsius function-টিকে reference করছে, কিন্তু toCelsius(77) function-টিকে execute করে result দেয়।

Calling vs Referencing a Function

function sayHello() {
  return "Hello World";
}

let a = sayHello;
let b = sayHello();

console.log(a);
console.log(b);

sayHello → function-এর reference।

sayHello() → function call করে returned value দেয়।

Default Parameters

কোনো argument না দিলে parameter-এর জন্য default value সেট করা যায়।

function multiply(x, y = 2) {
  return x * y;
}

console.log(multiply(5));
console.log(multiply(5, 3));

Output:

10
15

প্রথম ক্ষেত্রে y-এর value দেওয়া হয়নি, তাই y = 2 ব্যবহার হয়েছে।

Checking undefined Parameters

Default parameter ব্যবহার করার আগের পদ্ধতিতে undefined check করা হতো।

function multiply(x, y) {
  if (y === undefined) {
    y = 2;
  }

  return x * y;
}

console.log(multiply(5));
console.log(multiply(5, 3));

Function Expression

Function-কে একটি variable-এর মধ্যে store করা হলে তাকে Function Expression বলা হয়।

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 3));

Output:

এখানে anonymous function-টি multiply variable-এর মধ্যে store করা হয়েছে।

Arrow Functions

JavaScript-এ function লেখার একটি short syntax হলো Arrow Function।

const multiply = (a, b) => {
  return a * b;
};

console.log(multiply(4, 5));

Output:

Short Arrow Function

Function body-তে যদি শুধু একটি expression থাকে, তাহলে curly braces এবং return keyword বাদ দেওয়া যায়।

const multiply = (a, b) => a * b;

console.log(multiply(4, 5));

Output:

Single Parameter in Arrow Function

Arrow function-এ যদি শুধুমাত্র একটি parameter থাকে, তাহলে parentheses বাদ দেওয়া যায়।

const square1 = (x) => x * x;
const square2 = x => x * x;

console.log(square1(5));
console.log(square2(6));

Output:

25
36

(x) => x * x এবং x => x * x একই কাজ করে।

Arrow Function with String

const hello1 = (val) => "Hello " + val;
const hello2 = val => "Hello " + val;

console.log(hello1("Ariful"));
console.log(hello2("World"));

Output:

Hello Ariful
Hello World

এখানে val হলো parameter। এটি JavaScript-এর কোনো special keyword নয়; এটি শুধু একটি variable name।

The arguments Object

Function-এর মধ্যে arguments object ব্যবহার করে function call করার সময় পাঠানো সব arguments access করা যায়।

function showArguments() {
  console.log(arguments);
}

showArguments(10, 20, 30);

এখানে 10, 20 এবং 30 arguments object-এর মধ্যে থাকবে।

arguments.length

arguments.length দিয়ে মোট কয়টি argument পাঠানো হয়েছে তা জানা যায়।

function countArguments() {
  return arguments.length;
}

console.log(countArguments(10, 20, 30, 40));

Output:

arguments[i]

arguments[i] দিয়ে একটি নির্দিষ্ট argument-এর value পাওয়া যায়।

function showArguments() {
  for (let i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

showArguments(10, 20, 30);

Output:

10
20
30

Finding the Maximum Number

arguments ব্যবহার করে একাধিক number-এর মধ্যে সবচেয়ে বড় number খুঁজে বের করা যায়।

function findMax() {
  let max = -Infinity;

  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }

  return max;
}

console.log(findMax(10, 20, 30, 40, 50, 60));

Output:

Adding All Arguments

একইভাবে arguments-এর সব number যোগ করা যায়।

function sumAll() {
  let sum = 0;

  for (let i = 0; i < arguments.length; i++) {
    sum = sum + arguments[i];
  }

  return sum;
}

let result = sumAll(10, 20, 30, 50);

console.log(result);

Output:

এখানে arguments.length ব্যবহার করা হয়েছে loop কতবার চলবে তা নির্ধারণ করার জন্য। আর arguments[i] ব্যবহার করা হয়েছে actual number পাওয়ার জন্য।

Calling a Function from Another Function

একটি function-এর ভিতর থেকে অন্য function call করা যায়।

function sayHello() {
  return "Hello World";
}

function showHello() {
  return sayHello();
}

console.log(showHello());

Output:

Hello World

Calling Functions from Events

HTML event-এর মাধ্যমেও JavaScript function call করা যায়।

<p id="demo"></p>

<button onclick="showHello()">Click Me</button>

<script>
function sayHello() {
  return "Hello World";
}

function showHello() {
  document.getElementById("demo").innerHTML = sayHello();
}
</script>

Button-এ click করলে showHello() function call হবে। এরপর showHello() function থেকে sayHello() call হবে এবং result HTML-এ দেখাবে।

Self-Invoking Function

JavaScript-এ একটি function নিজে নিজে immediately execute করানো যায়। এটিকে সাধারণত IIFE (Immediately Invoked Function Expression) বলা হয়।

(function() {
  console.log("Hello World");
})();

Output:

Hello World

Functions Can Be Called Many Times

একটি function একবার তৈরি করে প্রয়োজন অনুযায়ী অনেকবার call করা যায়।

function sayHello() {
  return "Hello World";
}

let a = sayHello();
let b = sayHello();
let c = sayHello();

console.log(a);
console.log(b);
console.log(c);

Function Scope

Function-এর ভিতরে let বা const দিয়ে তৈরি variable সাধারণত function-এর বাইরে access করা যায় না।

function myFunction() {
  let carName = "Volvo";

  console.log(carName);
}

myFunction();

এখানে carName function-এর local variable।

Common JavaScript Function Mistakes

1. Forgetting Parentheses

function sayHello() {
  return "Hello World";
}

console.log(sayHello);   // Function reference
console.log(sayHello()); // Function result

sayHello function-কে reference করে, আর sayHello() function-কে execute করে।

2. Forgetting return

function add(a, b) {
  a + b;
}

console.log(add(5, 10));

এখানে return নেই, তাই function কোনো value return করবে না। Result হবে undefined।

3. Using length Instead of the Actual Value

arguments.length value-এর সংখ্যা দেয়, actual value নয়।

function sumAll() {
  let sum = 0;

  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }

  return sum;
}

console.log(sumAll(10, 20, 30));

Output:

JavaScript Function Best Practices

Function-এর নাম meaningful রাখুন।
একটি function-কে সাধারণত একটি নির্দিষ্ট কাজের জন্য ব্যবহার করুন।
প্রয়োজন অনুযায়ী parameters ব্যবহার করুন।
Result প্রয়োজন হলে return ব্যবহার করুন।
Repeated code function-এর মধ্যে রাখুন।
ছোট calculation-এর জন্য arrow function ব্যবহার করতে পারেন।
Function-এর ভিতরের variable-এর জন্য let বা const ব্যবহার করুন।
Function call এবং function reference-এর পার্থক্য বুঝুন।

Complete Function Example

নিচের example-এ parameter, argument, return এবং function call একসাথে ব্যবহার করা হয়েছে।

function calculateTotal(price, quantity) {
  let total = price * quantity;

  return total;
}

let result = calculateTotal(500, 3);

console.log(result);

Output:

Conclusion

JavaScript-এর functions programming-এর অন্যতম গুরুত্বপূর্ণ বিষয়। Function ব্যবহার করে একই code বারবার না লিখে reusable code তৈরি করা যায়।

একজন JavaScript learner-এর জন্য function declaration, function call, parameters, arguments, return statement, function expression, arrow function, default parameters এবং arguments object ভালোভাবে শেখা খুবই গুরুত্বপূর্ণ।

বিশেষ করে functionName এবং functionName()-এর পার্থক্য, এবং parameter ও argument-এর পার্থক্য পরিষ্কারভাবে বুঝলে JavaScript-এর পরবর্তী topics শেখা অনেক সহজ হবে।

JavaScript Function কী? Complete Guide, Examples ও Rules

What is a JavaScript Function?

Basic Function Syntax

Creating a JavaScript Function

Calling a Function

Function Invocation

Example

Function Parameters

Function Arguments

Parameters vs Arguments

The return Statement

Return Stops Function Execution

Using a Function Return Value

Function as a Variable

Calling vs Referencing a Function

Default Parameters

Checking undefined Parameters

Function Expression

Arrow Functions

Short Arrow Function

Single Parameter in Arrow Function

Arrow Function with String

The arguments Object

arguments.length

arguments[i]

Finding the Maximum Number

Adding All Arguments

Calling a Function from Another Function

Calling Functions from Events

Self-Invoking Function

Functions Can Be Called Many Times

Function Scope

Common JavaScript Function Mistakes

1. Forgetting Parentheses

2. Forgetting return

3. Using length Instead of the Actual Value

JavaScript Function Best Practices

Complete Function Example

Conclusion

Post a Comment