Essential JavaScript

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

Watch User Created Playlist (21)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Immutable.js: Introduction - Easing the Pains of Mutability

P

Linting JavaScript with ESLint

P

The Factory Pattern for Javascript Modules

P

Lodash: Refactoring Simple For Loops

P

Advanced Flattening

Array.prototype.reduce in JavaScript by example

P

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

P

Create an Array concatAll method

Chaining the Array map and filter methods

The Array filter method

The Array map method

The Array forEach method

Editing breakpoints in Chrome devtools

P

Advanced Function Scope

P

JavaScript Function Scope Basics

P

"Private" Variables with Closures and Factory Functions

P

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

P

Hoisting in JavaScript

P

The "this" keyword: The new and window Binding

P

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

P

The "this" keyword: Introduction and Implicit Binding

P
js tutorial about Immutable.js: Introduction - Easing the Pains of Mutability

Immutable.js: Introduction - Easing the Pains of Mutability

3:22 js PRO

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 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 in order to address a mutation-related "bug" caused by multiple objects "sharing" a mutable structure (array) by reference.

js tutorial about Linting JavaScript with ESLint

Linting JavaScript with ESLint

3:08 js PRO

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.

js tutorial about The Factory Pattern for Javascript Modules

The Factory Pattern for Javascript Modules

3:15 js PRO

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.

js tutorial about Lodash: Refactoring Simple For Loops

Lodash: Refactoring Simple For Loops

3:44 js PRO

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.

js tutorial about Advanced Flattening

Advanced Flattening

11:58 js

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.

js tutorial about Array.prototype.reduce in JavaScript by example

Array.prototype.reduce in JavaScript by example

4:49 js PRO

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 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
js tutorial about Refactoring: Array.prototype by example [filter, some, forEach]

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

5:42 js PRO

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 methods:

js tutorial about Create an Array concatAll method

Create an Array concatAll method

4:17 js

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.

js tutorial about Chaining the Array map and filter methods

Chaining the Array map and filter methods

3:05 js

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.

js tutorial about The Array filter method

The Array filter method

4:42 js

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.

js tutorial about The Array map method

The Array map method

3:02 js

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.

js tutorial about The Array forEach method

The Array forEach method

4:03 js

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.

js tutorial about Editing breakpoints in Chrome devtools

Editing breakpoints in Chrome devtools

4:29 js PRO

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.

js tutorial about Advanced Function Scope

Advanced Function Scope

7:06 js PRO

Function scope and closures in JavaScript can be tricky. This lesson builds on the Function Scope Basics video to dive deeper into JS function scope.

js tutorial about JavaScript Function Scope Basics

JavaScript Function Scope Basics

5:45 js PRO

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

js tutorial about "Private" Variables with Closures and Factory Functions

"Private" Variables with Closures and Factory Functions

3:01 js PRO

By making use of closures and lexical scope, 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.

js tutorial about Double && (and) Double || (or) = Double Functionality

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

3:24 js PRO

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

js tutorial about Hoisting in JavaScript

Hoisting in JavaScript

3:39 js PRO

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

js tutorial about The "this" keyword: The new and window Binding

The "this" keyword: The new and window Binding

3:09 js PRO

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.

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

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

4:32 js PRO

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.

js tutorial about The "this" keyword: Introduction and Implicit Binding

The "this" keyword: Introduction and Implicit Binding

5:58 js PRO

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?