ফাংশন

  • Revision slug: JavaScript/Guide/Functions
  • Revision title: ফাংশন
  • Revision id: 507481
  • Created:
  • Creator: shafiul
  • Is current revision? না
  • Comment

Revision Content

ফাংশন হচ্ছে জাভাস্ক্রিপ্টের অন্যতম বিল্ডিং ব্লক। ফাংশন হচ্ছেঃ কিছু স্টেটমেন্ট যেগুলো execute হবে, যার মাধ্যমে আপনি কোন কাজ করবেন অথবা কোন মান নির্ণয় করবেন। ফাংশন ব্যবহার করার জন্য আপনি যেই স্কোপ থেকে ফাংশন কল করবেন, সেখানে ফাংশনটি লিখতে হবে (ডিফাইন করতে হবে)।

ফাংশন ডিফাইন করা

ফাংশন ডেফিনেশন মানে হল যেখানে আপনি ফাংশনটা লিখবেন। একে ফাংশন ডিক্লেয়ারেশন ও বলা হয়। ফাংশন লেখার জন্য function কীওয়ার্ড ব্যবহার করুন, আর তারপরঃ

  • ফাংশনের নাম লিখুন।
  • ফাংশনের প্যারামিটার গুলো ব্র্যাকেটের মধ্যে লিখুন, কমা দিয়ে আলাদা করে।
  • Curly braces { } এর মধ্যে ফাংশনের স্টেটমেন্ট গুলো লিখুন।

নিচের কোডে square নামের সহজ একটা ফাংশন দেখানো হয়েছেঃ

function square(number) {
  return number * number;
}

এই square ফাংশনটি একটা প্যারামিটার নেয়, যার নাম number । এই ফাংশনের কাজ হল প্যারামিটারের ভ্যালুকে নিজের সাথেই গুণ দিয়ে রিটার্ন করে দেওয়া। return স্টেটমেন্ট ফাংশন থেকে মান রিটার্ন করতে কাজে লাগে।

return number * number;

মৌলিক প্যারামিটার (যেমন সংখ্যা) ফাংশনে value হিসেবে পাঠানো হয়। তার মানে ফাংশনের ভেতর এই ভ্যালু বদলে দিলেও গ্লোবালি/ফাংশনের বাইরে এই পরিবর্তন কার্যকর হবে না।

আপনি যদি অবজেক্ট (যেমন মৌলিক নয় এমন ভ্যালু, যেমন Array অথবা নিজের লেখা কোন অবজেক্ট) পাঠান প্যারামিটার হিসেবে, আর ফাংশনটি অবজেক্টের প্রোপার্টি বদলে দেয়, তাহলে ফাংশনের বাইরের কোডে (যেই কোড ফাংশনকে কল করেছে) এই পরিবর্তন কার্যকর থাকবেঃ

function myFunc(theObject) {
  theObject.make = "Toyota";
}

var mycar = {make: "Honda", model: "Accord", year: 1998},
    x,
    y;

x = mycar.make;     // x কে "Honda" মান দেওয়া হয়েছে

myFunc(mycar);
y = mycar.make;     // y এর মান হল "Toyota"
                    // (make প্রোপার্টি function দ্বারা বদলে গেছে)

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

যেমনঃ

function myFunc(theObject) {
  theObject = {make: "Ford", model: "Focus", year: 2006};
}

var mycar = {make: "Honda", model: "Accord", year: 1998},
    x,
    y;

x = mycar.make;     // x এর মান "Honda"

myFunc(mycar);
y = mycar.make;     // y এর মান "Honda" ই রয়ে গেছে।

প্রথম ক্ষেত্রে, mycar অবজেক্ট টি myFunc ফাংশনে পাঠানো হয়েছিল, যেটি পরিবর্তিত হয়েছে ফাংশনের ভেতর। দ্বিতীয় ক্ষেত্রে, ফাংশনে যেই অবজেক্ট পাঠানো হয়েছিল সেটায় কোন পরিবর্তন না করা হয় নি। বরং, ফাংশনটি নতুন একটি লোকাল ভ্যারিয়েবল তৈরি করে নিয়েছে একই নামে। তাই ফাংশনের বাইরের অবজেক্টে কোন পরিবর্তন কার্যকর হয়নি।

While the function declaration above is syntactically a statement, functions can also be created by a function expression. Such a function can be anonymous; it does not have to have a name. For example, the function square could have been defined as:

