Javascript essentials

Essential javascript knowledge

Watch User Created Playlist (66)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

The JSON.stringify API

JavaScript's Call Stack

How to use JavaScript's String.replace

P

Safely inspect nested objects with Reduce

P

Compose functions with reduce

P

The JSON.parse API

P

Use Some as a Ternary Operator or Conditional

P

Intro to Recursion - Detecting an Infinite Loop

P

Intro to Recursion - Refactoring to a Pure Function

Intro to Recursion - The Problem

Intro to Recursion - The Solution

Precompiling Your LESS Files with Gulp

What is JavaScript Function Currying?

4 common ways to get a substring from a string in JavaScript

P

Scrape an HTML Table with split, map, and reduce

P

Bundling Your JavaScript Files with Gulp

Sort an Array Alphabetically or Numerically

P

Learn to flatten and flatmap arrays with reduce

P

Avoid common mistakes when working with reduce

P

Learn how to use the optional reduce arguments

P

Use reduce to filter and map over large datasets

Reduce an array into a single object

Transform an array into a single value using reduce

Using JSHint for Linting with Gulp

Understanding function bind() in JavaScript

P

Create a Shallow Copy of an Array with Slice

P

Check if a Value is in an Array with indexOf

P

Combine Values of an Array into a String with Join

P

Use Concat to Add Values to an Array

Gulp and Browserify - Adding Babel & Source Maps

P

Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Hooking up Watchify

P

Gulp and Browserify - Initial Setup

Adding ES6 Support

Add code coverage reporting

Adding code coverage checking

Adding code coverage recording with Istanbul

Automatically Releasing with TravisCI

"Private" Variables with Closures and Factory Functions

P

Array.prototype.reduce in JavaScript by example

Linting JavaScript with ESLint

P

Configuring npm and creating a package.json

The "this" keyword: The new and window Binding

NW.js and Webpack: A match made in heaven

P

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

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

Web APIs: Persisting browser data with window.localStorage

Hoisting in JavaScript

The "this" keyword: Introduction and Implicit Binding

The Factory Pattern for Javascript Modules

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

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

Advanced Flattening

Webpack CSS, Preprocessors, and url assets

P

Webpack Loaders, Source Maps, and ES6

P

Intro to Webpack

Simple drag and drop with Observables

Using the map method with Observable

Introducing the Observable

Create an Array concatAll method

Chaining the Array map and filter methods

The Array filter method

The Array map method

The Array forEach method

Advanced Function Scope

P

JavaScript Function Scope Basics

js tutorial about The JSON.stringify API

The JSON.stringify API

8:26 js

JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is commonly used to transfer data from the server to the browser. The browser has a JSON API that allows you to serialize a JavaScript object or array into a JSON string. This API allows you to customize the serialization very specifically as well.

js tutorial about JavaScript's Call Stack

JavaScript's Call Stack

3:45 js

JavaScript has a concurrency model based on an "event loop". Yet, we know that JavaScript is single-threaded, which means only one task can happen at a time. To understand how JavaScript has a concurrent model yet is single threaded, we'll take a look at how the browser is working to interpret your JavaScript.

Specifically, we'll start by looking at the Stack implemented by browser engines (e.g. V8 or SpiderMonkey). The JavaScript engines use the call stack to keep track of what functions are running -- a function is added to a stack when the engine reaches a function that needs to be executed, and it cleared from the stack when the function returns.

js tutorial about How to use JavaScript's String.replace

How to use JavaScript's String.replace

5:26 js PRO

In JavaScript, you can change the content of a string using the replace method. This method signature is overloaded with a bunch of different ways to do string replacement in JavaScript. This lesson covers the entire API (including an interesting DSL for the replacement string).

js tutorial about Safely inspect nested objects with Reduce

Safely inspect nested objects with Reduce

6:29 js PRO

A common problem when dealing with some kinds of data is that not every object has the same nested structure. lukeskywalker.parents.father.isjedi works, but anakinskywalker.parents.father.isjedi throws an exception, because anakin_skywalker.parents.father is undefined. But we can reduce a path to provide safe default values and avoid exceptions when walking the same path on non-homogenous objects - watch to learn how! :)

