Learning JavaScript: Part 3: Functions

Learning JavaScript

JavaScript is an interpreted programming language commonly found in web browsers. First appearing in 1995, it has grown to be the de facto web programming language used in most websites and on many systems serving webpages.


Functions

In many programming languages, there exists a concept called a function. In JavaScript, like many others, a function is one or more lines of code usually, but not always, written for some task or purpose.

The purpose of functions is to logically separate sections of code. This allows for re-using code and helps to organize things.

The terminology around function usage is that functions are called and that they may return a value.

Functions

Screenshot 2018-09-19 11.25.21

In JavaScript, like with many other programming languages, there are some different common parts of usage to functions. The first is the definition.

Functions, similar to variables, are defined. To use some code as a function, it must be defined as a function. This means that somewhere in the code is a section with the keyword “function” and its code wrapped in curly brackets.

The second part is its parameters. These are things sent to the function. To help abstract functions as sections of code, they can accept values. Within the function these parameters are defined using the names given to them.

Finally, there is the return statement. If the function does some task and needs to send a value back, it can using the “return” keyword. Anything returned by the function can then be saved and used for another task.

Calling Functions

Screenshot 2018-09-19 11.33.05

When using a function in JavaScript, it is called. This means that control is temporarily moved to that section of code, the function does something, and then control is returned back.

Depending on what is sent as a parameter, the function can use those values or not. Then, upon coming to a return statement or the end of the code, control moves back.

Used starting in earlier parts console.log() is a function call. The function log() is called and the parameters of different values were passed to it to show the values of different variables and locations in an array.

Functions as Values

Screenshot 2018-09-19 11.38.40

Like other types of values, functions themselves can also be saved to a variable. When doing so, in fact, the way the function is called changes. Now, instead of its original name, the name of the variable can be used in its placed to call that section of code.

Anonymous Functions

Screenshot 2018-09-19 11.42.14

Because saving a function as the value of some variable removes its original name, functions can also be anonymous. When a function is defined as anonymous, it does not have a name. However, as with setting a variable with the value of a function, it can still be used. The variable allows for calling the function based on its name.

Values from Functions

Screenshot 2018-09-19 11.45.17

The values returned from functions can also be used as part of the definition other variables and as part of other tasks. Because the call to the function can return a value, that value will be substituted later. It can represent a potential value that will be calculated when the code is run.

Function Scope

Screenshot 2018-09-19 11.58.18

JavaScript shares a concept with many other programming languages called scope or sometimes function scope. This means that variables defined and enclosed within a function cannot be used outside of it.

Screenshot 2018-09-19 11.58.02

In fact, trying to use (reference) a variable outside of its scope will cause an error and usually stop the code from running.

Local and Global Scope

Screenshot 2018-09-19 12.04.49

There are two types of scope: local and global. Within a variable or function is defined within a function, it is said to be part of the local scope. They can be used within the scope of that function.

Variables and functions defined outside of functions are part of the global scope. This means they can be used inside of other functions because they are defined as part of a larger scope that contains the function in which they are defined.

A handful of keywords are part of the highest level of scope and can be used anywhere in other functions. They include the variables windowdocument, and console.

Codepen Example:

See the Pen Learning JavaScript: Part 3: Functions by Dan Cox (@videlais) on CodePen.

Repl.it Example:

Test on Repl.it!

Mozilla Thimble:

Remix on Mozilla Thimble!