A deep dive into JavaScript and functional programming techniques, this course is for beginner to intermediate JavaScript developers who want to learn techniques to write professional, modern JavaScript. In this course, Bianca cuts through the technical jargon to reveal the core concepts of JavaScript and applying functional programming techniques to JavaScript. Learn higher-order functions, closures, scope and the fundamentals necessary to use modern frameworks like React, Angular and Vue. You'll master key functional methods like map, reduce and filter ...plus promises and ES6+ asynchronous JavaScript!

This course and others like it are available as part of our Frontend Masters video subscription.

Published: February 27, 2018

Table of Contents## JavaScript: From Fundamentals to Functional JS

## Objects

## List Transformations

## .forEach() Function

## .map() Function

## .filter() Function

## Functions In-Depth

## Scope

## Callbacks

## Functional Utilities

## Advanced Scope: Closure

## Wrapping Up "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.

### 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

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.

### 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() 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() 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.

### 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 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.

### 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.

### 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.

### 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.### Currying and Composing Solutions

Bianca walks through the solutions to Currying and Composing Exercises.