JavaScript Functions: Complete Guide

JavaScript Functions: Complete Guide

Hello friends today we gonna learn about JavaScript Functions: Complete Guide. So read this article, JavaScript Functions: Complete Guide step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: JavaScript Functions: Complete Guide

JavaScript functions are capable of more than just embedding a bunch of codes while waiting for the call to be executed. Functions have evolved over time, leading to new definitions, execution methods, and syntax. This post will cover some of the current roles that JavaScript functions have played so far.

The different ways of expressing and defining functions opens up the possibility to implement a logic in a more optimal way in JavaScript. You may also find it easier to answer the interview questions.

back to menu ↑

Function expressions

When you simply specify a function with function keyword, optional parameters and code, it is one function statement

Put that declaration in a JavaScript expression (such as in a command or arithmetic expression), it becomes a function expression

// Function declaration function function name () {}; // Function expressionvar function_name = function () {};

All JavaScript declarations are hoisted (moved up in scope) during the evaluation. Hence, writing a function call before the function statement is in order (since the declaration will be moved up anyway).

function name (); // function call[WORKS]function function name () {};

However, function expressions are not hoisted, since the functions become part of the expressions and are not stand-alone declarations.

function name (); // function call[WON’T WORK]var function_name = function () {};

back to menu ↑

Immediately Called Function Expression (IIFE)

It’s a function expression whose code is immediately executed (only once when evaluated). You can create one by simply adding () (syntax used to call a function) right after a function expression. They can be anonymous (no name to mention).

Below are the two most common syntax to create IIFE:

(function optional_function_name () {// body} ());

and

(function optional_function_name () {// body}) ();

The parenthesis around the function declaration converts it to an expression and then appends () after the function is called. You can use other ways to make IIFE as long as you add () after a function expression (as below), but the preferred methods are the above two.

// Some Ways to Make IIFEs! Function () {/ *… * /} (); + function () {/ *… * /} (); new function () {/ *… * /};

IIFE is ideal for writing one-time code, namespace, creating closures, creating private variables, and more. Below is an example of IIFE usage.

var page_language = (function () {var lang; // code to return page language lang;}) ();

The code to get the language of the page is only executed once (preferably after the page has loaded). The result is saved in page_language for later use.

back to menu ↑

Methods

When a function is the property of an object, it is called method. Since a function is also an object, a function within another function is also a method. Below is an example of a method in object.

var calc = {add: function (a, b) {return a + b}, sub: function (a, b) {return ab}} console.log (calc.add (1,2)); //3console.log(calc.sub(80,2)); // 78

The add and sub functions are methods of calc object.

Now for a function within a function example:

function add (a) {return function (b) {return a + b;}} console.log (add (1) (2)); // Output is 3

The returned anonymous function is a method of adding functions.

Note: Since parameter (a) of function add in the example above is available for the following function call, this type of process is called currying

back to menu ↑

Constructors

When you add a new keyword before a function and call it, it becomes a constructor that creates instances. Below is an example that uses constructors to create instances of Fruit and adds values ​​to the properties of each Fruit.

function Fruit () {var name, family; // Scientific name & familythis.getName = function () {return name;}; this.setName = function (value) {name = value}; this.getFamily = function () {return family;}; this.setFamily = function (value) {family = value};}

var apple = new fruit (); apple.setName (“Malus domestica”); apple.setFamily (“Rosaceae”);

var orange = new Fruit (); orange.setName (“Citrus à ??  ?? à ¢  ??  ?? sinensis”); orange.setFamily (“Rutaceae”);

console.log (orange.getName ()); // “Citrus à ?? A ?? à ¢  ?? A ?? sinensis ”console.log (apple.getName ()); // “Malus domestica” console.log (orange.getFamily ()); // “Rutaceae”

back to menu ↑

Arrow functions (ES6 standard) [Only in Firefox]

A new function definition from ES6 Standard provides a shorter syntax for function expression. The syntax is

() => {/ * body * /}

This example function:

var sing = function () {console.log (‘sing…’)};

is the same as:

var sing = () => {console.log (‘sing…’)};

Arrow functions are anonymous and have no value of their own, the one inside will be the same as the one in the attached code. You also cannot change it to a constructor with a new keyword.

They are useful when you want this to be the same inside a function as outside and the shorter syntax makes the code for writing the function inside the function concise (as below)

setInterval (function () {console.log (‘message’)}, 1000);

in

setInterval (() => console.log (‘message’), 1000);

back to menu ↑

Generator functions (ES6 standard) [Only in Firefox]

Another new function definition from ES6 Standard is Generator Function. Generator functions are able to stop and continue execution. The syntax is:

function * function name () {}

or

function * function name () {}

Generator functions create iterators. The next method of the iterator is then used to run the code in the generator function until the keyword yield is reached. After that, the repeated value identified by the yield keyword is returned by the generator function and execution is stopped.

The generator function is executed again when the next method is called, until the next yield keyword is reached. Once all revenue expressions have been output, the revenue value is returned undefined.

Below is a simple example:

function * generator_func (count) {for (var i = 0; i

var itr = generator_func (4); console.log (itr.next ()); // object {value: 1, done: false} console.log (itr.next ()); // object {value: 2, done: false} console.log (itr.next ()); // object {value: 3, done: false} console.log (itr.next ()); // object {value: 4, done: false} console.log (itr.next ()); // object {value: undefined, done: true} console.log (itr.next ()); // object {value: undefined, done: true}

Here’s another example:

function * randomIncrement (i) {yield i + 3; yield i + 5; yield i + 10; yield i + 6;} var itr = randomIncrement (4); console.log (itr.next (). value); //7console.log(itr.next().value); //9console.log(itr.next().value); // 14

There is also a yield * expression that passes the value to another generator function

function * fruits (fruit) {yield * veggies (fruit); yield “Grapes”;}

function * vegetables (fruit) {yield fruit + “and spinach”; yield fruit + “and broccoli”; yield fruit + “and cucumber”;}

var itr = fruits (“Apple”); console.log (itr.next (). value); // “Apple and Spinach” console.log (itr.next (). Value); // “Apple and Broccoli” console.log (itr.next (). Value); // “Apple and Cucumber” console.log (itr.next (). Value); // “Grapes” console.log (itr.next (). Value); // undefined

Generator functions are useful when you want to cycle through values ​​one at a time at the desired point in the code by pausing them, rather than all at once, as when traversing an array.

back to menu ↑

Conclusion

I have enclosed a list of references below, where you will find links to references and articles that individually address different topics. Both standard features of ES6 currently only work in Firefox

back to menu ↑

References

  • ECMAScript Language: Functions and Classes
  • Immediately Invoked Function Expression (IIFE)
  • The basics of ES6 generators
  • Arrow functions
  • Position – Mozilla Developer Network
back to menu ↑

JavaScript Functions: Complete Guide: benefits

  • The JavaScript Functions: Complete Guide tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the JavaScript Functions: Complete Guide guide is free.

back to menu ↑

Faq

Tutorial summary of JavaScript Functions: Complete Guide

In this guide, we told you about the JavaScript Functions: Complete Guide; please read all steps so that you understand JavaScript Functions: Complete Guide in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the JavaScript Functions: Complete Guide, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the JavaScript Functions: Complete Guide tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide JavaScript Functions: Complete Guide. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the JavaScript Functions: Complete Guide, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “JavaScript Functions: Complete Guide”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide JavaScript Functions: Complete Guide, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo