PRDV402: Introduction to JavaScript II

A function is a block of code that can be reused multiple times as needed. Functions may have zero or more parameters and can return values or not. In JavaScript, functions can be created using various methods, such as a function declaration or function expression.

Function Declaration:

function panda() { //do something in here
//return something (or not)
}
Function Expression:
var panda = function(){
//do something
}

Anonymous refers to not having a name or any means of identification. When using an anonymous function in JavaScript, your function will not be named. For example, let x = function() { console.log("I am anonymous"); }; In this case, "x" is the variable assigned to the anonymous function and NOT its actual name.

Scope refers to the variables available to a code segment at a given time. If a variable is out of scope, JavaScript cannot access it. The two types of scope are local and global. Global variables are declared outside of a block and can be accessed globally. Local variables are declared inside a block, and only that block can access them.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). Simplified, a function inside another function can access the variables from the outer (parent) function. This is a type of encapsulation in JavaScript.

Scope in JavaScript can be broken into two types: local and global. When you declare a variable inside a function, a function will have its local scope. A global variable will be declared outside of functions and can be used throughout the code segments. When using global variables, you must be careful because there are rules for when your global and local variables have the same name and how the precedence will work.  Watch this video for how scope is implemented in JavaScript.

When using closures in JavaScript, you can think of them as a "nested" function. The inner function will have access to the outer function's variables, its own variables, and the global variables. The inner function has access to the outer function's parameters so that they can be quite powerful. After watching this video, can you name the inner function and outer function and describe how they work together?

The "scope" and "closures" in JavaScript can sometimes become intricate and confusing. This walk-through will step you through the basics of scope and talk about the scope chain and closures. This even steps into the more advanced concept of scope hoisting. You should try to work along with the video on these examples for a better understanding. This exercise does not count toward your grade. It is just for practice!

This video will explore how the thiskeyword functions in JavaScript. The most important thing to remember when working with this is what the function containing it is called. The value of thischanges depending on its calling context. For instance, if a function is called without an object reference, then thisrefers to a global variable. On the other hand, if a function is called with an object reference, then this refers to that specific object.

This example demonstrates a function invoked using call() and bind(). Understanding how these methods use this and what values they will assign is essential. Working through these examples will give you insight into the various values this can take on.

In JavaScript, call() and apply() methods allow you to assign a custom this value to your functions. Why might you want to do this? Well, using these methods can enable borrowing another object's methods. It is important to remember that the value of this is assigned when a method or function is called and not defined. We recommend you watch this video and try the examples in your editor. Note that this exercise does not count toward your grade; it is just for practice!

Nested functions are much like nested loops. They occur when one function is nested inside the other. The inner function is private to the outer function. We discussed closures earlier – binding these variables with a closure allows nested functions to "inherit" the arguments and values of the other function. Understanding what function can access the other's variables is a unique relationship.

Recursion is when a function/method calls itself. It can be thought of as another way to loop or iterate. There are three ways in JavaScript that a function can refer to itself (call): 1. The function's name (it just calls its name); 2. arguments.callee; 3. An in-scope variable that refers to the function.

A classic recursion assignment is to do the factorial of a number. This video tutorial will show you how to write this program in JavaScript. Ensure your IDE is open and ready to work with this step-by-step guide.

Higher-order functions are functions that either take another function as an argument or return another function. JavaScript can become very powerful when you understand how to use these functions to help you write more powerful code. You use JavaScript's callback functionality when you pass a function as an argument.

This practice video shows you how to create a program that makes concentric circles using functions in JavaScript. It uses a loop to keep the circles drawing. For a challenge, change the loop into a recursive call once you have it working. This exercise does not count toward your grade. It is just for practice!