JavaScript function
Introduction
Functions are basic building blocks in JavaScript
Functions are objects, and they can be manipulated by programs
JavaScript can assign functions to variables and pass them to other functions
JavaScript allows nested function definitions
// Traditional function
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5
Arrow function
// Arrow function
const add = (a, b) => a + b;
In JavaScript, => is used to define arrow functions, which provide a shorter syntax for writing
functions and have different behavior for this.
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
closure
In programming, a closure is a combination of:
A function object, and
The lexical environment (or scope) in which the function was declared.
This environment includes any local variables that were in-scope at the time the closure was
created.
function outerFunction() {
let outerVariable = 'I am from outer scope';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const closureFunc = outerFunction();
closureFunc(); // Outputs: I am from outer scope
Here, innerFunction is a closure because it “remembers” the variable outerVariable from its
outer scope even after outerFunction has finished executing.
Closures are used extensively for:
• Data encapsulation
• Creating function factories
• Implementing private variables
• Callback and asynchronous programming
function makeMultiplier(multiplier) {
// `multiplier` is captured in the closure
return function(value) {
// `value` is passed as a parameter
return value * multiplier;
};
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);
console.log(double(5)); // Outputs: 10
console.log(triple(5)); // Outputs: 15
Outer Function:
multiplier(factor):The multiplier function takes one argument, factor.
It returns an inner function that takes number as an argument and returns the result of
multiplying number by factor.
Inner Function (Closure):
The inner function (number) => number * factor is a closure. It remembers the factor variable
from the outer function even after multiplier has finished executing.
This is possible because JavaScript functions can "close over" variables from their outer scope.
Assigning to double:
When you call multiplier(2), the outer function executes and returns the inner function. The
returned function is assigned to the double variable.
double now holds a function that will multiply any number passed to it by 2 (since factor was 2
when it was created).
Calling double(5):
When you call double(5), it invokes the inner function with number = 5.
The inner function multiplies 5 by the factor (which is 2), and returns 10.
Secret arrays
A SECRET
ARRAY
arguments array: Functions have one secret. They contain the arguments array. This array
contains all the arguments passed to the function.
i.e., function poll() {
var affirmative = arguments[0];
var negative = arguments[1];
}
// Calling the function
poll(“affirmative”, “negative”);
Function as object
Functions are first-class objects
•Assigned to variables
•Passed as arguments to other functions
•Returned from functions
•Have properties and methods just like other objects
1. Assigning a function to a
variable
const greet = function(name){
return "hello "+name;
}
console.log(greet("ABC")); //output hello ABC
const greet = function(name) {
return `Hello, ${name}`;
};
2. Passing a function as an
argument
function callFunction(fn, value) {
return fn(value);
}
callFunction(greet, "Alice"); // Returns: "Hello, Alice"
3. Returning a function from
another function
function multiplier(factor) {
return function(number) {
return number * factor;
};
}
const double = multiplier(2);
console.log(double(5)); // 10
4. Setting properties on a
function
function sayHi() {
console.log("Hi");
}
sayHi.language = "English";
console.log(sayHi.language); // "English"
5. Functions have built-in
methods
call(), apply(), and bind() are methods on function objects
function showName() {
console.log(this.name);
}
const person = { name: "John" };
showName.call(person); // "John"
6. Prototype property
Every JavaScript function has a prototype property. This property is an object, and it contains
methods and properties that are shared by all instances created by that function (when it's used
as a constructor).
// Function definition
function myFunction() {}
// Adding a method to the function's prototype
myFunction.prototype.sayHello = function() {
console.log("Hello from the function's prototype!");
};
// Accessing the prototype
console.log(myFunction.prototype); // { sayHello: [Function] }
// Function with a prototype
function anotherFunction() {}
// Modifying the prototype directly
anotherFunction.prototype.description = "This is a function prototype";
// Accessing the property from prototype
console.log(anotherFunction.prototype.description); // "This is a function prototype"
