Functions in JavaScript

- Computers are strict logic machines with zero common sense. That means if we want them to do something, we have to provide them with detailed, step-by-step instructions on exactly what to do. This is what a script is. A list of steps to be completed in a specific order, which is easy enough if we're doing something really basic, like simple math equations, but gets much harder when we're running more complex operations. JavaScript scripts can easily end up being hundreds if not thousands of lines of code, and we need some way of making sense of it all.

To help structure our code and make common operations reusable, we create functions and objects. In this chapter, we'll look at both of these in detail. Functions are mini programs inside our scripts. They can be used to segment off sections of our code to make it easier to manage, or to run repeated operations, or both. Functions wrap around code blocks, which contain the actual statements to be run, and typically include some combination of variable assignments, operations, and conditions.

Functions do one of two things: either create a result immediately, like change the contents of an element on a webpage, or provide an answer or output to be used by other functions, called a return value. In JavaScript, we work with three types of functions: named functions, which are executed when called by name, anonymous functions, which typically run once they are triggered by a specific event, and immediately invoked function expressions, which run the moment the browser encounters them.

All functions have the same overall structure. They start with the word function, which tells the browser, here I am declaring a function, followed by their name, two parentheses, and then a pair of curly brackets which wrap around the code block. To run a named function, we call it by its name at a location in the script where we want it to run. That means we can define a function at the very top of the script and choose to run it at the very bottom of the script. In fact, this is the coding standard for functions.

Technically, it doesn't matter where in the script a function sits because the browser will load all the JavaScript first and then run it. But for readability for humans, we typically place a function before it's called in the script. This provides a semblance of logical structure in our code when you read it from the top to the bottom. Oh, here's a function that does something, and here it's called and I already know what it is, so I can move on. Anonymous functions don't have a name, so the parentheses appears right after function.

Immediately invoked function expressions are anonymous functions with another parentheses pair at the end to trigger them, all wrapped inside parentheses. Every function comes with an argument's object, an array of possible arguments you can pass to the function when you call it. These arguments are separated by commas, and can be used inside the function itself based on their names in the function declaration. Finally, functions can return values to where they were called from using the return keyword.

Whatever is returned is not executed directly, but instead captured in a variable or used immediately in another function.