Declaring Functions

This is the sixth installment of the technical portion of my blog for junior developers. This is chronicling my work in the technical field. I come from a non-traditional coding background so I work hard and practice the ABC’s (Always Be Coding). Half of my blogs will be about technical subjects and the other half will be about equality, social justice, and tech for good.

Short and sweet this time. Straight to the point. Some foundational knowledge on how functions are declared in ES5 JavaScript.

First of all, the JS compiler reads your code from top to the bottom. So what’s the difference between function expressions and declarations.

Function Expressions

The difference between function declarations and function expressions was not taught to me properly at bootcamp and neither was hoisting nor closure. So as you will probably have to do or should do, is to re-learn or learn these fundamentals on your own to get a deeper understanding of the fundamentals of JavaScript. Let’s look at an example.

var name = "Baggins";(function () {    // Outputs: "Original name was undefined"    console.log("Original name was " + name); //Why???     var name = "Underhill";    // Outputs: "New name is Underhill"    console.log("New name is " + name);})();

This example has been taken from A Drip of JavaScript. The example above contains a variable declaration and an immediately invoked function expression. Function expressions either store a function object inside of a variable or is written inside a parentheses or object. The reason why name is undefined right after the function is because of hoisting. In this case, the immediately invoked function expression is defined before "Baggins" is assigned to the var name . So the code is read by the compiler like:

var name = "Baggins";

(function (){console.log("Original name was " + name);var name = "Underhill";console.log("New name is " + name);}());

console.log(name);

And the compiler spits out:

Original name was undefinedNew name was UnderhillBaggins

The above example of a function expression is special because it is immediately invoked. However, it is STILL a function expression therefore does NOT take priority over function declarations when it comes to hoisting. For example:

const myFunc = (value) => {console.log(value);};

A function object is being stored in a variable called myFunc . So, let’s say you call a function expression as I do below:

myFunc('hello');

const myFunc = (str) => {console.log(str);};

The compiler spits out

TypeError: myFunc is not a function

Because the compiler reads it like

myFunc('hello'); // tries to call this function but not in memory, errors out

Function Declarations

Function declarations in both ES5 and ES6 are similar. It simply contains the word function as the beginning of the statement.

function myFunc(str) {console.log(str);}

Function declarations take priority and variable names take priority during hoisting. So whereas, the example above logging the word hello produced an error. It would run perfectly fine if you use a function declaration.

myFunc('Look Ma! You can call me anywhere');

function myFunc(str) {console.log(str);}

Ah, the wild, wild world of JavaScript. Until next time!