JavaScript: From Fundamentals to Functional JS

Bianca Gandolfo from Hack Reactor spends a few minutes introducing herself and gives an overview of the course. Part one of this course will focus on Object, Arrays, and Functions. Part two will cover Function Programming techniques and patterns. She also provides links to the slides and course files. - bit.ly/js102-slides1 , https://github.com/bgando/JS102/

Objects are data structures that contain related properties of an entity. Properties can be assigned and accessed using dot notation. Bianca creates a basic object with a few properties to demonstrate this syntax.

Bracket notation can also be used to create properties. Functionally, bracket notation is the same as dot notation. However, the syntax looks quite different. Both notations are interchangeable.

Bianca discusses some Do’s & Dont’s when using objects. She also talks what characters are invalid and the rules around naming object properties.

Any kind of data can be stored within an object. Even functions can be stored as a property. When a function is added to an object, it’s commonly referred to as a “method”. Bianca also talks about using object-literal notation.

At times, developers may want to loop through every property of an object. For-in loops will iteration through each property name. Bracket notation can be used to access the value of that property.

Bianca begins this first exercise by explaining how all the exercise files are organized and how to get started. She also demonstrates how to use the console for testing or alternatively use jsbin.com . In this exercise, you will explore how to represent data in JavaScript objects.

Bianca walks through the solution for the Objects Exercise.

Like objects, arrays are a data structure. Fundamentally, arrays are an object, however, they are commonly used for ordered data like lists. Bianca begins this section discussing the differences between arrays and objects.

Bianca demonstrates how to create arrays and assign data to them. Array data can be accessed/assigned through specific indices or by methods like push() or pop().

Loops can be used to iterate through arrays. For-in loops will behave the same with arrays as they do with objects and iterate through array index names. However, it’s more common to use a regular “for” loop too iterate through an array.

The key differentiator between arrays and objects are the native properties that accompany arrays. For example, the length property will always represent that highest numerical index. Array methods like push and pop automatically manage their native properties.

In this exercise, you will review arrays and learn how to create a collection of animal objects.

Bianca walks through the solution for the Arrays Exercise.

Bianca walks through the anatomy of a function. She overviews the function definition, parameters, body and how the function is invoked or called.

There are a lot of ways functions can be defined. For example, they can be named or anonymous. Bianca shows a number of different function definitions to help the audience recognize these ways and demonstrate the different syntax.

The body of the function is contained within curly brackets. The body of the function is never executed until the function is called or invoked. After identifying function bodies, Bianca demonstrates how to invoke functions.

Parameters are placeholder variables within a function for data that’s passed to the function. They are undefined until the function is called. Arguments are the data passed to the function that become the parameters. Bianca explains these concepts and also discusses function return values.

Bianca introduces the concept of using a function as a constructor. A constructor is a function that returns an object. This object is a data model which contains the properties and methods for that object.

A for loop can be used to iterate through data and create new objects by calling a constructor. In this example, Bianca loops through an array of animal names to create new animal objects from each name.

In this exercise, you will create a number of functions to access data in the application.

Bianca walks through the solution for the Functions Exercise.

Sometimes properties within an object may be an object rather than a string or number. In other words, an object inside of an object. Bianca explains why you may do this and walks through the syntax.

Bianca continues to show different examples to further reinforce how to access and assign properties of nested objects.

In this exercise, you will be explore how to represent more complex data in a nested data structure.

Bianca walks through the solution for the Nesting Exercise.

Bianca begins Part 2 of this course by reviewing a few of the concepts covered in Part 1 including the anatomy of a function.

When a variable is declared inside a function, it is only accessible from inside that function because it has local scope. On the other hand, a variable has global scope when it’s declared outside of any functions. Global variables can be accessed from anywhere.

Nested functions create a “child” scope within the containing function. The parent scope does not have access to the child scope. However the child scope does have access to the parent scope.

In JavaScript, there can be conflicts when two variables have a the same name. Bianca demonstrates how precedence works when a global variable has the same name as a local variable.

The exercises in this part are all test-driven. Bianca spends a few minutes explaining how he exercise files are organized and then gets the audience started on the first exercise on scope.

Bianca walks through the solution for the Scope Exercise.

Closure occurs when one function returns another function and the returning function retains access the the scope. Bianca walks through a simple example demonstrating closure.

In this next example, Bianca adds a setTImeout() method to the function. This demonstrates that even a delay, the nested function still has access to the parent function’s scope.

Bianca now creates a closure by calling a function and saving the returned function as a variable. She later uses this variable to invoke the function call to demonstrate it still has access to the original scope.

Bianca spends a few minutes answering some audience questions about closures.

Closures are key to functional programming because they allow developer to build small pieces of code that can be extended. Bianca demonstrates how creating an add() function closure then allows her to create an add5() function more efficiently.

Closures also work for functions that return an object. The object can contain any number of methods. These methods all have access to the original scope just like the previous closure examples.

Bianca shows a “closure recipe” she created to summarize the components of a closure and how the closure is executed. She also identifies a few gotchas that can arise when using closures.

Bianca walks through the solution to the Closure Exercise.

The Module Pattern is a way to emulate classes in other programming languages. You use the Module pattern to define public/private methods and to encapsulate functionality and make more portable code.

Higher-order functions either take a function as an argument or return a function as output. Bianca uses a few code examples to illustrate why higher-order functions are useful in functional programming.

Bianca demonstrates how functions passed as arguments can be invoked using their parameter name. These function can also have their own set of arguments passed to them when they are invoked.

In this exercise, you will create a few different callback functions.

Bianca walks through the solution to the Callbacks Exercise. She also briefly discusses one of the solutions from the Closure Exercise completed earlier.

Underscore.js is a JavaScript library that provides you with functional methods. Bianca briefly introduces the Underscore syntax and talks about the documentation.

Bianca begins by demonstrating the each() method in Underscore. Unlike a for loop in JavaScript, the each() method is passed the array to be iterated along with a callback to handle each value in the array.

When using Underscore’s each() method, you aren’t able to return a value in the supplied function. The map() method not only loops through an array, but returns a new array of values as the result.

Bianca now tasks that group with rewriting an _.each() loop with _.map().

Because _.each() does not allow values to be returned, it’s better suited for loops that are performing an action. The _.map() method is better for loops that are manipulating data. Bianca discusses this as well as a few other best practices when using these methods.

In this exercise, you will create a number of Underscore Loops using both _.each() and _.map().

Bianca walks through the solution to the Underscore Exercise. She ends with a brief course wrap-up.