Top 5 advanced JavaScript function concepts to Learn

Introduction:
A function is a piece or block of code that is created to perform single or multiple tasks. Every major programming language has functions because functions are one of the essential parts of modern programming. JavaScript also supports functions. Over time, JavaScript has upgraded functions in several ways to make them more programmer-friendly. In recent years, more and more advanced concepts are added in JavaScript. In this article, we are going to discuss the advanced working with functions in JavaScript.

What are advanced Javascript Function Concepts?

Here is a list of advanced JavaScript function concepts which every experienced Javascript programmer and web developer should know. Beginners can also learn these concepts to become a better Javascript developers.

1. Rest parameter

Usually, a function is created and parameters are defined. Then it is called by passing the arguments.

const demo = (arg1, arg2, arg3) = {

}

demo(1, 2, 3)

Another way to call the “demo” function is:

demo()

or this:

demo(1, 2, 3, 4, 5)

In JavaScript, it is not necessary to pass exactly the same number of arguments as defined. So if the number of arguments passed during the function call is more than the number of parameters defined, then we can use the rest parameter.

 

const demo = (...args) => {

  console.log(args[0]) //1

  console.log(args[1]) //2

  console.log(args[2]) //3

  console.log(args[3]) //4

  console.log(args[4]) //5

}

demo(1, 2, 3, 4, 5)

In the above code, the rest parameter is used to gather all the arguments in an array named “args”.

Suppose, we know the function will definitely receive two arguments but in some cases, it may receive more than two arguments.

const demo = (arg1, arg2, ...args) => {

}

demo(1, 2)

demo(1, 2, 3, 4, 5)

In the first function call, “args” is an empty array but in the second function call, it contains the last three values ([3, 4, 5]).

2. Functions are object

A function in JavaScript is a value and every value has a type. The type of function in JavaScript is the object.
Every function has some in-built properties. Let’s discuss these properties one by one.

name

The “name” property is used to get the name of a function if it has.

const demo = () => {};

console.log(demo.name); // “demo”

length

The “length” property returns the total number of function parameters.

const demo = (arg1, arg2, arg3) => {}; 

console.log(demo.length); //3

“new function”

JavaScript provides multiple ways for creating functions. One of these ways is by using the “new function” syntax. Though it is rare syntax, it can be useful.

let demo = new Function("arg1", "arg2", "return arg1 + arg2");

The first argument should be the parameters of the function and the last should be the function body. In the above code, “arg1” and “arg2” are parameters while “return arg1 + arg2" is the function body.

We can also create a function using this syntax without parameters.

let demo = new Function(“return Hello World!”)

3. Spread operator

The spread operator is used to “spread” an array. In simple words, it is used to open an array. It can be used with in-built functions.

Observe the following code.

const value = Math.max(4, 1, 5, 3);

console.log(value); //5

In the “max” method, we have to pass a list of numbers. Now suppose we have an array of numbers and we want to use it with the “max” method. Instead of writing complex logic, we can simply use the spread operator.

 

const numbers = [4, 1, 5, 3];

const value = Math.max(...numbers);

console.log(value); //5

The arrays can be expanded using the spread operator, thus doing the job easily.

4. Generator functions

In ES6, a new concept for functions was introduced. In this concept, a function can be paused in the midway of its execution. Such functions are known as function generators.

A generator function is controlled using the next() method and it returns an object. The object has two fields - value and done. While the “value” holds the value, the “done” returns true when the function’s execution is completed and false if not.

 

function* demo() {

  yield "Hi";

  yield "Bye";

}

const generator = demo();

console.log(generator.next());

console.log(generator.next());

console.log(generator.next());

A function generator is created using an asterisk(*) sign. Inside the function body, the “yield” keyword is used. It signifies the function execution will pause at this point and the value written after it will be returned.

Next, the “demo” function is assigned to a variable because it returns a generator object. Now, we can use the generator object to execute the “next” method. Following is the output.

{

  done: false,

  value: "Hi"

}

{

  done: false,

   value: "Bye"

}

{

  done: true,

  value: undefined

}

The value of “done” is false for the first two calls while it is true for the last call. Moreover, we can also see the value yielded every time.

That's all about the advanced Javascript function concepts for beginners to learn. It is very important to learn functions in JavaScript. A JavaScript developer should learn as much as possible about functions. In this article, we discussed some of the advanced and rare concepts related to JavaScript functions.