A function is a block of code or a set of statements that performs a specific task and can be kept and maintained separately from the main program. We can use the same code many times with different arguments to make different results. It makes code more readable, reusable, and organized. To execute a function, we need to invoke or call it. Functions are executed in the sequence they are called; not in the sequence they are defined.
Here,
function – keyword for function declaration.
functionName() – function name.
para1, para2, ... – function parameters. They are listed inside the parentheses ( ) in the function definition.
{ //code ... } – code to be executed by the function.
return – to get the value of the function.
functionName(arg1, arg2,...) – call or invoke the function.
arg1, arg2,... – function arguments. They are the values received by the function when it is called. Inside the function, the arguments behave as local variable.
Returning Values from a Function
A function can return a value. The value may be of any type (arrays and objects). Each function returns undefined unless we specify a return value. To specify a return value for a function, we need to use a return statement followed by an expression or a value. The return statement usually is placed on the last line of the function with a semicolon. Any code after the return keyword is not executed.
Syntax:
function functionName(para1, para2, ...){
//code ...
return x;
}Example 1: After return statement, console.log(x) will not be executed:
const myFunc = (a,b) => {
let x = a + b;
return x;
console.log(x); // It is not executed
};
let myResult = myFunc(5,7);
console.log(myResult); //returns 12Example 2: When return statement is on the last line, both console.log() will be executed:
const myFunc = (a,b) => {
let x = a + b;
console.log(x); //returns 12
return x;
};
let myResult = myFunc(5,7);
console.log(myResult); //returns 12Example 3: There is no return statement in the following function and it returns undefined:
const myFunc = (a,b) => {
let x = a + b;
};
let myResult = myFunc(5,7);
console.log(myResult); //returns undefinedExample 4: We can also use the return statement followed by an expression:
const myFunc = (a,b,c) => {
return a + b + c;
};
let myResult = myFunc(5,2,4);
console.log(myResult); //returns 11Example 5: Return different values based on conditions using Conditional/Ternary operator:
const myFunc = (a,b) => {
const x = (a > b) ? 'a is greater than b'
: (a < b) ? 'a is less than b'
: 'a is equal to b'
return x;
};
let myResult = myFunc(5,5);
console.log(myResult); //returns a is equal to bHow to define Functions in JavaScript
There are several ways to define a JavaScript function:
● Function Declaration / Name Function / Regular Function: defines a function with name.
Syntax:
function functionName() {}Example:
function functionName(a,b){
let x = a + b;
return x;
}
const myResult = functionName(4,7);
console.log(myResult); // returns 11● Function Expression: A function can be defined using an expression. A function expression is assigned to a variable and the variable is used as a function. It is also called an anonymous function (a function without a name).
Syntax:
const myAdd = function () {}Example:
const myAdd = function (a,b) {
return a + b;
}
console.log(myAdd(3,6)); // returns 9● Arrow Function: It has a shorter syntax compared to function expression and we don’t need the function keyword. It is always anonymous.
Function expressions and arrow functions are not hoisted, so they must be defined before they are used.
Syntax:
const myAdd = () => {}Example:
const myAdd2 = (a,b) => { return a + b };
console.log(myAdd2(3,4)); // 7
//without curly braches and return keyword for single statement.
const myAdd1 = (a,b) => a+b;
console.log(myAdd1(4,6)); // 10
const myText = () => console.log('Hello World!');
myText(); // Hello World!● Immediately Invoked Function Expression (IIFE): It is invoked automatically, without being called. It only runs once.
Syntax:
(function(){})(); Or (() => {})();Example:
(function() {
console.log('Hello World!');
})(); // Hello World!
Or,
((a,b) => {
let c = a * b;
console.log(c);
})(3,6); // 18What is JavaScript Closures?
A closure allows us access to an outer or parent function’s scope from an inner function.
For example:
function outerFunc() { // outerFunc outer/parent function
let counter = 0; //'counter' is a local variable for 'outerFunc'
return function innerFunc() { //'innerFunc' forms the closure
counter++; //using variable 'counter' from 'outerFunc'
return counter;
}
}
const newCount = outerFunc();
console.log(newCount()); // 1
console.log(newCount()); // 2Another example:
const count = ((a) => {
return (b) => {
a+=3;
return a+b;
}
});
const newCount = count(0);
console.log(newCount(1)); // a=0+3=3; b=1 a+b=> 4
console.log(newCount(2)); // a=3+3=6; b=2 a+b=> 8
console.log(newCount(5)); // a=6+3=9; b=5 a+b=> 14
console.log(newCount(-5)); // a=9+3=12; b=-5 a+b=> 7What is a First-Class Function or First-Class Citizen?
A First-Class function is a function that is treated like any other variable. That means, the First-class function can be assigned as a value to a variable, can be passed as an argument to other functions and can be returned by another function. In JavaScript, the function is called First-Class Citizen.
We can see with examples below:
1. Assigning a function as a value to a variable:
const add = (a,b) => a + b; //save add function as a variable
console.log(add(4,6)); //call(invoke) add function by adding ()
// to use the variable and value is 102. Passing a function as an argument:
const add = (a,b) => a + b;
const totalAdd = (t,c) => {
return (t + ' = '+ c);
}
console.log(totalAdd('Total', add(4,6))); //pass add function as an
//argument to totalAdd function and returns Total = 103. Returning a function from another function:
const add = (a,b) => {
let sum = a + b;
return () => sum; //return an anonymous function from 'add' function
};
console.log(add(4,6)()); //returns 10What is a higher-order function?
When a function returns a function (see the above example 3) or takes other functions as argument (see the above example 2), it is called a higher-order function.
map(), filter(), reduce() etc are examples of higher-order function.
Example:
const myArray = [3,6,8];
const mult = a => a * 3;
const newArray = myArray.map(mult);
console.log(newArray); //returns [9, 18, 24]In short:
const myArray = [3,6,8];
const newArray = myArray.map(a => a * 3);
console.log(newArray); //returns [9, 18, 24]
0 Comments