Part 3— Unique JavaScript Notes by Sivaganesh Panditi

JavaScript functions are unique and mysterious when compared to other programming languages.

Let’s see them deeply.

Defining and invoking Functions

// Defining Function
function functionName(a,b){  
    return a*b;
}

// invoking function
functionName(1,2);

//Defining Anonymous function
const functionName = function(a,b){return a*b;};

//invoking function
functionName(1,2);

// Defining function with the help of function constructor
const functionName = new Function("a", "b", "return a*b");
//invoking function
functionName(1,2);

// Self invoking function
(function functionName(a,b){  
    return a*b;
})(1,2);

Functions can be hoisted

Functions can be used as variable

function can be treated as an object since it have arguments (considered as local variables) and methods like toString();

But typeof function is function

Arrow Function

// Arrow Function
const fun=(x,y)=>x*y;
// Good Practice
const fun = (x,y)=>{return x*y;};

Arrow Function cannot have this keyword and not suited as object method.

Arrow function are not hoisted

Always it is good practice to define Arrow function as constant, because arrow function value is always a constant.

Parameters

Function will not check with how many arguments the function is invoked. If argument is missing then function will assign undefined as a value to that argument or we can assign some default values as shown below.

function sample(a,b,c){
  return a*b*c;
}

const d= sample(1,2);
/* In the above example argument c doesn't have value. Hence the value of
  c becomes undefined which resulted in unintended return value  */

// To avoid it lets define default value for argument as shown below

function sample(a,b, c=10){
  return a*b*c;
}

We will not define datatype for function arguments and function will not check for argument datatype.

//Function rest parameters. We can pass any number of arguments
function sample(...params){
  return params[0];
}

const value = sample(1,2,3,4,5,6,7,8);

Function contains Argument object by default in it. If any argument value is missing or extra, those values will be stored in Argument object.

Function invoking is always passbyvalue except for objects, arrays and date

Global object

Function doesn’t belongs to any object. By default java script have global object.

In a Html page global object will be the page itself.

In browser, browser window will be the global object.

By default global object in JavaScript is browser window object. Hence we can invoke function like below as well

function sample(a,b){
  return a*b;
}
const s= sample(1,2);
const s= window.sample(1,2);

this keyword

In Object method, this refers Object

By default this refers global object

this in function refers global object

this in strict mode function refers undefined

In event this refers, element that received event

this in call(), apply(), bind() refers to any object

// call method in object as shown below
const obj= {
            name:'siva',
            score: function calScore(1,b){ return a*b;}
            }

 const score = obj.score();

// call function with function constructor

function sample(a,b){
  this.name=a; // here this will be undefined until the function invoke
  this.score=b;
}

const obj = new sample('siva',2);

console.log(obj.name); // value is siva