var square = function(number) {return number * number};
var x = square(4) //x gets the value 16

However, a name can be provided with a function expression, and can be used inside the function to refer to itself, or in a debugger to identify the function in stack traces:

var factorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};

print(factorial(3));

Function expressions are convenient when passing a function as an argument to another function. The following example shows a map function being defined and then called with an anonymous function as its first parameter:

function map(f,a) {
  var result = [], // Create a new Array
      i;
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}

The following code:

map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);

returns [0, 1, 8, 125, 1000].

In JavaScript, a function can be defined based on a condition. For example, the following function definition defines myFunc only if num equals 0:

var myFunc;
if (num == 0){
  myFunc = function(theObject) {
    theObject.make = "Toyota"
  }
}

In addition to defining functions as described here, you can also use the Function constructor to create functions from a string at runtime, much like eval().

A method is a function that is a property of an object. Read more about objects and methods in Working with Objects.

Calling functions

Defining a function does not execute it. Defining the function simply names the function and specifies what to do when the function is called. Calling the function actually performs the specified actions with the indicated parameters. For example, if you define the function square, you could call it as follows:

square(5);

The preceding statement calls the function with an argument of 5. The function executes its statements and returns the value 25.

Functions must be in scope when they are called, but the function declaration can be below the call, as in this example:

print(square(5));
/* ... */
function square(n){return n*n} 

The scope of a function is the function in which it is declared, or the entire program if it is declared at the top level. Note that this works only when defining the function using the above syntax (i.e. function funcName(){}). The code below will not work.

print(square(5));
square = function (n) {
  return n * n;
}

The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function, too. The show_props function (defined in Working with Objects) is an example of a function that takes an object as an argument.

A function can be recursive; that is, it can call itself. For example, here is a function that computes factorials recursively:

function factorial(n){
  if ((n == 0) || (n == 1))
    return 1;
  else
    return (n * factorial(n - 1));
}

You could then compute the factorials of one through five as follows:

var a, b, c, d, e;
a = factorial(1); // a gets the value 1
b = factorial(2); // b gets the value 2
c = factorial(3); // c gets the value 6
d = factorial(4); // d gets the value 24
e = factorial(5); // e gets the value 120

There are other ways to call functions. There are often cases where a function needs to be called dynamically, or the number of arguments to a function vary, or in which the context of the function call needs to be set to a specific object determined at runtime. It turns out that functions are, themselves, objects, and these objects in turn have methods (see the Function object). One of these, the apply() method, can be used to achieve this goal.

Function scope

Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined. In otherwords, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in it's parent function and any other variable to which the parent function has access.

// The following variables are defined in the global scope
var num1 = 20,
    num2 = 3,
    name = "Chamahk";

// This function is defined in the global scope
function multiply() {
  return num1 * num2;
}

multiply(); // Returns 60

// A nested function example
function getScore () {
  var num1 = 2,
      num2 = 3;
  
  function add() {
    return name + " scored " + (num1 + num2);
  }
  
  return add();
}

getScore(); // Returns "Chamahk scored 5"

Closures

Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and, in addition, grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of security for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the outer function itself, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.

var pet = function(name) {          // The outer function defines a variable called "name"
      var getName = function() {
        return name;                // The inner function has access to the "name" variable of the outer function
      }

      return getName;               // Return the inner function, thereby exposing it to outer scopes
    },
    myPet = pet("Vivie");
    
myPet();                            // Returns "Vivie"

It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.

var createPet = function(name) {
  var sex;
  
  return {
    setName: function(newName) {
      name = newName;
    },
    
    getName: function() {
      return name;
    },
    
    getSex: function() {
      return sex;
    },
    
    setSex: function(newSex) {
      if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
        sex = newSex;
      }
    }
  }
}

var pet = createPet("Vivie");
pet.getName();                  // Vivie

pet.setName("Oliver");
pet.setSex("male");
pet.getSex();                   // male
pet.getName();                  // Oliver

In the codes above, the name variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner function act as safe stores for the inner functions. They hold "persistent", yet secure, data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.

var getCode = (function(){
  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
  
  return function () {
    return secureCode;
  };
})();

getCode();    // Returns the secret code

There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.

var createPet = function(name) {  // Outer function defines a variable called "name"
  return {
    setName: function(name) {    // Enclosed function also defines a variable called "name"
      name = name;               // ??? How do we access the "name" defined by the outer function ???
    }
  }
}

