Some of the basics of JavaScript that you need to know. The good parts, that you will use every day.

By utilizing immutable data structures, we can write code that is easier to reason about, avoid mutation-related bugs, reduce complexity, and even gain some performance benefits along the way.

Before diving too far into Facebook's [Immutable.js](https://facebook.github.io/immutable-js/) library, let's take a moment to examine some of the pains and obstacles that mutable data structures present. 

We'll take a brief glimpse at putting the Immutable "List" data structure to work by example. We will convert our usage of Javascript's native `Array` to use [Immutable.List](https://facebook.github.io/immutable-js/docs/#/List) in order to address a mutation-related "bug" caused by multiple objects "sharing" a mutable structure (array) by reference.

immutable

Immutable.js: Introduction - Easing the Pains of Mutability

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins. We walk through setting up ESLint in a project, using the "init" CLI tool, configuring warnings/errors for rules, and adding editor plugins and build integrations. ESLint is built to be "pluggable" with simple, extendable, modular rules and an API for writing and using plugins. ESLint has many rules which are all turned off by default; you can extend the core "recommended" rules which will catch common JavaScript errors, and you can also turn on stylistic rules for code consistency.

eslint

Linting JavaScript with ESLint

Javascript modules are a great way to isolate your code, but they are not very re-usable.  If we implement the factory pattern inside of one of our modules we get code re-use without losing the encapsulation benefits of a javascript module.

javascript

The Factory Pattern for Javascript Modules

This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style. We will start by looking at how many people traditionally write JavaScript `for` loops and then talk about the alternate style and benefits that Lodash offers.

lodash

Lodash: Refactoring Simple For Loops

In this lesson we solidify our understanding of how to flatten collections. This is perhaps the most important skill when learning to program without loops. We will try our hand at flattening not just a two dimensional collection, but a three-dimensional collection. Later on it will become clear how these skills relate to asynchronous programming.

rxjs

Advanced Flattening

Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might use [Array.prototype.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) to:

- Sum an array of numbers
- Reduce an array of objects to a sum of a given property
- Group an array of objects by key or a set of given criteria
- Count the number of objects in an array by key or a given set of criteria

Array.prototype.reduce in JavaScript by example

Refactoring is a great opportunity to learn and we have an existing Javascript function that is *lengthy, hard to understand, and overcomplicated*. We'll take a look at putting some of **Javascript's built in Array.prototype methods** to use to help us clean this up and learn by example through refactoring.

By taking a few minutes to refactor this existing code, we can get a glimpse at how we can harness the power of the Array and lean on some built in Array functions available to us in Javascript's core without any added utility libraries.

In this lesson we touch on just a few of the [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) methods:

- [Array.prototype.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- [Array.prototype.some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some).

Refactoring: Array.prototype by example [filter, some, forEach]

In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we have an Array of stock exchanges, each of which is represented by an array of all the stocks listed on that exchange. If we were looking for a stock that matched a certain criteria, we would first need to loop through all of the exchanges, and then all of the stocks within. 

In these situations, most developers would nest two loops. However in this lesson we will write a new Array function `concatAll` which will automatically flatten nested arrays buy one dimension. This will remove the need to ever use a nested loop to flatten a nested array.

Create an Array concatAll method

Both `map` and `filter` do not modify the array. Instead they return a new array of the results. Because both `map` and `filter` return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using `forEach`. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

Chaining the Array map and filter methods

One very common operation in programming is to iterate through an Array's contents, apply a test function to each item, and create a new array containing only those items the passed the test. For example, let's say you wanted to loop through an array of stocks and select only those with the price larger than a certain value. In this lesson we will demonstrate how to use the Array's `filter` method to easily perform this operation with less code than a loop would require.

The Array filter method

One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's `map` method to easily perform this operation with less code than a loop would require.

The Array map method

Most JavaScript developers are familiar with the `for` loop. One of the most common uses of the `for` loop is to iterate through the items in an array. In this lesson, we will learn how to replace the `for` loop with the Array's `forEach` method - and shorten your code in the process.

The Array forEach method

There is more to breakpoints than just setting them. Learn how to edit and disable breakpoints, and log to the console without modifying your code.

chrome-devtools

Editing breakpoints in Chrome devtools

Function scope and closures in JavaScript can be tricky. This lesson builds on the [Function Scope Basics](https://egghead.io/lessons/core-javascript-function-scope-basics) video to dive deeper into JS function scope.

Advanced Function Scope

This or that? Javascript scoping can be confusing. This lesson covers the very basics of function scoping.

JavaScript Function Scope Basics

By making use of [closures and lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), we can achieve "private" properties by returning objects with methods from a factory function. By defining our desired "private" variables within our factory function and accessing these variables from within our returned object's methods we create a closure and maintain unique, separate references to our "private" variables.

"Private" Variables with Closures and Factory Functions

The and (&&) and or (||) operators in javascript do not function like traditional logical operators.  We can use them to our advantage to eliminate some boilerplate code when writing conditional expressions.

Additional jsbin: https://jsbin.com/qipina/edit?js,output

Double && (and) Double || (or) = Double Functionality

In this lesson, we'll walk through variable, function declaration, and function expression hoisting.

Hoisting in JavaScript

In this lesson we talk about the "new binding" as well as the "window binding" for rules three and four of how to understand the "this" keyword in JavaScript.

The "this" keyword: The new and window Binding

In this lesson we talk about .call, .apply, and .bind in order to understand  "explicit binding", or the second rule of discovering what the "this" keyword is referencing in JavaScript.

The "this" keyword: Explicit Binding with call, apply, and bind

In this lesson we introduce the "this" keyword in JavaScript as well as talk about "implicit binding" or the first rule in discovering what the "this" keyword is referencing.

Essential JavaScript

Joel Hooks

Course Content