setInterval

It runs the function regularly after the given interval of time. Suppose, If you want to stop the actions you should call clearInterval(timerId).

The setInterval method syntax is same as setTimeout.

Syntax:

let timerId = setInterval(func|code, delay[, arg1, arg2...])

Example:

let timerId = setInterval(() => alert('I will run every 3 seconds continuously'), 3000);

The above alert will show up every 3 seconds once.

setInterval with clearInterval

Example:

1 2 3 4

let timerId = setInterval(() => alert('Test'), 2000); // after 5 seconds stop the interval setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);

Explanation:
       
                1. Line number 1 will be run continuously for every 2 seconds.

                2. But line number 5 will clear the interval time after 5 seconds. So after 5 seconds alert 
                    "Test" will not shown.

setTimeout with clearTimeout

We can use “timer identifier” which will be returned by setTimeout and the same we can use to cancel the execution.

Syntax:

let timerId = setTimeout(...); clearTimeout(timerId);

Example:

1 2 3

let myVar = setTimeout(function(){ alert("Hello"); }, 3000); let xxx = clearTimeout(myVar);

Explanation:

1. Line number 1 will be executed initially

2. To display the alert Hello message 3 seconds need to be waited.

3. But line number 3 will be executed before three seconds. So alert message will not be displayed here.

setTimeout

For executing some methods based on some times, then we should go ahead with setTimeout and  setInterval.

setTimeout allows to run a function once after the interval of time.


The syntax:

let timerId = setTimeout(func|code, delay[, arg1, arg2...])

func|code -  Function or a string of code to execute. Mostly, this will be a function. But some peoples may pass a string of code and its not recommended. The reason I have mentioned in Javascript interview section.

delay -  The delay before run, should be mentioned in milliseconds (1000 ms = 1 second).

arg1, arg2…  - arguments.

Simple Example:

1 2 3 4 5

function sayHi(welcomeMsg, user) { alert( welcomeMsg + ', ' + user ); } setTimeout(sayHi, 5000, "Hello", "Raj"); // Hello, Raj

Explanation:

The sayHi method will be called after 5 seconds. Just compare this example with syntax. Hope you got it.

Note:

Do not pass like sayHi(). You should pass always method name only like sayHi without brackets.

Named Function Expression - NFE

Named Function Expression (NFE)  - We are giving a name to Function Expressions.

Before going into NFE, we should understand what is Ordinary Function Expression. Below is example,

let sayTest = function(one) {
  alert(one);
};

Now just add a name to that, (NFE).

let sayTest = function yourName(one) {
  alert(one);
};

It looks like very simple. But everything is designed for some reason. Let check why we are giving name like this?


1. It allows the function to reference itself internally.

2. It will not be visible to outside of the function.

let sayTest = function yourName(one) {
  if (one) {
    alert(one);
  } else {
    yourName("Guest"); // use yourName to re-call itself
  }
};

sayTest(); // Guest

// Error here
yourName(); // Error Here - not visible outside of the function

Come to our final main concept. Why we want this NFE. See below example,

1 2 3 4 5 6 7 8 9 10 11 12

let sayHi = function yourName(one) { if (one) { alert(`Hello, ${one}`); } else { yourName("Guest"); // Because of this line, this code working //sayHi ("Guest"); // This will not work. } }; let welcome = sayHi; sayHi = null; welcome(); // nested call works here perfectly

Explanation :

1. Here line number 1, yourName is your NFE. 

2. You have used this name inside line number 5.

3. Suppose if you change the line number 5 to like sayHi("Guest"), will throw an error. Why ?

4. Because line number 10, sayHi was assigned to null. So this will be reflected to line number 9 too. So error will be thrown. (There is no sayHi function).

5. To solve that, we should add NFE , Because internal call possible in NFE.

Function Object with Custom Properties

We can add our own custom properties with function object.

Below example will explain you How do we use custom property with function object.

function countTest() {
  alert("Hi");

  countTest.counter++;
}
countTest.counter = 0; // initial value

countTest(); // Hi
countTest(); // Hi

alert( `Called ${countTest.counter} times` ); // Called 2 times

Explanation :

We are calling countTest function at two times. So while calling at every time counter (custom property) will be executed and returning 2 in alert.

Function object - length property

Using length property with function object, will return how many parameters the function using.

Example:

function first(a) {}
function second(a, b) {}
function multiple(a, b, ...more) {}

alert(first.length); // 1
alert(second.length); // 2
alert(multiple.length); // 2

Note: The last one, multiple function showing parameter length as 2. Because rest parameters(...) will not be calculated.

Function Object - name property

Function objects contain some properties.

1. name property

We can access a function’s name with the help of the “name” property.

function testFunctionName() {
  alert("Hi");
}

alert(testFunctionName.name); //testFunctionName


let sayHi = function() {
  alert("Hi");
}

alert(sayHi.name); // sayHi

Above code, you can see we are getting the function name with the help of name property.


It will work with function which is placed inside object too. See below to understand further,

let user = {

  sayHi() {
    // ...
  },

  sayWelcome: function() {
    // ...
  }

}

alert(user.sayHi.name); // sayHi
alert(user.sayWelcome.name); // sayWelcome

Note: Suppose if there is no name for function then empty string will be returned.