The magical this variable is very tricky in closures. They have to be used carefully, as what this refers to depends completely on where the function was called, rather than where it was defined. An excellent and elaborate article on closures can be found here.

Using the arguments object

The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:

arguments[i]

where i is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be arguments[0]. The total number of arguments is indicated by arguments.length.

Using the arguments object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use arguments.length to determine the number of arguments actually passed to the function, and then access each argument using the arguments object.

For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:

function myConcat(separator) {
   var result = "", // initialize list
       i;
   // iterate through arguments
   for (i = 1; i < arguments.length; i++) {
      result += arguments[i] + separator;
   }
   return result;
}

You can pass any number of arguments to this function, and it concatenates each argument into a string "list":

// returns "red, orange, blue, "
myConcat(", ", "red", "orange", "blue");

// returns "elephant; giraffe; lion; cheetah; "
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// returns "sage. basil. oregano. pepper. parsley. "
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

Please note that the arguments variable is "array-like", but not an array. It is array-like in that is has a numbered index and a length property. However, it does not possess all of the array-manipulation methods.

See the Function object in the JavaScript Reference for more information.

Predefined functions

JavaScript has several top-level predefined functions:

  • {{ web.link("#eval_function", "eval") }}
  • {{ web.link("#isFinite_function", "isFinite") }}
  • {{ web.link("#isNaN_function", "isNaN") }}
  • {{ web.link("#parseInt_and_parseFloat_functions", "parseInt and parseFloat") }}
  • {{ web.link("#Number_and_String_functions", "Number and String") }}
  • {{ web.link("#escape_and_unescape_functions", "encodeURI, decodeURI, encodeURIComponent, and decodeURIComponent") }} (all available with Javascript 1.5 and later).

The following sections introduce these functions. See the JavaScript Reference for detailed information on all of these functions.

eval Function

The eval function evaluates a string of JavaScript code without reference to a particular object. The syntax of eval is:

eval(expr);

where expr is a string to be evaluated.

If the string represents an expression, eval evaluates the expression. If the argument represents one or more JavaScript statements, eval performs the statements. The scope of eval code is identical to the scope of the calling code. Do not call eval to evaluate an arithmetic expression; JavaScript evaluates arithmetic expressions automatically.

isFinite function

The isFinite function evaluates an argument to determine whether it is a finite number. The syntax of isFinite is:

isFinite(number);

where number is the number to evaluate.

If the argument is NaN, positive infinity or negative infinity, this method returns false, otherwise it returns true.

The following code checks client input to determine whether it is a finite number.

if(isFinite(ClientInput)){
   /* take specific steps */
}

isNaN function

The isNaN function evaluates an argument to determine if it is "NaN" (not a number). The syntax of isNaN is:

isNaN(testValue);

where testValue is the value you want to evaluate.

The parseFloat and parseInt functions return "NaN" when they evaluate a value that is not a number. isNaN returns true if passed "NaN," and false otherwise.

The following code evaluates floatValue to determine if it is a number and then calls a procedure accordingly:

var floatValue = parseFloat(toFloat);

if (isNaN(floatValue)) {
   notFloat();
} else {
   isFloat();
}

parseInt and parseFloat functions

The two "parse" functions, parseInt and parseFloat, return a numeric value when given a string as an argument.

The syntax of parseFloat is:

parseFloat(str);

where parseFloat parses its argument, the string str, and attempts to return a floating-point number. If it encounters a character other than a sign (+ or -), a numeral (0-9), a decimal point, or an exponent, then it returns the value up to that point and ignores that character and all succeeding characters. If the first character cannot be converted to a number, it returns "NaN" (not a number).

The syntax of parseInt is:

parseInt(str [, radix]);

parseInt parses its first argument, the string str, and attempts to return an integer of the specified radix (base), indicated by the second, optional argument, radix. For example, a radix of ten indicates to convert to a decimal number, eight octal, sixteen hexadecimal, and so on. For radixes above ten, the letters of the alphabet indicate numerals greater than nine. For example, for hexadecimal numbers (base 16), A through F are used.

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. If the first character cannot be converted to a number in the specified radix, it returns "NaN." The parseInt function truncates the string to integer values.

Number and String functions

The Number and String functions let you convert an object to a number or a string. The syntax of these functions is:

var objRef;
objRef = Number(objRef);
objRef = String(objRef);

where objRef is an object reference. Number uses the valueOf() method of the object; String uses the toString() method of the object.

The following example converts the Date object to a readable string.

var D = new Date(430054663215),
    x;
