All about functions in javascript

All about functions in javascript

##Anatomy of a Function

A function is piece of code that can be called during the lifecycle of the app to perform a task or return a value. A function declaration can be broken down into the following pieces:

  1. Name
  2. Parameters: A list of inputs that can be passed into a function.
  3. Body: The logic or statements that perform the computation.

0_4VMl3NLonEYJfYQu.png

A function declaration on its own does not do anything. You make use of functions by calling them. The return value of the function can be assigned to a variable.

  1. Function call: Executes the code inside the function body.
  2. Arguments: The values to be used as parameters in the function.
  3. Return value: By default functions will return undefined, but can return the result of a computation when the body contains a return statement.

0_v9z0CnpA5eG6kqtx.png

Remember that parameters are the variables you use as inputs to your functions, while arguments are the actual values you pass to the functions when you call it.

1_Sm1SNr-QWT0LhCnIIV5OxA.png

Function Declarations vs Expressions

A function declaration is a statement that describes what your code does. Declarations are hoisted, which means they are loaded at the top of the scope before any other code runs.

1_aIV_SJzPv66G5pyG2Be1Rw.png

An alternative approach is use a function as a value or expression by assigning an anonymous function to a variable or parameter.

1_ETnT7-d9OqyhK888BIxiSQ.png

Should you use declarations or expressions?

There is no universally accepted best-practice, but function expressions are commonly preferred for (1) their ability to be reassigned, (2) flexibility when composing higher order functions, and (3) the fact that they don’t pollute the global scope.

Arrow Functions

Arrow functions provide syntactic sugar for writing compact code, while also having some different features than functions declared with the ‘function’ keyword. Arrow functions:

  1. Don’t have its own this object.
  2. Have an implicit return value when brackets are omitted. i.e. () => true returns true.
  3. Are always an expression, never a statement. Which means they’re not hoisted.

Pure Functions

A pure function is one that only relies only on its inputs, produces no side effects, and does not modify values outside its local scope. Notice how the impure function below mutates a global variable and uses it to calculate the return value. In other words, it depends on values outside of its own function parameters and/or body.

1_MLJebdSJiPMT5Bg5jybUQA.png

Higher Order Functions

A higher order function is created by combining (or composing) multiple functions together by passing (1) functions as arguments or (2) returning functions. There are many built-in JS functions that use HOF, for example setTimeout and Array.map.

1_vI1jxchsQGgCcTS_hUk2Mg.png

Recursive Functions

A recursive function is one that calls itself from inside its own function body. If a terminating condition is not provided it will create and infinite loop. Recursive functions are commonly used in algorithm implementations to efficiently handle tasks like binary-tree traversal. Below is an example of a recursive function that traverses the the file system using NodeJS.

1_zDCDvJtM9IA5iGlP8DERzA.png