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 parameter
function sum(x, y){
return x + y;
}
console.log(sum(1, 2)); //result is 3
console.log(sum(1, 2, 3, 4, 5)); //result id 3 also;

// es6 rest parameter
function sum(...input){
let add= 0;
for(let i of input){
add+=i;
}
return add;
}
console.log(sum(1,2)); //result is 3
console.log(sum(1,2,3)); //result is 6
console.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() method
let 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 job
let 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.