x = String(D); // x equals "Thu Aug 18 04:37:43 GMT-0700 (Pacific Daylight Time) 1983"

The following example converts the String object to Number object.

var str = "12",
    num;
num = Number(str);

You can check it. Use DOM method write() and JavaScript typeof operator.

var str = "12",
    num;
document.write(typeof str);
document.write("<br/>");
num = Number(str);
document.write(typeof num);

escape and unescape functions(Obsoleted above JavaScript 1.5)

The escape and unescape functions do not work properly for non-ASCII characters and have been deprecated. In JavaScript 1.5 and later, use encodeURI, decodeURI, encodeURIComponent, and decodeURIComponent.

The escape and unescape functions let you encode and decode strings. The escape function returns the hexadecimal encoding of an argument in the ISO Latin character set. The unescape function returns the ASCII string for the specified hexadecimal encoding value.

The syntax of these functions is:

escape(string);
unescape(string);

These functions are used primarily with server-side JavaScript to encode and decode name/value pairs in URLs.

{{ autoPreviousNext("JSGChapters") }}

Revision Source

<p>ফাংশন হচ্ছে জাভাস্ক্রিপ্টের অন্যতম বিল্ডিং ব্লক। ফাংশন হচ্ছেঃ কিছু স্টেটমেন্ট যেগুলো execute হবে, যার মাধ্যমে আপনি কোন কাজ করবেন অথবা কোন মান নির্ণয় করবেন। ফাংশন ব্যবহার করার জন্য আপনি যেই স্কোপ থেকে ফাংশন কল করবেন, সেখানে ফাংশনটি লিখতে হবে (ডিফাইন করতে হবে)।</p>
<h2 id=".E0.A6.AB.E0.A6.BE.E0.A6.82.E0.A6.B6.E0.A6.A8_.E0.A6.A1.E0.A6.BF.E0.A6.AB.E0.A6.BE.E0.A6.87.E0.A6.A8_.E0.A6.95.E0.A6.B0.E0.A6.BE">ফাংশন ডিফাইন করা</h2>
<p>ফাংশন ডেফিনেশন মানে হল যেখানে আপনি ফাংশনটা লিখবেন। একে ফাংশন ডিক্লেয়ারেশন ও বলা হয়। ফাংশন লেখার জন্য <a href="/en-US/docs/JavaScript/Reference/Statements/function" title="function"><code>function</code></a> কীওয়ার্ড ব্যবহার করুন, আর তারপরঃ</p>
<ul>
 <li>ফাংশনের নাম লিখুন।</li>
 <li>ফাংশনের প্যারামিটার গুলো ব্র্যাকেটের মধ্যে লিখুন, কমা দিয়ে আলাদা করে।</li>
 <li>Curly braces <code>{ }</code> এর মধ্যে ফাংশনের স্টেটমেন্ট গুলো লিখুন।</li>
</ul>
<p>নিচের কোডে<code> square</code> নামের সহজ একটা ফাংশন দেখানো হয়েছেঃ</p>
<div style="margin-right: 270px;">
 <pre class="brush: js">
function square(number) {
  return number * number;
}
</pre>
</div>
<p>এই <code>square </code>ফাংশনটি একটা প্যারামিটার নেয়, যার নাম <code>number</code> । এই ফাংশনের কাজ হল প্যারামিটারের ভ্যালুকে নিজের সাথেই গুণ দিয়ে রিটার্ন করে দেওয়া। <a href="/en-US/docs/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> স্টেটমেন্ট ফাংশন থেকে মান রিটার্ন করতে কাজে লাগে।</p>
<pre class="brush: js">
return number * number;
</pre>
<p>মৌলিক প্যারামিটার (যেমন সংখ্যা) ফাংশনে <strong>value</strong> হিসেবে পাঠানো হয়। তার মানে ফাংশনের ভেতর এই ভ্যালু বদলে দিলেও গ্লোবালি/ফাংশনের বাইরে এই পরিবর্তন কার্যকর হবে না।</p>
<p>আপনি যদি অবজেক্ট (যেমন <a href="/bn-BD/docs/JavaScript/Glossary">মৌলিক নয়</a> এমন ভ্যালু, যেমন <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> অথবা নিজের লেখা কোন অবজেক্ট) পাঠান প্যারামিটার হিসেবে, আর ফাংশনটি অবজেক্টের প্রোপার্টি বদলে দেয়, তাহলে ফাংশনের বাইরের কোডে (যেই কোড ফাংশনকে কল করেছে) এই পরিবর্তন কার্যকর থাকবেঃ</p>
<pre class="brush: js">
function myFunc(theObject) {
  theObject.make = "Toyota";
}

