
JavaScript: From Fundamentals to Functional JS
Topics:
This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Table of Contents
Objects
Course Introduction
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/Property Access
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
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.Object Best Practices
Bianca discusses some Do’s & Dont’s when using objects. She also talks what characters are invalid and the rules around naming object properties.Storing Data and Object-Literal Notation
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.Objects Iteration
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.Objects Exercise
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.Objects Exercise Solution
Bianca walks through the solution for the Objects Exercise.
Arrays
Arrays vs Objects
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.Access & Assignment
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().Arrays Iteration
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.Native Properties
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.Arrays Exercise
In this exercise, you will review arrays and learn how to create a collection of animal objects.Arrays Exercise Solution
Bianca walks through the solution for the Arrays Exercise.
Functions
Anatomy of a Function
Bianca walks through the anatomy of a function. She overviews the function definition, parameters, body and how the function is invoked or called.Definition
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.Body
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.Arguments & Parameters
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.Constructors
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.Looping
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.Functions Exercise
In this exercise, you will create a number of functions to access data in the application.Functions Exercise Solution
Bianca walks through the solution for the Functions Exercise.
Nesting
Nesting Objects
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.More Nesting Examples
Bianca continues to show different examples to further reinforce how to access and assign properties of nested objects.Nesting Exercise
In this exercise, you will be explore how to represent more complex data in a nested data structure.Nesting Exercise Solution
Bianca walks through the solution for the Nesting Exercise.
Scope
Scope Introduction
Bianca begins Part 2 of this course by reviewing a few of the concepts covered in Part 1 including the anatomy of a function.Local and Global Scope
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.Parent vs. Child Scope
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.Precedence
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.Scope Exercise
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.Scope Exercise Solution
Bianca walks through the solution for the Scope Exercise.
Closure
Closure Introduction
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.Closure Introduction, continued
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.Creating a Closure
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.Closure Questions
Bianca spends a few minutes answering some audience questions about closures.Closures and Functional Programming
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.Closure Objects
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.Closure Recipe
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.Closure Exercise Solution
Bianca walks through the solution to the Closure Exercise.Module Pattern
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.
Callbacks
Higher-Order Functions & Callbacks
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.Passing Arguments
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.Callbacks Exercise
In this exercise, you will create a few different callback functions.Callbacks Exercise Solution
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
Underscore.js Introduction
Underscore.js is a JavaScript library that provides you with functional methods. Bianca briefly introduces the Underscore syntax and talks about the documentation._.each()
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._.map()
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.Looping with _.map()
Bianca now tasks that group with rewriting an _.each() loop with _.map()._.map() vs. _.each
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.Underscore Exercise
In this exercise, you will create a number of Underscore Loops using both _.each() and _.map().Underscore Exercise Solution
Bianca walks through the solution to the Underscore Exercise. She ends with a brief course wrap-up.