what i learned last week: the basics of javascript functions pt.1

In this blog I will be reviewing the basics of JavaScript functions.

A JavaScript Function is a block of code designed to perform a particular task and is executed when "something" invokes it (calls it). A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

function radar() {
console.log("beep boop beep");
}

The above function is defined with the name radar and has a block of code that will run when we call it.

radar() We call the function by adding '()' after the name!
//=> "beep boop beep"

Functions can be passed arguments, given default arguments!

function radar(branch="army", language="klingon") {
console.log(`${branch} / ${language}`);
}
radar() //=> army / klingon
radar("marines", "vulcan") //=> marines / vulcan!

Another neat JavaScript behavior is the ability to call a function before declaring it. This is called Hoisting. Note, the function must be defined as a function declaration.

radar() //=> "beep boop beep"
function radar() {
console.log("beep boop beep");
}

Hoisting is JavaScript's default behavior of moving declarations to the top.

Second Hoisting Example

var x; // Declare x
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element

Moving along, in technical words an expression is any unit of code that can be evaluated to a value.

1 + 1 //=> 2

More specifically, lets go over Function expressions.

• They are created when we write function(){...}
• Are NOT hoisted

let fn = function() {
console.log("Beam me up, Scotty")
}

The above code displays an anonymous function stored in the variable fn. So what happens when we call fn? Lets find out...

fn //=> ƒ () {
console.log("Beam me up, Scotty")
}

Neat, right? Chrome returned the stored work in fn. Note, the work was NOT done. You may be asking yourself "how do I execute the work?" Well look no further...
fn() //=> "Beam me up, Scotty"

Can you spot the difference between the two calls? The second invocation has () at the end. With that simple addition the work will be executed. That's it. Easy, huh?

Next up, you may have noticed that I referenced an anonymous function earlier in this writing.

So what is it? An anonymous function is a function without a name.

function () {
console.log("Beam me up, Scotty")
}

Food for thought, what is the difference between a function declaration and an anonymous function?

Keep that question in the back of your mind as we continue moving forward.

Now, lets go over an IIFE(Immediately Invoked Function Expression) which is a JavaScript function that runs as soon as it is defined.

(function () {statements})();

So how does it work? Going left to right, the first parenthesis returns an anonymous function. The second parenthesis is part of the, just mentioned, anonymous function expression. The last set of () means, do the work in the function identified by name. To summarize, we're "invoking" the function immediately after defining it.

Finally, within an IIFE lies something straight out of a Star Trek episode, a micro-dimension.

Variables, functions, Arrays, etc. defined inside of the function expression's body can't be seen outside of the IIFE. Thus creating something like a micro-dimension where all work in that IIFE is only available in well...that IIFE!

Final food for thought, why is creating micro-dimensions in IIFEs important?

that's it for this blog. Next week we will continue going over the basics of functions!