Table of Contents
Course IntroductionBianca 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 AccessObjects 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 NotationBracket 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 PracticesBianca 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 NotationAny 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 IterationAt 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 SolutionBianca walks through the solution for the Objects Exercise.
Arrays vs ObjectsLike 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 & AssignmentBianca 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 IterationLoops 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 PropertiesThe 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 ExerciseIn this exercise, you will review arrays and learn how to create a collection of animal objects.
Arrays Exercise SolutionBianca walks through the solution for the Arrays Exercise.
Anatomy of a FunctionBianca walks through the anatomy of a function. She overviews the function definition, parameters, body and how the function is invoked or called.
DefinitionThere 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.
BodyThe 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 & ParametersParameters 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.
ConstructorsBianca 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.
LoopingA 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 ExerciseIn this exercise, you will create a number of functions to access data in the application.
Functions Exercise SolutionBianca walks through the solution for the Functions Exercise.
Nesting ObjectsSometimes 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 ExamplesBianca continues to show different examples to further reinforce how to access and assign properties of nested objects.
Nesting ExerciseIn this exercise, you will be explore how to represent more complex data in a nested data structure.
Nesting Exercise SolutionBianca walks through the solution for the Nesting Exercise.
Scope IntroductionBianca 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 ScopeWhen 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 ScopeNested 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.
Scope ExerciseThe 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 SolutionBianca walks through the solution for the Scope Exercise.
Closure IntroductionClosure 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, continuedIn 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 ClosureBianca 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 QuestionsBianca spends a few minutes answering some audience questions about closures.
Closures and Functional ProgrammingClosures 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 ObjectsClosures 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 RecipeBianca 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 SolutionBianca walks through the solution to the Closure Exercise.
Module PatternThe 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 & CallbacksHigher-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 ArgumentsBianca 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 ExerciseIn this exercise, you will create a few different callback functions.
Callbacks Exercise SolutionBianca walks through the solution to the Callbacks Exercise. She also briefly discusses one of the solutions from the Closure Exercise completed earlier.
_.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. _.eachBecause _.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 ExerciseIn this exercise, you will create a number of Underscore Loops using both _.each() and _.map().
Underscore Exercise SolutionBianca walks through the solution to the Underscore Exercise. She ends with a brief course wrap-up.