var mycar = {make: "Honda", model: "Accord", year: 1998},
    x,
    y;

x = mycar.make;     // x কে "Honda" মান দেওয়া হয়েছে

myFunc(mycar);
y = mycar.make;     // y এর মান হল "Toyota"
                    // (make প্রোপার্টি function দ্বারা বদলে গেছে)
</pre>
<div class="warning">
 <p>খেয়াল করুনঃ প্যারামিটারে নতুন একটা অবজেক্ট এসাইন করে দিলে কিন্তু ফাংশনের বাইরের কোডে প্যারামিটারের ভ্যালুর কোন পরিবর্তন হবে না। কারণ এর মাধ্যমে আমরা ফাংশনের ভেতর প্যারামিটারের ভ্যালু পরিবর্তন করে দিয়েছি, প্যারামিটার যেই অবজেক্ট কে পয়েন্ট করে ছিল সেই অবজেক্টের কোন পরিবর্তন করি নি। ফাংশনের বাইরের কোডে পুরনো অবজেক্টটাই রয়ে গেছে।</p>
</div>
<p>যেমনঃ</p>
<pre class="brush: js">
function myFunc(theObject) {
  theObject = {make: "Ford", model: "Focus", year: 2006};
}

var mycar = {make: "Honda", model: "Accord", year: 1998},
    x,
    y;

x = mycar.make;     // x এর মান "Honda"

myFunc(mycar);
y = mycar.make;     // y এর মান "Honda" ই রয়ে গেছে।
</pre>
<p>প্রথম ক্ষেত্রে, <code>mycar</code> অবজেক্ট টি <code>myFunc </code>ফাংশনে পাঠানো হয়েছিল, যেটি পরিবর্তিত হয়েছে ফাংশনের ভেতর। দ্বিতীয় ক্ষেত্রে, ফাংশনে যেই অবজেক্ট পাঠানো হয়েছিল সেটায় কোন পরিবর্তন না করা হয় নি। বরং, ফাংশনটি নতুন একটি লোকাল ভ্যারিয়েবল তৈরি করে নিয়েছে একই নামে। তাই ফাংশনের বাইরের অবজেক্টে কোন পরিবর্তন কার্যকর হয়নি।</p>
<p>While the function declaration above is syntactically a statement, functions can also be created by a&nbsp;<strong>function expression</strong>. Such a function can be&nbsp;<strong>anonymous</strong>; it does not have to have a name. For example, the function&nbsp;<code style="font-size: 14px;">square</code>&nbsp;could have been defined as:</p>
<pre class="brush: js" style="font-size: 14px;">
var square = function(number) {return number * number};
var x = square(4) //x gets the value 16</pre>
<p>However, a name can be provided with a function expression, and can be used inside the function to refer to itself, or in a debugger to identify the function in stack traces:</p>
<pre class="brush: js" style="font-size: 14px;">
var factorial = function fac(n) {return n&lt;2 ? 1 : n*fac(n-1)};

