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 are declared in ES5 . functions 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 . The example above contains a and an . 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 is assigned to the . So the code is read by the compiler like: A Drip of JavaScript variable declaration immediately invoked function expression Function expressions "Baggins" var name 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 . So, let’s say you call a function expression as I do below: myFunc 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 as the beginning of the statement. function 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 produced an error. It would run perfectly fine if you use a function declaration. hello myFunc('Look Ma! You can call me anywhere'); function myFunc(str) {console.log(str);} Ah, the wild, wild world of JavaScript. Until next time!
