15 February 2018

6 mins

JavaScript Functions

Written by Dean Gilewicz
JS
A function (object subtype) is a JavaScript procedure that consists of a set of statements to perform a task. There are two ways to define functions: a function declaration and a function expression. A function declaration consists of the function keyword, followed by:
  • The name of the function
  • A list of parameters to the function, enclosed in parentheses and separated by commas
  • The JavaScript statements that define the function, enclosed in curly brackets, { }

See the Pen thecodelog.com - JS Functions 1 by Deano (@deangilewicz) on CodePen.

 Above, the function add, takes two parameters – number1 and number2. It consists of one statement that says to return the addition of parameter 1 (number1) and parameter 2 (number2). The return statement specifies the value returned by the function. If a return statement does not exist in the body of the function then undefined is returned by default.

See the Pen thecodelog.com - JS Functions 2 by Deano (@deangilewicz) on CodePen.

 When a return statement is present inside of the function, the return statement is executed but any preceding code is not.

See the Pen thecodelog.com - JS Functions 3 by Deano (@deangilewicz) on CodePen.

 Functions do not have to have any parameters:

See the Pen thecodelog.com - JS Functions 4 by Deano (@deangilewicz) on CodePen.

 Since a function is an object subtype you can assign values to properties on a function, although this is not common.

See the Pen thecodelog.com - JS Functions 5 by Deano (@deangilewicz) on CodePen.

 The function object has a length property set to the number of formal parameters it is declared with:

See the Pen thecodelog.com - JS Functions 6 by Deano (@deangilewicz) on CodePen.

 Primitive parameters (such as String, Number, Boolean) are passed to functions by value. If the function changes the value of the parameter, this change is not reflected globally or in the calling function.

See the Pen thecodelog.com - JS Functions 7 by Deano (@deangilewicz) on CodePen.

 If a non-primitive value (such as an Object or an Array) is passed as a parameter and the function changes the object’s properties, that change is visible outside the function.

See the Pen thecodelog.com - JS Functions 8 by Deano (@deangilewicz) on CodePen.

 A function expression can be anonymous or named. (see why you should always name function expressions at bottom of this post)

See the Pen thecodelog.com - JS Functions 9 by Deano (@deangilewicz) on CodePen.

 A function declaration can be ‘hoisted’…

See the Pen thecodelog.com - JS Functions 10 by Deano (@deangilewicz) on CodePen.

 but a function expression cannot.

See the Pen thecodelog.com - JS Functions 11 by Deano (@deangilewicz) on CodePen.

 Functions must be in scope when they are called.

See the Pen thecodelog.com - JS Functions 12 by Deano (@deangilewicz) on CodePen.

 A function can access all variables and functions defined inside the scope in which it is defined.

See the Pen thecodelog.com - JS Functions 13 by Deano (@deangilewicz) on CodePen.

 Also works for nested functions.

See the Pen thecodelog.com - JS Functions 14 by Deano (@deangilewicz) on CodePen.

 Here are three reasons why you should always use named function expressions instead of anonymous function expressions:
  1. Reliable self reference from inside the function – can use for incursion or to unbind an event handler etc
  2. Uses the name in the stack trace for errors – this makes debugging much easier as have an idea of where to go
  3. Understandable code – use a name that explains what the function does so it is easier to understand what the function is doing