cancel
Showing results for 
Search instead for 
Did you mean: 

Let's talk JavaScript functions: Part one for the VOX DC

spitzer
Level 1
Employee

VOXDC_Header_Multi_Colors.png

One of the most powerful and loved aspects of the JavaScript language is its handling of functions. Functions are treated as first-class citizens since they have their own type. Therefore, the programmer has the ability to use them as they would other objects. For example, functions can be assigned to variables or passed to other functions as arguments. In this two-part post, I’ll highlight meaningful details of functions within JavaScript.

Like many languages, JavaScript provides programmers the ability to declare a function or subroutine to be invoked. A function declaration in JavaScript is a statement beginning with the 'function' keyword and followed by a user-given name that is a not a reserved word. This name must be a valid identifier; alphanumeric, '$', and '_' characters are all that are allowed, nor can it begin with a number. Immediately after the name is a set of parentheses '()' that may contain a comma separated list of parameters or arguments. Finally, a collection of statements enclosed in braces '{}', comprise the function's body, which will be executed when the function is invoked.

Something to note in regard to function declarations is they are "hoisted" before the script executes. This means function declarations (and 'var' declarations) are loaded to memory at compile time [1]. Therefore, functions can be declared at any point in a script with the assurance they will be available at runtime wherever they are called. Nonetheless, it is good practice to group declarations at the top of the applicable scope.

Screen Shot 2018-07-24 at 4.04.30 PM.png

More powerful and likely more prevalent are function expressions – a thing unique to JavaScript. As the name implies, function expressions are expressions of the function variety. These expressions can be assigned to variables or object properties (i.e. methods) and returned by or passed to different functions, just like other expressions. Syntactically, they are same as function declarations, although the name is not required. Should the name not be provided the JavaScript interpreter will refer to it as an “anonymous function,” so it is good practice to supply a name to support debugging and promote self-documenting code.

One particularly interesting and useful paradigm supplied by function expressions is the ability execute them immediately. This is rightly called an "Immediately Invoked Function Expression" or "IIFE". To invoke a function expression right away, simply append '();' after the closing '}', with the necessary arguments (if any) provided within the parenthesis. Though if the expression is the only item in the statement, then an additional set of parentheses wrapping the entire expression (except the colon) will be needed. These constructs are quite useful for non-trivial initialization code since they keep a cleaner namespace by preventing scope leakage.

Screen Shot 2018-07-24 at 4.04.51 PM.png

[1] No, that is not a typo; JavaScript is actually "compiled,” though it is "complied" to JavaScript, which is then run through the interpreter.