js tutorial about Compose functions with reduce

Compose functions with reduce

8:19 js PRO

Javascript has first-class functions which means that any function can stored, passed around, and returned just like an Object can. This allows for a lot of flexibility with how you call functions. This allows us to use array reduction to create functional pipelines by composing arrays of functions.

js tutorial about The JSON.parse API

The JSON.parse API

3:35 js PRO

JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is commonly used to transfer data from the server to the browser. The browser has a JSON API that allows you to parse the JSON string into a JavaScript object. This API allows you to customize the parsing behavior very specifically as well.

js tutorial about Use Some as a Ternary Operator or Conditional

Use Some as a Ternary Operator or Conditional

5:43 js PRO

some returns a boolean value after passing each item in the source array through the test function that you pass in as the first parameter. This makes it well suited to the types of queries that require a simple yes or no answer. In this lesson we look at 2 practical use-cases for some. The first shows how it can be used with a ternary operator to switch a class on an element & the second shows how some can be used in an if conditional.

js tutorial about Intro to Recursion - Detecting an Infinite Loop

Intro to Recursion - Detecting an Infinite Loop

5:39 js PRO

When using recursion, you must be mindful of the dreaded infinite loop. Using the recursive function that we’ve built up over the previous lessons, we look at how a simple duplicated configuration item could cause chaos for our program as it has no context of which items it has previously seen. We fix this problem by introducing a parents array, which can keep track of which top-level commands have already been accessed.

js tutorial about Intro to Recursion - Refactoring to a Pure Function

Intro to Recursion - Refactoring to a Pure Function

3:37 js

Our previous solution used forEach and a globally available array that could be mutated from inside our function. We can improve upon this and create a function that is easier to maintain & test by swapping our forEach loop for reduce. By removing the global array and instead making getTasks return a value directly we end up with a pure function.

js tutorial about Intro to Recursion - The Problem

Intro to Recursion - The Problem

6:15 js

Recursion is a technique well suited to certain types of tasks. In this first lesson we’ll look at solving a problem that requires the flattening of arrays without using recursion. Showing the shortcoming of a non-recursive solution first will help you to understand why it’s so valuable and why sometimes it's the only solution to many problem.

js tutorial about Intro to Recursion - The Solution

Intro to Recursion - The Solution

4:39 js

In this lesson we manage to remove all of the nested loops that helped us towards a partial solution in the first lesson. We create a function getTasks, that can, only under certain conditions, call itself. This is the basis of recursion and often leads to cleaner, shorter code that can handle more dynamic input.

js tutorial about Precompiling Your LESS Files with Gulp

Precompiling Your LESS Files with Gulp

2:40 js

We will look at precompiling your LESS files using Gulp, Gulp-Concat, and Gulp-Less

js tutorial about What is JavaScript Function Currying?

What is JavaScript Function Currying?

5:34 js

Currying is a core concept of functional programming and a useful tool for any developer's toolbelt. In this lesson, John walks through the definition of currying and its practical usage.

js tutorial about 4 common ways to get a substring from a string in JavaScript

4 common ways to get a substring from a string in JavaScript

2:38 js PRO

There are four common ways to get a substring from a string in JavaScript, substring, substr, slice, and split + join. In this lesson you'll learn what the API to each of these methods is and how they compare.

js tutorial about Scrape an HTML Table with split, map, and reduce

Scrape an HTML Table with split, map, and reduce

8:31 js PRO

This lesson teaches about the common need of grabbing information from an HTML table and converting it into plain JavaScript objects that you can use for your own needs.

js tutorial about Bundling Your JavaScript Files with Gulp

Bundling Your JavaScript Files with Gulp

3:31 js

We will look at bundling your JavaScript files using Gulp, Gulp-Concat, and Gulp-Uglify

js tutorial about Sort an Array Alphabetically or Numerically

Sort an Array Alphabetically or Numerically

6:23 js PRO

Sort can automatically arrange items in an array. In this lesson we look at the basics including how to sort an array of strings alphabetically and the correct way to perform a numerical sort on an array of numbers. We finish as always with a practical use-case that shows not only sort in action, but also how it can be chained together with other array methods such as map and join.

