[frontendmasters.com] JS Fundamentals to Functional v2 [2018, ENG]

Table of Contents
JavaScript: From Fundamentals to Functional JS
Course Introduction
00:00:00 - 00:06:00
Course Introduction
Bianca Gandolfo introduces herself and gives an overview of the course, "JavaScript: From Fundamentals to Functional JS."
Success Tips for Learning
00:06:01 - 00:10:34
Success Tips for Learning
Bianca reviews her tips for success in learning and developing new skills.
Functional Programming
00:10:35 - 00:18:21
Functional Programming
Bianca introduces functional programming and how it compares to object-oriented programming. Brianca takes a question from a student about the tenets of functional programming.
Objects
Property Access
00:18:22 - 00:35:38
Property Access
Bianca illustrates that 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 syntax.
Arrays
00:35:39 - 00:40:07
Arrays
Like objects, Bianca shows that arrays are a data structure. Fundamentally, arrays are an object. However, they are commonly used for ordered data like lists.
Bracket Notation
00:40:08 - 00:51:02
Bracket Notation
Bracket notation can also be used to create properties. Functionally, bracket notation is the same as dot notation. However, the syntax looks entirely different. Both notations are interchangeable.
Non-Valid Characters
00:51:03 - 01:04:31
Non-Valid Characters
Bianca talks what characters are invalid when using objects and the rules around naming object properties.
Game Characters Challenge
01:04:32 - 01:06:51
Game Characters Challenge
In this challenge, students create an object using both bracket and dot notation that represents characters found in a popular board game.
Game Characters Solution
01:06:52 - 01:17:05
Game Characters Solution
Bianca walks through the solution with the help of students.
Object Review
01:17:06 - 01:19:59
Object Review
While reviewing the objects, Bianca examines when to use dot notation vs. brackets.
ES6 Destructuring
01:20:00 - 01:40:27
ES6 Destructuring
Bianca introduces destructing, a simplified method to extract multiple properties from an object.
Destructuring Challenge
01:40:28 - 01:40:58
Destructuring Challenge
In this challenge, students use destructuring to pull out two properties from an object.
Destructuring Solution
01:40:59 - 01:46:06
Destructuring Solution
Bianca walks through the destructuring solution.
Destructuring Examples
01:46:07 - 01:57:52
Destructuring Examples
Bianca demonstrates examples of destructuring that include omitting a value, combine with spread or rest operator, swapping out variables, and more.
List Transformations
List Transformations
01:57:53 - 02:02:04
List Transformations
Bianca introduces list transformations, which is to take a list or collection of data and extract specific portions of that data by looping or other logic. Using this functional utility is useful when dealing with APIs.
Looping Exercise
02:02:05 - 02:02:25
Looping Exercise
In this exercise, students loop through an array.
Looping Solution
02:02:26 - 02:12:09
Looping Solution
Bianca walks through the solution with the help of students.
Looping Exercise, Part 2
02:12:10 - 02:12:36
Looping Exercise, Part 2
Building on the previous exercise, students loop through an array marking a specific value.
Looping Solution, Part 2
02:12:37 - 02:25:08
Looping Solution, Part 2
Bianca walks through the solution with the help of students. Bianca takes questions from students.
Looping Exercise, Part 3
02:25:09 - 02:25:26
Looping Exercise, Part 3
In this exercise, students destructure nested data structure into two variables.
Looping Solution, Part 3
02:25:27 - 02:32:30
Looping Solution, Part 3
Bianca walks through the solution with the help of students. Bianca takes questions from students.
.forEach() Function
Using Functions
02:32:31 - 02:42:47
Using Functions
Bianca introduces list transformations with functions showing how to convert data into a class.
forEach Function
02:42:48 - 02:51:31
forEach Function
Bianca demonstrates how to use native forEach in modern browsers and _.each from underscore to loop through a list and their respective differences.
forEach and _.each Exercises
02:51:32 - 02:52:41
forEach and _.each Exercises
In this exercise, loop through a list using each function. Then students implement _.each function.
forEach and _.each Solution
02:52:42 - 03:08:27
forEach and _.each Solution
Bianca walks through the solution with the help of students. Bianca takes questions from students.
.map() Function
_.map() vs .map() Functions
03:08:28 - 03:11:28
_.map() vs .map() Functions
Bianca introduces map functions, which produces a new array of values by mapping each value in a list through a transformation function.
_.map() Exercise
03:11:29 - 03:14:07
_.map() Exercise
In this exercise, students take a list of weapons and make them "broken" by mapping over them.
_.map() Solution
03:14:08 - 03:15:32
_.map() Solution
Bianca walks through the solution with the help of students. Bianca takes questions from students.
_map() vs. _each()
03:15:33 - 03:18:20
_map() vs. _each()
Bianca compares _map() and _each() functions.
_.map() Exercise, Part 2
03:18:21 - 03:19:38
_.map() Exercise, Part 2
In this exercise, students implement _.map() function.
_.map() Solution, Part 2
03:19:39 - 03:31:10
_.map() Solution, Part 2
Bianca walks through the solution with the help of students. Bianca takes questions from students.
.filter() Function
.filter() Exercise
03:31:11 - 03:34:00
.filter() Exercise
In this exercise, students write a filter function to looks through each value in a list.
.filter() Solution
03:34:01 - 03:43:08
.filter() Solution
Bianca walks through the solution with the help of students of creating a filter function and Bianca takes questions from students.
.filter() Application Exercise
03:43:09 - 03:44:02
.filter() Application Exercise
In this challenge, students use the newly created filter function and loop through a dataset to display only the desired data.
.filter() Application Solution
03:44:03 - 03:54:44
.filter() Application Solution
Bianca walks through the solution with the help of students and takes questions from students. Bianca takes a question regarding using curly brackets with one or two statements on one line.
Functions In-Depth
Anatomy of a Function
03:54:45 - 04:00:25
Anatomy of a Function
After discussing opinions about JavaScript with students, Bianca introduces an examination on functions. Bianca overviews the function definition, parameters, body and how the function is invoked or called.
Function Scavenger Exercise
04:00:26 - 04:01:35
Function Scavenger Exercise
In this exercise, students determine each part of a function.
Function Scavenger Solution
04:01:36 - 04:14:15
Function Scavenger Solution
Bianca walks through the solution with the help of students and takes questions from students.
ES6 Arrow Functions
04:14:16 - 04:21:41
ES6 Arrow Functions
Bianca reviews arrow functions, which are a concise syntax for writing function expressions. Bianca takes questions from students.
Projecting Exercise
04:21:42 - 04:23:02
Projecting Exercise
n this exercise, students filter and then map a dataset to find desired values.
Projecting Solution
04:23:03 - 04:26:02
Projecting Solution
Bianca walks through the solution with the help of students and takes questions from students.
Spread Operator
04:26:03 - 04:29:21
Spread Operator
After a quick review, Bianca demonstrates the spread operator, which fills function arguments into an array.
Arguments Keyword
04:29:22 - 04:33:51
Arguments Keyword
Bianca reviews arguments keyword, which is an object that references all the arguments from a function as a pseudo-array.
Default Parameters
04:33:52 - 04:35:06
Default Parameters
Bianca discusses default parameters, which are default values when an argument is either omitted or undefined.
ES5 Rewrite Exercise
04:35:07 - 04:35:27
ES5 Rewrite Exercise
In this exercise, students rewrite JavaScript into ES5 JavaScript.
ES5 Rewrite Solution
04:35:28 - 04:37:53
ES5 Rewrite Solution
Bianca walks through the solution to ES5 Rewrite Exercise.
Array-Like Object
04:37:54 - 04:44:13
Array-Like Object
Bianca shows how to convert an array-like object into an array by referencing the slice method of arrays.
Array.from
04:44:14 - 04:46:32
Array.from
Bianca introduces the ES6 Array.from() method, which creates a new array instance from an array-like object.
_.from() Exercise
04:46:33 - 04:50:59
_.from() Exercise
In this exercise, students implement _.from() function. Bianca takes questions from students.
_.from() Solution
04:51:00 - 04:52:35
_.from() Solution
After quickly walking through the solution, Bianca reminds students that functions are also objects.
Scope
Scope Walkthrough Setup
04:52:36 - 05:04:03
Scope Walkthrough Setup
With an interactive exercise with students, Bianca will start a series of tests about scope, which determines the accessibility of variables.
Scope Walkthrough, Part 1
05:04:04 - 05:19:13
Scope Walkthrough, Part 1
With the aid of students, Bianca walks through a series of tests about the nature of scope.
Scope Walkthrough, Part 2
05:19:14 - 05:44:00
Scope Walkthrough, Part 2
Continuing scope exercises with students, Bianca reviews the questions about scope including local scope's availability outside of a function; when an inner and outer variable have the same name; what happens to scope if a function gets called repeatedly, and more. Bianca takes questions from students.
Scope Walkthrough, Part 3
05:44:01 - 06:07:39
Scope Walkthrough, Part 3
Finishing up the scope exercises with students, Bianca examines scope: inner function accesses both inner and outer variables and retaining access to variables from the outer and inner scope. Bianca takes questions from students.
Scope Takeaways
06:07:40 - 06:09:58
Scope Takeaways
Bianca reviews with students the big takeaways from the scope walkthroughs.
Callbacks
Higher-Order Functions & Callbacks
06:09:59 - 06:15:46
Higher-Order Functions & Callbacks
Bianca uses a few code examples to illustrate why higher-order functions are useful in functional programming. Higher-order functions either take a function as an argument or return a function as output.
Passing Arguments
06:15:47 - 06:17:41
Passing Arguments
Bianca demonstrates how functions passed as arguments can be invoked using their parameter name. These function may also have their own set of arguments passed to them when they are invoked.
Translate into ES6 Exercise
06:17:42 - 06:17:56
Translate into ES6 Exercise
In this exercise, translate JavaScript into ES6.
Translate into ES6 Solution
06:17:57 - 06:19:56
Translate into ES6 Solution
Bianca walks through the solution to Translate into ES6 Exercise.
Passing Arguments, Part 2
06:19:57 - 06:27:46
Passing Arguments, Part 2
Bianca discusses how to pass a function with arguments to another function.
_.reduce() Exercise
06:27:47 - 06:36:05
_.reduce() Exercise
In this exercise, students can pick one of two assignments: implement _.reduce() functions.
_.reduce() Solution
06:36:06 - 06:57:16
_.reduce() Solution
Bianca walks through the solution to implement _.reduce() function.
Empty Room Exercise
06:57:17 - 06:58:41
Empty Room Exercise
In this exercise, students determine their method to pull out a unique value from a pre-made dataset.
Empty Room Solution
06:58:42 - 07:23:07
Empty Room Solution
Bianca walks through a possible solution to Empty Room Exercise. Bianca takes questions from students.
Functional Utilities
Currying
07:23:08 - 07:25:37
Currying
Bianca introduces currying and composing. Currying is a process of using a function to gather arguments before passing them to another function.
Composing
07:25:38 - 07:29:15
Composing
Bianca reviews composing, which is when each function consumes the return value of the function that follows.
Advanced Scope: Closure
Closure
07:29:16 - 07:31:29
Closure
Bianca reviews examples of closure which occurs when one function returns another function, and the returning function retains access the scope.
Closure, Part 2
07:31:30 - 07:34:33
Closure, Part 2
Bianca adds a setTImeout() method to the function, demonstrating that even a delay, the nested function still has access to the parent function�۪s scope.
Creating Closure
07:34:34 - 07:43:30
Creating Closure
Bianca shows how to create closure by calling a function and saving the returned function as a variable. Bianca then uses this variable to invoke the function call to demonstrate it still has access to the original scope.
Closure Demonstration
07:43:31 - 07:50:03
Closure Demonstration
Bianca demonstrates closure and shows ES6 equivalent. Bianca takes questions from students.
Closure Recipe
07:50:04 - 08:01:30
Closure Recipe
Bianca reviews the construction and execution of closure.
Currying and Composing Exercises
08:01:31 - 08:01:43
Currying and Composing Exercises
In these exercises, students work on implementing currying and compose functions.
Currying and Composing Solutions
08:01:44 - 08:10:13
Currying and Composing Solutions
Bianca walks through the solutions to Currying and Composing Exercises.
Wrapping Up "JavaScript: From Fundamentals to Functional JS"
Wrapping Up
08:10:14 - 08:12:09
Wrapping Up
Bianca wraps up the "JavaScript: From Fundamentals to Functional JS" course and thanks the students.