JavaScript: From Fundamentals to Functional JS, v2
This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Table of Contents
JavaScript: From Fundamentals to Functional JS
Course Introduction
Bianca Gandolfo introduces herself and gives an overview of the course, "JavaScript: From Fundamentals to Functional JS."
Success Tips for Learning
Bianca reviews her tips for success in learning and developing new skills.
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
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
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
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
Bianca talks what characters are invalid when using objects and the rules around naming object properties.
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
Bianca walks through the solution with the help of students.
Object Review
While reviewing the objects, Bianca examines when to use dot notation vs. brackets.
ES6 Destructuring
Bianca introduces destructing, a simplified method to extract multiple properties from an object.
Destructuring Challenge
In this challenge, students use destructuring to pull out two properties from an object.
Destructuring Solution
Bianca walks through the destructuring solution.
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
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
In this exercise, students loop through an array.
Looping Solution
Bianca walks through the solution with the help of students.
Looping Exercise, Part 2
Building on the previous exercise, students loop through an array marking a specific value.
Looping Solution, Part 2
Bianca walks through the solution with the help of students. Bianca takes questions from students.
Looping Exercise, Part 3
In this exercise, students destructure nested data structure into two variables.
Looping Solution, Part 3
Bianca walks through the solution with the help of students. Bianca takes questions from students.
.forEach() Function
Using Functions
Bianca introduces list transformations with functions showing how to convert data into a class.
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
In this exercise, loop through a list using each function. Then students implement _.each function.
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
Bianca introduces map functions, which produces a new array of values by mapping each value in a list through a transformation function.
_.map() Exercise
In this exercise, students take a list of weapons and make them "broken" by mapping over them.
_.map() Solution
Bianca walks through the solution with the help of students. Bianca takes questions from students.
_map() vs. _each()
Bianca compares _map() and _each() functions.
_.map() Exercise, Part 2
In this exercise, students implement _.map() function.
_.map() Solution, Part 2
Bianca walks through the solution with the help of students. Bianca takes questions from students.
.filter() Function
.filter() Exercise
In this exercise, students write a filter function to looks through each value in a list.
.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
In this challenge, students use the newly created filter function and loop through a dataset to display only the desired data.
.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
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
In this exercise, students determine each part of a function.
Function Scavenger Solution
Bianca walks through the solution with the help of students and takes questions from students.
ES6 Arrow Functions
Bianca reviews arrow functions, which are a concise syntax for writing function expressions. Bianca takes questions from students.
Projecting Exercise
n this exercise, students filter and then map a dataset to find desired values.
Projecting Solution
Bianca walks through the solution with the help of students and takes questions from students.
Spread Operator
After a quick review, Bianca demonstrates the spread operator, which fills function arguments into an array.
Arguments Keyword
Bianca reviews arguments keyword, which is an object that references all the arguments from a function as a pseudo-array.
Default Parameters
Bianca discusses default parameters, which are default values when an argument is either omitted or undefined.
ES5 Rewrite Exercise
In this exercise, students rewrite JavaScript into ES5 JavaScript.
ES5 Rewrite Solution
Bianca walks through the solution to ES5 Rewrite Exercise.
Array-Like Object
Bianca shows how to convert an array-like object into an array by referencing the slice method of arrays.
Array.from
Bianca introduces the ES6 Array.from() method, which creates a new array instance from an array-like object.
_.from() Exercise
In this exercise, students implement _.from() function. Bianca takes questions from students.
_.from() Solution
After quickly walking through the solution, Bianca reminds students that functions are also objects.
Scope
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
With the aid of students, Bianca walks through a series of tests about the nature of scope.
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
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
Bianca reviews with students the big takeaways from the scope walkthroughs.
Callbacks
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
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
In this exercise, translate JavaScript into ES6.
Translate into ES6 Solution
Bianca walks through the solution to Translate into ES6 Exercise.
Passing Arguments, Part 2
Bianca discusses how to pass a function with arguments to another function.
_.reduce() Exercise
In this exercise, students can pick one of two assignments: implement _.reduce() functions.
_.reduce() Solution
Bianca walks through the solution to implement _.reduce() function.
Empty Room Exercise
In this exercise, students determine their method to pull out a unique value from a pre-made dataset.
Empty Room Solution
Bianca walks through a possible solution to Empty Room Exercise. Bianca takes questions from students.
Functional Utilities
Currying
Bianca introduces currying and composing. Currying is a process of using a function to gather arguments before passing them to another function.
Composing
Bianca reviews composing, which is when each function consumes the return value of the function that follows.
Advanced Scope: Closure
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
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
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
Bianca demonstrates closure and shows ES6 equivalent. Bianca takes questions from students.
Closure Recipe
Bianca reviews the construction and execution of closure.
Currying and Composing Exercises
In these exercises, students work on implementing currying and compose functions.