js tutorial about Learn to flatten and flatmap arrays with reduce

Learn to flatten and flatmap arrays with reduce

8:06 js PRO

Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single array, the dreaded flatmap allows you to convert an array of objects into an array of arrays which then get flattened, and reduceRight allows you to invert the order in which your reducer is applied to your input values.

js tutorial about Avoid common mistakes when working with reduce

Avoid common mistakes when working with reduce

4:17 js PRO

In this lesson, we will be looking at two common mistakes programmers make when working with reduce. We will see why we always need to pass in an initial value for our accumulator as well as return the accumulator.

js tutorial about Learn how to use the optional reduce arguments

Learn how to use the optional reduce arguments

4:47 js PRO

Sometimes we need to turn arrays into new values in ways that can't be done purely by passing an accumulator along with no knowledge about its context. Learn how to reduce an array of numbers into its mathematical mean in a single reduce step by using the optional index and array reducer arguments.

js tutorial about Use reduce to filter and map over large datasets

Use reduce to filter and map over large datasets

8:32 js

Learn how two common array functions - map() and filter() - are syntactic sugar for reduce operations. Learn how to use them, how to compose them, and how using reduce can give you a big performance boost over composing filters and maps over a large data set.

js tutorial about Reduce an array into a single object

Reduce an array into a single object

3:59 js

We'll look at using array.reduce to transform an array of strings into an object that counts the occurrence of each string in the array.

js tutorial about Transform an array into a single value using reduce

Transform an array into a single value using reduce

3:56 js

Learn how to use the reduce function on javascript arrays to transform a list of values into something else. In this introduction we'll be taking a list of numbers and reducing them into a sum.

js tutorial about Using JSHint for Linting with Gulp

Using JSHint for Linting with Gulp

6:01 js

We will look at linting your JavaScript files using jsHint with Gulp to check for errors and warnings.

js tutorial about Understanding function bind() in JavaScript

Understanding function bind() in JavaScript

3:03 js PRO

Changing context in JavaScript is only possible using call() and apply(). The bind() method on the function prototype use those methods to allow us to quickly change the context in which a function is executed in. Learn how bind works by recreating it.

js tutorial about Create a Shallow Copy of an Array with Slice

Create a Shallow Copy of an Array with Slice

9:15 js PRO

Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a 'shallow' copy is and how it can trip people up. We go on to look at examples that show to how to copy only the first item, the last item and even how to copy a sub-section of an array excluding the first and last. We end the lesson with a practical example that shows how slice fits into a workflow that contains other array methods such as map & reduce.

js tutorial about Check if a Value is in an Array with indexOf

Check if a Value is in an Array with indexOf

5:21 js PRO

indexOf is used to search for a value or reference inside of an array. In this lesson we first look at what values are returned when a search is successful vs when it's unsuccessful. Then we move onto a technique that shows how to use the return value to create a boolean flag that can be checked easily. We end by filtering 1 array based on the existence of a value in a whitelist array.

js tutorial about Combine Values of an Array into a String with Join

Combine Values of an Array into a String with Join

4:42 js PRO

The join() method joins all elements of an array into a string. In this lesson we first look at why join is often a better option than regular string concatenation. Then we move onto an example which shows a simple way of storing lines of text in an array and outputting them with a new line separator and we finish by looking at ways to chain multiple array methods together.

js tutorial about Use Concat to Add Values to an Array

Use Concat to Add Values to an Array

4:38 js

Concat creates a shallow copy of an existing array that includes any arguments you pass to it. In this lesson, we look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as forEach

js tutorial about Gulp and Browserify - Adding Babel & Source Maps

Gulp and Browserify - Adding Babel & Source Maps

4:30 js PRO

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using exorcist.

js tutorial about Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Adding Live Reload with Browsersync

3:08 js

Building upon the watch task that we begin this lesson with, we’ll look at how to create a local development server using the app directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public .stream() method that is designed exactly for this purpose.

js tutorial about Gulp and Browserify - Hooking up Watchify

Gulp and Browserify - Hooking up Watchify

3:31 js PRO

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task watch & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

js tutorial about Gulp and Browserify - Initial Setup

