what i learned last week: the basics of javascript functions pt.1
Tags: javascript
Published: 2021-05-17 18:45:19

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

A [JavaScript Function](https://www.w3schools.com/js/js_functions.asp) 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"`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8sn8hs58qbtiaqmlyvy.jpg)

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](https://www.w3schools.com/js/js_hoisting.asp). 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](https://www.w3schools.com/js/js_hoisting.asp)**

```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](https://medium.com/launch-school/javascript-expressions-and-statements-4d32ac9c0e74#:~:text=Any%20unit%20of%20code%20that,arguments%20of%20a%20function%20invocation.) 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](https://www.javascripttutorial.net/javascript-anonymous-functions/) 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)](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruece3ev6b855odmsmux.png)

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! 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjsp0ypm0wnoqrdapyt4.jpg)