{"id":24337,"date":"2015-07-21T21:01:29","date_gmt":"2015-07-21T13:01:29","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24337"},"modified":"2017-10-31T19:52:45","modified_gmt":"2017-10-31T11:52:45","slug":"javascript-functions","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/javascript-functions\/","title":{"rendered":"JavaScript Functions"},"content":{"rendered":"

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.<\/p>\n

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

Function Expressions<\/h2>\n

When you simply state a function with function<\/code> keyword , optional parameters and body of code, it\u2019s a function declaration<\/em><\/strong>.<\/p>\n

Put that declaration in a JavaScript expression (like in an assignment or arithmetic expression), it becomes a function expression<\/em><\/strong>.<\/p>\n

\/\/ Function declaration\r\nfunction function_name() {};\r\n\/\/ Function expression\r\nvar function_name = function() {};\r\n<\/pre>\n
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).<\/p>\n
function_name();\/\/function call[WORKS]\r\nfunction function_name(){};\r\n<\/pre>\n
Function expressions however aren\u2019t hoisted since the functions become part of the expressions and are not stand-alone declarations.<\/p>\n
function_name();\/\/function call[WON'T WORK]\r\nvar function_name = function(){};\r\n<\/pre>\n
Immediately Invoked Function Expression (IIFE)<\/h2>\n
It\u2019s a function expression, the code of which gets executed immediately (only once when it\u2019s evaluated). You can create one by simply adding ()<\/code> (syntax used for calling a function) right after a function expression. They can be anonymous (no name to call it with).<\/p>\n
Below are the two most common syntaxes to create IIFE:<\/p>\n
(function optional_function_name() {\r\n  \/\/body\r\n}());\r\n<\/pre>\n
and<\/p>\n
(function optional_function_name() {\r\n  \/\/body\r\n})();\r\n<\/pre>\n
The parenthesis around the function declaration converts it to an expression and then adding ()<\/code> after it calls the function. You can use other ways to create IIFE for as long as you add ()<\/code> after a function expression (like below), but the preferred methods are the above two.<\/p>\n
\/\/ Some of the ways to create IIFEs\r\n!function() { \/* ... *\/ }();\r\n+function() { \/* ... *\/ }();\r\nnew function() { \/* ... *\/ };\r\n<\/pre>\n
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.<\/p>\n
var page_language = (function () {\r\n  var lang;\r\n  \/\/ Code to get the language of the page\r\n  return lang;\r\n})();\r\n<\/pre>\n
The code to get the page\u2019s language executes only once (preferably after the page loads). The result is stored in page_language<\/code> for later use.<\/p>\n
Methods<\/h2>\n
When a function is an object\u2019s 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.<\/p>\n
var calc = {\r\n  add : function(a,b){return a+b},\r\n  sub : function(a,b){return a-b}  \r\n}\r\nconsole.log(calc.add(1,2)); \/\/3\r\nconsole.log(calc.sub(80,2)); \/\/78\r\n<\/pre>\n
The add<\/code> and sub<\/code> functions are methods of calc<\/code> object.<\/p>\n
Now for a function within function example:<\/p>\n
function add(a){\r\n  return function(b){return a+b;}\r\n}\r\nconsole.log(add(1)(2)); \/\/ Output is 3\r\n<\/pre>\n
The returned anonymous function is a method of function add<\/code>.<\/p>\n
Note: Since parameter (a<\/code>) of function add<\/code> in the above example is available for the following function invoke, this type of process is called currying<\/strong>.<\/p>\n
Constructors<\/h2>\n
When you add new<\/code> 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<\/code> and values are added to each Fruit<\/code>\u2018s properties.<\/p>\n
function Fruit(){   \r\n  var name, family; \/\/ Scientific name & family\r\n  this.getName = function(){return name;};\r\n  this.setName = function(value){name=value};   \r\n  this.getFamily = function(){return family;};\r\n  this.setFamily = function(value){family=value}; \r\n}\r\n\r\nvar apple = new Fruit();\r\napple.setName(\"Malus domestica\");\r\napple.setFamily(\"Rosaceae\");\r\n\r\nvar orange = new Fruit();\r\norange.setName (\"Citrus \u00c3- sinensis\");\r\norange.setFamily (\"Rutaceae\");\r\n\r\nconsole.log(orange.getName()); \/\/ \"Citrus \u00c3- sinensis\"\r\nconsole.log(apple.getName()); \/\/ \"Malus domestica\"\r\nconsole.log(orange.getFamily()); \/\/ \"Rutaceae\"\r\n<\/pre>\n
Arrow Functions (ES6 Standard) [Only in Firefox]<\/h2>\n
A new function definition from ES6 Standard provides a shorter syntax for function expression. The syntax is<\/p>\n
() => { \/* body *\/ }\r\n<\/pre>\n
This sample function:<\/p>\n
var sing = function(){\r\n  console.log('singing...')\r\n};\r\n<\/pre>\n
is the same as:<\/p>\n
var sing = () => {\r\n  console.log('singing...')\r\n};\r\n<\/pre>\n
Arrow functions are anonymous and does not have its own this<\/code> value, this<\/code> inside it will be same as this<\/code> in the enclosing code. Also, you cannot change it to a constructor with new<\/code> keyword.<\/p>\n
They are useful for when you want this<\/code> inside a function to be the same as outside and its shorter syntax makes code for writing function within function concise (like below)<\/p>\n
setInterval(function () {\r\n  console.log('message')\r\n}, 1000);\r\n<\/pre>\n
into<\/p>\n
setInterval(() => console.log('message'), 1000);\r\n<\/pre>\n
Generator Functions (ES6 Standard) [Only in Firefox]<\/h2>\n
Another new function definition from ES6 Standard is Generator Function. Generator functions are capable of halting and continuing its execution. Its syntax is:<\/p>\n
function* function_name(){}\r\n<\/pre>\n
or<\/p>\n
function *function_name(){}\r\n<\/pre>\n
Generator functions create iterators. The iterator\u2019s next <\/code>method is then used to execute the code inside the generator function until the yield<\/code> keyword is reached. After that, the iterated value identified by the yield<\/code> keyword is returned by the generator function and the execution is halted.<\/p>\n
The generator function again executes when the next<\/code> method is called until the next yield<\/code> keyword is reached. Once all of the yield<\/code> expressions are executed, the yielded value returns undefined<\/code>.<\/p>\n
Below is a simple example:<\/p>\n
function *generator_func(count) {\r\n  for(var i=0;i<count;i++){\r\n    yield i+1;\r\n  }\r\n}\r\n\r\nvar itr = generator_func(4); \r\nconsole.log(itr.next()); \/\/Object { value: 1, done: false }\r\nconsole.log(itr.next()); \/\/Object { value: 2, done: false }\r\nconsole.log(itr.next()); \/\/Object { value: 3, done: false }\r\nconsole.log(itr.next()); \/\/Object { value: 4, done: false }\r\nconsole.log(itr.next()); \/\/Object { value: undefined, done: true }\r\nconsole.log(itr.next()); \/\/Object { value: undefined, done: true }\r\n<\/pre>\n
Here\u2019s another example:<\/p>\n
function *randomIncrement(i) {\r\n yield i + 3;\r\n yield i + 5;\r\n yield i + 10;\r\n yield i + 6;\r\n}\r\nvar itr = randomIncrement(4);\r\nconsole.log(itr.next().value); \/\/7\r\nconsole.log(itr.next().value); \/\/9\r\nconsole.log(itr.next().value); \/\/14\r\n<\/pre>\n
There\u2019s also a yield*<\/code> expression which passes the value to another generator function<\/p>\n
function *fruits(fruit) {\r\n yield* veggies(fruit); \r\n yield \"Grapes\";\r\n}\r\n\r\nfunction *veggies(fruit){\r\n yield fruit + \" and Spinach\";\r\n yield fruit + \" and Broccoli\";\r\n yield fruit + \" and Cucumber\";\r\n}\r\n\r\nvar itr = fruits(\"Apple\");\r\nconsole.log(itr.next().value); \/\/\"Apple and Spinach\"\r\nconsole.log(itr.next().value); \/\/\"Apple and Broccoli\"\r\nconsole.log(itr.next().value); \/\/\"Apple and Cucumber\"\r\nconsole.log(itr.next().value); \/\/\"Grapes\"\r\nconsole.log(itr.next().value); \/\/undefined\r\n<\/pre>\n
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.<\/p>\n
Conclusion<\/h2>\n
I\u2019ve 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<\/strong>.<\/p>\n
References<\/h2>\n