Gulp and Browserify - Initial Setup

2:21 js

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single bundle.js file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by gulp.dest and finish by writing the bundle to a dist directory.

js tutorial about Adding ES6 Support

Adding ES6 Support

8:35 js

Writing the code in the next version of JavaScript can really simplify the development of a library. In this lesson, learn how to create a build which uses the BabelJS transpiler to enable you to write your code using ES6 (aka ES2015) syntax.

js tutorial about Add code coverage reporting

Add code coverage reporting

3:59 js

Now that we're keeping track of our coverage, let's upload our reports to a third party service so we can track our stats over time. In this lesson we'll show how easy it is to upload our stats to codecov.io.

js tutorial about Adding code coverage checking

Adding code coverage checking

3:24 js

Now that we have code coverage being reported, let's make sure that nobody commits code which drops code coverage below our standard by adding a check-coverage script that utilizes istanbul's built-in check-coverage command.

js tutorial about Adding code coverage recording with Istanbul

Adding code coverage recording with Istanbul

2:57 js

This lesson will utilize the Istanbul tool to instrument our code for code coverage recording and reporting. We'll use this to make sure that as our library gets new features, we keep track of our coverage and can find places to improve it.

js tutorial about Automatically Releasing with TravisCI

Automatically Releasing with TravisCI

3:52 js

Now that we have everything set up with semantic-release and we have a feature commit, let's push that up and watch TravisCI use semantic-release do our library release automatically.

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 Array.prototype.reduce in JavaScript by example

Array.prototype.reduce in JavaScript by example

4:49 js

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 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 Configuring npm and creating a package.json

Configuring npm and creating a package.json

5:01 js

In this lesson, you'll learn how to set up your machine to publish to npm so people can install your library. You'll configure some helpful defaults and use those to create a package.json file for your project using npm init.

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

The "this" keyword: The new and window Binding

3:09 js

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 NW.js and Webpack: A match made in heaven

NW.js and Webpack: A match made in heaven

4:51 js PRO

Let's add some module loading to our NW.js. Webpack and dependency management FTW!

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

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

3:24 js

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 The "this" keyword: Explicit Binding with call, apply, and bind

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

4:32 js

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 Web APIs: Persisting browser data with window.localStorage

Web APIs: Persisting browser data with window.localStorage

4:24 js

Local Storage is a native JavaScript Web API that makes it easy to store and persist data (as key-value pairs) in the Browser. In this lesson, we'll walk through using window.localStorage to store feedback a user enters into a form (text) so that even if they close and re-open their browser, they won't loose their progress.

js tutorial about Hoisting in JavaScript

Hoisting in JavaScript

3:39 js

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

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

The "this" keyword: Introduction and Implicit Binding

5:58 js

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.

js tutorial about The Factory Pattern for Javascript Modules

The Factory Pattern for Javascript Modules

3:15 js

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

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

5:42 js

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 The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

5:05 js

Javascript modules are a design pattern that allow you to encapsulate your code into smaller self managing pieces. They help you separate your code, protect your variables, and provide an easy way to expose only the parts of your component that you want to be exposed.

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 Webpack CSS, Preprocessors, and url assets

Webpack CSS, Preprocessors, and url assets

7:09 js PRO

Webpack enables modularity by allowing you to require the styles needed for a particular component. Adding preprocessors is a breeze and it simplifies the deployment of your css assets.

js tutorial about Webpack Loaders, Source Maps, and ES6

Webpack Loaders, Source Maps, and ES6

5:03 js PRO

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

js tutorial about Intro to Webpack

Intro to Webpack

4:29 js

Webpack is a module bundler that bundles javascript and other assets for the browser. It works really well for applications and javascript libraries and is very simple frontend build tool.

js tutorial about Simple drag and drop with Observables

Simple drag and drop with Observables

12:35 js

Armed with the map and concatAll functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.

js tutorial about Using the map method with Observable

Using the map method with Observable

3:45 js

Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

js tutorial about Introducing the Observable

Introducing the Observable

11:59 js

In this lesson we will get introduced to the Observable type. An Observable is a collection that arrives over time. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.

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

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

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