10 must know basic things of JavaScript Function
Function is one of the core concept of JavaScript. To perform a task it should take some input and return an output. Let’s explore about some basic core concepts of JavaScript.
Declaring a Function:
To declare a function, first you should write function keyword, then the name of function and parameter, finally the body of function between curly braces. Here is an example:
function sum(x, y){return x + y;}
Local Variable:
The variable that declare inside a function is called local variable.
function fullName() { let name = "Hello, I'm John Doe!"; // local variable
alert( name );
} fullName(); // Hello, I'm John Doe!
alert( name ); // <-- Error! The variable is local to the function
Global Variable:
When a variable declare outside of a function it called global variation.
let name = 'John'; function fullName() {
let name = 'Hello, ' + name;
alert(name);
} fullName(); // Hello, John
Parameter :
You can pass data to functions using parameters. In the example below ‘x’ and ‘y’ are parameters.
function sum(x, y){return x + y;}
Default Parameter :
In JavaScript, default parameter of function is “undefined”. But you can set a default value for a parameter. Here is some examples to clear the function parameter concepts.
function sum(x, y) { return x + y; }console.log(sum(6, 3)); //result is 9
Here x and y are the parameters of function named ‘sum’ . 6 and 3 are the value for x and y. Let’s see the result if you don’t assign a value to y parameter.
function sum(x, y) { return x + y; }console.log(sum(6)); //result is NaN
Here result in NaN because value of y parameter is undefined. To ignore this kind of result you can set a default value of a parameter.
function sum(x, y = 0) { return x + y; }console.log(sum(6)); //result is 6
Rest Parameter:
There is another parameter in JavaScript called Rest Parameter. you can pass multiple arguments as an array. Rest parameter is introduced in the latest version of JavaScript, Es6.
// Without rest parameterfunction sum(x, y){return x + y;}console.log(sum(1, 2)); //result is 3console.log(sum(1, 2, 3, 4, 5)); //result id 3 also;
// es6 rest parameterfunction sum(...input){let add= 0;for(let i of input){add+=i;}return add;}console.log(sum(1,2)); //result is 3console.log(sum(1,2,3)); //result is 6console.log(sum(1,2,3,4,5)); //result is 15
Argument Vs Parameter :
Sometimes those arguments and parameters terms are confusing to newbies.
Parameters are specified in function declaration, on the other hand arguments are those which we pass through a function.
function sum(x, y) {return x + y;}console.log(sum(6, 3)); //result is 9
Here ‘x’ and ‘y’ are parameters and arguments are 6 and 3.
Spread Operator:
Spread Operator is commonly used in the variable array which contain multiple values. It allows you to get a list of parameters from an array. Let’s see an example for the use of spread operator.
// normal array concat() methodlet firstOne = [1,2,3];let secondOne = [4,5];firstOne = firstOne.concat(secondOne);console.log(firstOne); //result is [ 1, 2, 3, 4, 5 ]// spread operator can do the same joblet firstOne = [1,2,3];let secondOne = [4,5];firstOne = [...firstOne,...secondOne];console.log(firstOne); //result is [ 1, 2, 3, 4, 5 ]
Anonymous Function:
A function without any identifier name is called anonymous function. You can define it as unnamed function too.
Named Function:
function go(){ alert('Here you are');}
go();
Anonymous function:
var go = function(){alert('Here you are');}
go();
Arrow Function:
Arrow function were introduced in the latest version on JavaScript called Es6. This is very simple and concise. In other words, it is the shorter version of regular/traditional function.
// regular function
doSomething = function() {
return "Do something";
}// Arrow function
doSomething = () => {
return "Do something";
}
It could be shorter! If there is only one statement, and it returns a value, you can remove the brackets and the return
keyword.
doSomething = () => "Hello World!";
Function is widely used in JavaScript. Functions allow a programmer to divide a big program into a number of small and manageable functions.