JavaScript Functions

Below are the two most common syntaxes to create IIFE:

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

The add and sub functions are methods of calc object.

Function Expressions

JavaScript functions are capable of more than just merely enclosing a bunch of codes while waiting for the call to execute. Functions have evolved over time leading to new definitions, execution methods and syntaxes. This post will cover some of the present roles JavaScript functions have played so far.

Knowing the different ways of expressing and defining functions opens up the possibility of implementing a logic in a more optimal way in JavaScript. Also, you may be able to answer the interview questions more easily.

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 function add.

Now for a function within function example:

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

into

// Some of the ways to create IIFEs !function() { /* ... */ }(); +function() { /* ... */ }(); new function() { /* ... */ }; 

IIFE is ideal for writing code that needs to execute only once, namespacing, creating closures, creating private variables and more. Below is an example of IIFE use.

function *function_name(){} 

Generator functions create iterators. The iterator’s next method is then used to execute the code inside the generator function until the yield keyword is reached. After that, the iterated value identified by the yield keyword is returned by the generator function and the execution is halted.

When you simply state a function with function keyword , optional parameters and body of code, it’s a function declaration.

Below is a simple example:

When you add new keyword before a function and call it, it becomes a constructor that creates instances. Below is an example where constructors are used to create instances of Fruit and values are added to each Fruit‘s properties.

Methods

I’ve included a list of references below, where you will find links to references and articles that go in-depth on different topics separately. Both the ES6 standard functions will work only in Firefox at the moment.

Put that declaration in a JavaScript expression (like in an assignment or arithmetic expression), it becomes a function expression.

The generator function again executes when the next method is called until the next yield keyword is reached. Once all of the yield expressions are executed, the yielded value returns undefined.

When a function is an object’s property, it is called method. Since a function is also an object, a function inside another function is also a method. Below is an example for a method inside object.

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

Function expressions however aren’t hoisted since the functions become part of the expressions and are not stand-alone declarations.

Constructors

var sing = () => { console.log('singing...') }; 

Arrow functions are anonymous and does not have its own this value, this inside it will be same as this in the enclosing code. Also, you cannot change it to a constructor with new keyword.

function* function_name(){} 

or

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

and

function *fruits(fruit) { yield* veggies(fruit); yield "Grapes"; } function *veggies(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 if you want to go through values one by one at your preferred point in the code by pausing it, rather than in one go like in looping through an array.

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

function Fruit(){ var name, family; // Scientific name & family this.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 × sinensis" console.log(apple.getName()); // "Malus domestica" console.log(orange.getFamily()); // "Rutaceae" 

Arrow Functions (ES6 Standard) [Only in Firefox]

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

var sing = function(){ console.log('singing...') }; 

is the same as:

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

Generator Functions (ES6 Standard) [Only in Firefox]

Another new function definition from ES6 Standard is Generator Function. Generator functions are capable of halting and continuing its execution. Its syntax is:

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

Immediately Invoked Function Expression (IIFE)

It’s a function expression, the code of which gets executed immediately (only once when it’s evaluated). You can create one by simply adding () (syntax used for calling a function) right after a function expression. They can be anonymous (no name to call it with).

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

There’s also a yield* expression which passes the value to another generator function

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

// Function declaration function function_name() {}; // Function expression var function_name = function() {}; 

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

() => { /* body */ } 

This sample function:

var page_language = (function () { var lang; // Code to get the language of the page return lang; })(); 

The code to get the page’s language executes only once (preferably after the page loads). The result is stored in page_language for later use.

function *generator_func(count) { for(var i=0;i<count;i++){ yield i+1; } } 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:

Conclusion

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

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

References

  • ECMAScript Language: Functions and Classes
  • Immediately-Invoked Function Expression (IIFE)
  • The Basics Of ES6 Generators
  • Arrow Functions
  • FunctionMozilla Developer Network


Leave a Reply