print(factorial(3));
</pre>
<p>Function expressions are convenient when passing a function as an argument to another function. The following example shows a&nbsp;<code style="font-size: 14px;">map</code>&nbsp;function being defined and then called with an anonymous function as its first parameter:</p>
<pre class="brush: js" style="font-size: 14px;">
function map(f,a) {
  var result = [], // Create a new Array
      i;
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}
</pre>
<p>The following code:</p>
<pre class="brush: js" style="font-size: 14px;">
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
</pre>
<p>returns [0, 1, 8, 125, 1000].</p>
<p>In JavaScript, a function can be defined based on a condition. For example, the following function definition defines <code>myFunc</code> only if <code>num</code> equals 0:</p>
<pre class="brush: js">
var myFunc;
if (num == 0){
  myFunc = function(theObject) {
    theObject.make = "Toyota"
  }
}</pre>
<p><span style="line-height: 1.572;">In addition to defining functions as described here, you can also use the </span><a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Function_Object" style="line-height: 1.572;" title="en-US/docs/JavaScript/Guide/Predefined Core Objects#Function Object"><code>Function</code> constructor</a><span style="line-height: 1.572;"> to create functions from a string at runtime, much like </span><a href="/en-US/docs/JavaScript/Guide/Functions#eval_Function" style="line-height: 1.572;" title="en-US/docs/JavaScript/Guide/Functions#eval_Function"><code>eval()</code></a><span style="line-height: 1.572;">.</span></p>
<p>A <strong>method</strong> is a function that is a property of an object. Read more about objects and methods in <a href="/en-US/docs/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with Objects</a>.</p>
<h2 id="Calling_functions">Calling functions</h2>
<p>Defining a function does not execute it. Defining the function simply names the function and specifies what to do when the function is called. <strong>Calling</strong> the function actually performs the specified actions with the indicated parameters. For example, if you define the function <code>square</code>, you could call it as follows:</p>
<pre class="brush: js">
square(5);
</pre>
<p>The preceding statement calls the function with an argument of 5. The function executes its statements and returns the value 25.</p>
<p>Functions must be in scope when they are called, but the function declaration can be below the call, as in this example:</p>
<pre>
print(square(5));
/* ... */
function square(n){return n*n} 
</pre>
<p>The scope of a function is the function in which it is declared, or the entire program if it is declared at the top level. Note that this works only when defining the function using the above syntax (i.e. <code>function funcName(){}</code>). The code below will not work.</p>
<pre class="brush: js">
print(square(5));
square = function (n) {
  return n * n;
}
</pre>
<p>The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function, too. The <code>show_props</code> function (defined in <a href="/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with Objects</a>) is an example of a function that takes an object as an argument.</p>
<p>A function can be recursive; that is, it can call itself. For example, here is a function that computes factorials recursively:</p>
<pre class="brush: js">
function factorial(n){
  if ((n == 0) || (n == 1))
    return 1;
  else
    return (n * factorial(n - 1));
}
</pre>
<p>You could then compute the factorials of one through five as follows:</p>
<pre class="brush: js">
var a, b, c, d, e;
a = factorial(1); // a gets the value 1
b = factorial(2); // b gets the value 2
c = factorial(3); // c gets the value 6
d = factorial(4); // d gets the value 24
e = factorial(5); // e gets the value 120
</pre>
<p>There are other ways to call functions. There are often cases where a function needs to be called dynamically, or the number of arguments to a function vary, or in which the context of the function call needs to be set to a specific object determined at runtime. It turns out that functions are, themselves, objects, and these objects in turn have methods (see the <a href="/en-US/docs/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects/Function_Object" title="Function Object"><code>Function</code> object</a>). One of these, the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="apply"><code>apply()</code></a> method, can be used to achieve this goal.</p>
<h2 class="deki-transform" id="Function_scope">Function scope</h2>
<p>Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined. In otherwords, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in it's parent function and any other variable to which the parent function has access.</p>
<pre class="brush: js">
// The following variables are defined in the global scope
var num1 = 20,
    num2 = 3,
    name = "Chamahk";

// This function is defined in the global scope
function multiply() {
  return num1 * num2;
}

multiply(); // Returns 60

// A nested function example
function getScore () {
  var num1 = 2,
      num2 = 3;
  
  function add() {
    return name + " scored " + (num1 + num2);
  }
  
  return add();
}

getScore(); // Returns "Chamahk scored 5"
</pre>
<h2 id="Closures">Closures</h2>
<p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and, in addition, grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of security for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the outer function itself, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p>
<pre class="brush: js">
var pet = function(name) {          // The outer function defines a variable called "name"
      var getName = function() {
        return name;                // The inner function has access to the "name" variable of the outer function
      }

      return getName;               // Return the inner function, thereby exposing it to outer scopes
    },
    myPet = pet("Vivie");
    
myPet();                            // Returns "Vivie"
</pre>
<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p>
<pre class="brush: js">
var createPet = function(name) {
  var sex;
  
  return {
    setName: function(newName) {
      name = newName;
    },
    
    getName: function() {
      return name;
    },
    
    getSex: function() {
      return sex;
    },
    
    setSex: function(newSex) {
      if(typeof newSex == "string" &amp;&amp; (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
        sex = newSex;
      }
    }
  }
}

var pet = createPet("Vivie");
pet.getName();                  // Vivie

pet.setName("Oliver");
pet.setSex("male");
pet.getSex();                   // male
pet.getName();                  // Oliver
</pre>
<p>In the codes above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner function act as safe stores for the inner functions. They hold "persistent", yet secure, data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p>
<pre class="brush: js">
var getCode = (function(){
  var secureCode = "0]Eal(eh&amp;2";    // A code we do not want outsiders to be able to modify...
  
  return function () {
    return secureCode;
  };
})();

getCode();    // Returns the secret code
</pre>
<p>There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.</p>
<pre class="brush: js">
var createPet = function(name) {  // Outer function defines a variable called "name"
  return {
    setName: function(name) {    // Enclosed function also defines a variable called "name"
      name = name;               // ??? How do we access the "name" defined by the outer function ???
    }
  }
}
</pre>
<p>The magical <code>this</code> variable is very tricky in closures. They have to be used carefully, as what <code>this</code> refers to depends completely on where the function was called, rather than where it was defined. An excellent and elaborate article on closures can be found <a class="external" href="http://jibbering.com/faq/notes/closures/">here</a>.</p>
<h2 id="Using_the_arguments_object">Using the arguments object</h2>
<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p>
<pre class="brush: js">
arguments[i]
</pre>
<p>where <code>i</code> is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p>
<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p>
<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p>
<pre class="brush: js">
function myConcat(separator) {
   var result = "", // initialize list
       i;
   // iterate through arguments
   for (i = 1; i &lt; arguments.length; i++) {
      result += arguments[i] + separator;
   }
   return result;
}
</pre>
<p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p>
<pre class="brush: js">
// returns "red, orange, blue, "
myConcat(", ", "red", "orange", "blue");

// returns "elephant; giraffe; lion; cheetah; "
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// returns "sage. basil. oregano. pepper. parsley. "
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
</pre>
<p>Please note that the <code>arguments</code> variable is "array-like", but not an array. It is array-like in that is has a numbered index and a <code>length</code> property. However, it does not possess all of the array-manipulation methods.</p>
<p>See the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global Objects/Function"><code>Function</code> object</a> in the JavaScript Reference for more information.</p>
<h2 id="Predefined_functions">Predefined functions</h2>
<p>JavaScript has several top-level predefined functions:</p>
<ul>
 <li>{{ web.link("#eval_function", "eval") }}</li>
 <li>{{ web.link("#isFinite_function", "isFinite") }}</li>
 <li>{{ web.link("#isNaN_function", "isNaN") }}</li>
 <li>{{ web.link("#parseInt_and_parseFloat_functions", "parseInt and parseFloat") }}</li>
 <li>{{ web.link("#Number_and_String_functions", "Number and String") }}</li>
 <li>{{ web.link("#escape_and_unescape_functions", "encodeURI, decodeURI, encodeURIComponent, and decodeURIComponent") }} (all available with Javascript 1.5 and later).</li>
</ul>
<p>The following sections introduce these functions. See the <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a> for detailed information on all of these functions.</p>
<h3 id="eval_Function">eval Function</h3>
<p>The <code>eval</code> function evaluates a string of JavaScript code without reference to a particular object. The syntax of <code>eval</code> is:</p>
<pre class="brush: js">
eval(expr);
</pre>
<p>where <code>expr</code> is a string to be evaluated.</p>
<p>If the string represents an expression, <code>eval</code> evaluates the expression. If the argument represents one or more JavaScript statements, eval performs the statements. The scope of <code>eval</code> code is identical to the scope of the calling code. Do not call <code>eval</code> to evaluate an arithmetic expression; JavaScript evaluates arithmetic expressions automatically.</p>
<h3 id="isFinite_function">isFinite function</h3>
<p>The <code>isFinite</code> function evaluates an argument to determine whether it is a finite number. The syntax of <code>isFinite</code> is:</p>
<pre class="brush: js">
isFinite(number);
</pre>
<p>where <code>number</code> is the number to evaluate.</p>
<p>If the argument is <code>NaN</code>, positive infinity or negative infinity, this method returns <code>false</code>, otherwise it returns <code>true</code>.</p>
<p>The following code checks client input to determine whether it is a finite number.</p>
<pre class="brush: js">
if(isFinite(ClientInput)){
   /* take specific steps */
}
</pre>
<h3 id="isNaN_function">isNaN function</h3>
<p>The <code>isNaN</code> function evaluates an argument to determine if it is "NaN" (not a number). The syntax of <code>isNaN</code> is:</p>
<pre class="brush: js">
isNaN(testValue);
</pre>
<p>where <code>testValue</code> is the value you want to evaluate.</p>
<p>The <code>parseFloat</code> and <code>parseInt</code> functions return "NaN" when they evaluate a value that is not a number. <code>isNaN</code> returns true if passed "NaN," and false otherwise.</p>
<p>The following code evaluates <code>floatValue</code> to determine if it is a number and then calls a procedure accordingly:</p>
<pre class="brush: js">
var floatValue = parseFloat(toFloat);

if (isNaN(floatValue)) {
   notFloat();
} else {
   isFloat();
}
</pre>
<h3 id="parseInt_and_parseFloat_functions">parseInt and parseFloat functions</h3>
<p>The two "parse" functions, <code>parseInt</code> and <code>parseFloat</code>, return a numeric value when given a string as an argument.</p>
<p>The syntax of <code>parseFloat</code> is:</p>
<pre class="brush: js">
parseFloat(str);
</pre>
<p>where <code>parseFloat</code> parses its argument, the string <code>str</code>, and attempts to return a floating-point number. If it encounters a character other than a sign (+ or -), a numeral (0-9), a decimal point, or an exponent, then it returns the value up to that point and ignores that character and all succeeding characters. If the first character cannot be converted to a number, it returns "NaN" (not a number).</p>
<p>The syntax of <code>parseInt</code> is:</p>
<pre class="brush: js">
parseInt(str [, radix]);
</pre>
<p><code>parseInt</code> parses its first argument, the string <code>str</code>, and attempts to return an integer of the specified <code>radix</code> (base), indicated by the second, optional argument, <code>radix</code>. For example, a radix of ten indicates to convert to a decimal number, eight octal, sixteen hexadecimal, and so on. For radixes above ten, the letters of the alphabet indicate numerals greater than nine. For example, for hexadecimal numbers (base 16), A through F are used.</p>
<p>If <code>parseInt</code> encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. If the first character cannot be converted to a number in the specified radix, it returns "NaN." The <code>parseInt</code> function truncates the string to integer values.</p>
<h3 id="Number_and_String_functions">Number and String functions</h3>
<p>The <code>Number</code> and <code>String</code> functions let you convert an object to a number or a string. The syntax of these functions is:</p>
<pre class="brush: js">
var objRef;
objRef = Number(objRef);
objRef = String(objRef);
</pre>
<p>where <code>objRef</code> is an object reference. Number uses the valueOf() method of the object; String uses the toString() method of the object.</p>
<p>The following example converts the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="en-US/docs/JavaScript/Reference/Global Objects/Date">Date</a></code> object to a readable string.</p>
<pre class="brush: js">
var D = new Date(430054663215),
    x;
x = String(D); // x equals "Thu Aug 18 04:37:43 GMT-0700 (Pacific Daylight Time) 1983"
</pre>
<p>The following example converts the <code><a class="internal" href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en-US/docs/JavaScript/Reference/Global Objects/String">String</a></code> object to <code><a class="internal" href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="en-US/docs/JavaScript/Reference/Global Objects/Number">Number</a></code> object.</p>
<pre class="brush: js">
var str = "12",
    num;
num = Number(str);
</pre>
<p>You can check it. Use DOM method <code>write()</code> and JavaScript <code>typeof</code> operator.</p>
<pre class="brush: js">
var str = "12",
    num;
document.write(typeof str);
document.write("&lt;br/&gt;");
num = Number(str);
document.write(typeof num);
</pre>
<h3 id="escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5)">escape and unescape functions(Obsoleted above JavaScript 1.5)</h3>
<p>The <code>escape</code> and <code>unescape</code> functions do not work properly for non-ASCII characters and have been deprecated. In JavaScript 1.5 and later, use <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/encodeURI" title="en-US/docs/JavaScript/Reference/Global_Functions/encodeURI">encodeURI</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/decodeURI" title="en-US/docs/JavaScript/Reference/Global_Functions/decodeURI">decodeURI</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/encodeURIComponent" title="en-US/docs/JavaScript/Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code>, and <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/decodeURIComponent" title="en-US/docs/JavaScript/Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code>.</p>
<p>The <code>escape</code> and <code>unescape</code> functions let you encode and decode strings. The <code>escape</code> function returns the hexadecimal encoding of an argument in the ISO Latin character set. The <code>unescape</code> function returns the ASCII string for the specified hexadecimal encoding value.</p>
<p>The syntax of these functions is:</p>
<pre class="brush: js">
escape(string);
unescape(string);
</pre>
<p>These functions are used primarily with server-side JavaScript to encode and decode name/value pairs in URLs.</p>
<div>
 {{ autoPreviousNext("JSGChapters") }}</div>
Revert to this revision