JAVA SCRIPT - Placing Your Function and Hoisting

Placing Your Function and Hoisting

Problem

You’re not sure where to place your function to ensure it’s accessible when needed.

Solution

If you’re using a declarative function, you can place the function anywhere in the code. However, if you’re using a function expression, you must do so before the function is used. The reasons are given in the discussion.

EXPLAIN 

An important concept to remember when considering the different ways you can create a function is hoisting. In JavaScript, all variable declarations are moved, or hoisted to the top of their current scope. That’s declaration, though, not instantiation. The differ‐ ence is critical. If you access a variable that’s not declared, you’ll get a reference error. However, if you access a variable before it’s declared, but it is declared within the scope at a later time, you’ll get an undefined:

console.log(a); // undefined
var a;

If you don’t assign a value to the variable when you declare it, you’ll still get an undefined when you access the variable:

console.log(a); // undefined
var a = 1;

This is because the variable declaration is hoisted, not the assignment, which happens in place. What does this have to do with functions? Quite a bit. If you create a declarative function, hoisting will ensure the function definition is moved to the top of the current scope before it’s accessed:

console.log(test()); // 'hello'
function test() {
 return 'hello';
}

However, if you use a functional expression, you’re basically toast:

console.log(test());
var test = function() {
 return 'hello';
 };

A reference error results because the variable test may be declared, but it’s not instan‐ tiated, and your code is trying to treat this noninstantiated variable as a function.

 Functional Programming and JavaScript

A function that accepts another function as a parameter, or returns a function, or both, is known as a higher order function. The concept is from a programming paradigm known as functional programming. Functional programming is a way of abstracting out the complexity of an application, replacing complicated loops and conditional state‐ ments with nice, clean function calls.

As an example of functional programming, consider something simple: sum all the numbers in an array. One way of doing so is to create a variable to hold the sum, iterate through the array using a for loop, and adding the value of each array element to the sum variable:

var nums = [1, 45, 2, 16, 9, 12];
var sum = 0;
for (var i = 0; i < nums.length; i++) {
 sum+=nums[i];
}
console.log(sum); // 85

Now examine how the function Array.reduce(), one of the ECMAScript 5 additions to JavaScript, performs the same functionality:

var nums = [1, 45, 2, 16, 9, 12];
var sum = nums.reduce(function(n1,n2) { return n1 + n2; });
console.log(sum); // 85

The results are the same, but the difference is less verbose code, and a clearer under‐ standing of what’s happening to drive the result: the array elements are traversed, some operation is performed until the end result is reduced to a single value—in this case, a sum of all array element values. The real benefit to functional programming, however, is more reliable code. When you break your application down into functional bits, and each function performs a single task, and the only data available to that function comes in via function arguments, the only output from the operation is that returned by the function, you reduce unintended side effects in the code.