JavaScript 101

learn JavaScript basics

Watch User Created Playlist (66)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

What is JavaScript Function Currying?

Using console.count to Count Events

P

Up and Running with Facebook Flow for Typed JavaScript

P

Understanding function bind() in JavaScript

P

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

The Factory Pattern for Javascript Modules

Template

P

Setting up the project locally

Redirect the browser using JavaScript

Publishing a beta version

Proper use of console.assert in JavaScript

P

Primitive Types in Flow

Multitask

Logging Timing Data to the Console

P

Logging Pretty-Printing Tabular Data to the Console

P

Log Levels and Semantic Methods

P

Listening for Mouse and Keyboard Events with HTML Canvas

P

Linting JavaScript with ESLint

JavaScript's Call Stack

Intro to the Web Audio API

Intro to Recursion - The Solution

Intro to Recursion - The Problem

Intro to Recursion - Refactoring to a Pure Function

Intro to Recursion - Detecting an Infinite Loop

P

Array.prototype.reduce in JavaScript by example

How to use JavaScript's String.replace

P

Hoisting in JavaScript

Grouping and Nesting Console Log Output

P

Getting Started with Redux Dev Tools

External Config

P

Equality Checking with .is() and More

P

Editing breakpoints in Chrome devtools

ES6 Rest Parameters

P

ES6 Parameter Object Destructuring with Required Values

ES6 Modules (ES2015) - Import and Export

ES6 (ES2015) - Generators

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

Destructuring Assignment in ES6

Default Values for Function Parameters in ES6

Creating the library and adding dependencies

Create an Array concatAll method

Converting an array-like object into an Array with Array.from()

Configuring npm and creating a package.json

Chaining the Array map and filter methods

Automatically Releasing with TravisCI

Arrow Function => in ES6

Modify Values in an Array with Map

P

Safely inspect nested objects with Reduce

P

Learn to flatten and flatmap arrays with reduce

P

Compose functions with reduce

P

Avoid common mistakes when working with reduce

P

Learn how to use the optional reduce arguments

P

Advanced Function Scope

P

Advanced Flattening

Advanced Console Log Arguments

P

Adding badges to your README

Adding ES6 Support

Accessible Button Events

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

P

"Private" Variables with Closures and Factory Functions

P

Add and Remove Items in Arrays using Filter, Reject and Partition in Ramda

Safer property access with Lodash's 'get' method

Get JSON data from an API using fetch

Understand the Event Listeners Panel

Yarn: A JavaScript Package Manager

Transform an array into a single value using reduce

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 Using console.count to Count Events

Using console.count to Count Events

2:16 js PRO

Learn how to user console.count in order to log out how many times a given thing has happened.

js tutorial about Up and Running with Facebook Flow for Typed JavaScript

Up and Running with Facebook Flow for Typed JavaScript

2:11 js PRO

Let's learn how to set up Facebook's Flow inside of a project and write a simple typecheck task that will let us run Flow against any files in our codebase.

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

Template

3:45 js PRO

GruntJS allows you to use underscore/erb style templates to reduce repetition and create variables. This is commonly used to point at build folders and files within your application's structure.

js tutorial about Setting up the project locally

Setting up the project locally

1:18 js

Before you start making your changes, you often need to set up your environment for the changes. This is where the repositories' contributing instructions come in really handy. In this lesson we’ll get our environment set up and ready for changes.

js tutorial about Redirect the browser using JavaScript

Redirect the browser using JavaScript

2:13 js

There are two common ways to redirect the browser in JavaScript. Both use window.location but they differ in how they interact with Session History (and hence, the browser's back button). In this lesson, you'll learn how they're different and how to use each of them.

js tutorial about Publishing a beta version

Publishing a beta version

3:37 js

Sometimes you're not quite ready to release a full on version of your open source library to npm. In this lesson, learn how to publish a beta version so people can try it out without tampering with anyone else using your library.

js tutorial about Proper use of console.assert in JavaScript

Proper use of console.assert in JavaScript

3:06 js PRO

Learn about console.assert, which is syntactic sugar for logging an error the console when a given condition is not met. It's useful, but may not do what you expect if you're coming from another language - watch this lesson to learn how to use it, and when not to.

js tutorial about Primitive Types in Flow

Primitive Types in Flow

3:44 js

We'll go over some of the built-in types in Flow and how to add them to our projects by adding type annotations to our variables in JavaScript. We'll also learn about type mismatch errors when we give a variable a value that doesn't match its type annotation and how to fix it.

Multitask

1:49 js

Grunt Multitask allows you to write complex tasks that run multiple targets. In this lesson, John will show you how to use Multitask in your GruntJS builds.

js tutorial about Logging Timing Data to the Console

Logging Timing Data to the Console

1:35 js PRO

Learn to use console.time with console.timeEnd to get accurate timings of operations in javascript. This tool can help with javascript profiling and performance optimization, and knowing how to use the console to do it means you don't have to pollute your codebase with timers and placeholders.

js tutorial about Logging Pretty-Printing Tabular Data to the Console

Logging Pretty-Printing Tabular Data to the Console

3:09 js PRO

Learn how to use console.table to render arrays and objects in a tabular format for easy scanning over the values. We'll create some mock data and then render it to the log in various ways to explore console.table's API.

js tutorial about Log Levels and Semantic Methods

Log Levels and Semantic Methods

4:38 js PRO

Go beyond console.log by learning about log levels, filtering log output and structuring your output to be meaningful and concise. The JavaScript console object offers many methods to make your life easier - start learning them here!

js tutorial about Listening for Mouse and Keyboard Events with HTML Canvas

Listening for Mouse and Keyboard Events with HTML Canvas

10:40 js PRO

In this lesson, listening for and handling mouse and keyboard events in Canvas is covered.

js tutorial about Linting JavaScript with ESLint

Linting JavaScript with ESLint

3:08 js

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 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 Intro to the Web Audio API

Intro to the Web Audio API

4:34 js

An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an oscillator node that actually plays a sound in the browser, and different ways to alter that sound.

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 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 - 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 - 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 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 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 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 Grouping and Nesting Console Log Output

Grouping and Nesting Console Log Output

3:11 js PRO

Organize your log output by grouping your logs into collapsable hierarchies using console.group().

js tutorial about Getting Started with Redux Dev Tools

Getting Started with Redux Dev Tools

6:04 js

The Redux DevTools let us wire up our Redux app to a time-traveling debugger. This can help us debug, test, and review the state of our application in a simple history that can be "bookmarked" and scrubbed through. In this lesson, we wire up the Redux DevTools into our app, and walk through the different "monitors" and options available.

More information can be found on the official Redux DevTools GitHub page: https://github.com/gaearon/redux-devtools

External Config

3:51 js PRO

In this lesson John will show you how to create a simple external config file for your GruntJS build.

js tutorial about Equality Checking with .is() and More

Equality Checking with .is() and More

4:02 js PRO

Equality checking deeply nested objects is painful. Fortunately Immutable.js makes this task easy with its .is() and .isSubset() methods. Let's see how we can take two different Immutable Maps() and check for equality.

js tutorial about Editing breakpoints in Chrome devtools

Editing breakpoints in Chrome devtools

4:29 js

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 ES6 Rest Parameters

ES6 Rest Parameters

3:47 js PRO

In this lesson we will go over ES6 or ECMAScript 2015 Rest Parameters. We will cover what they are, how they work, how they compare to the arguments keyword, and why they are more versatile.

js tutorial about ES6 Parameter Object Destructuring with Required Values

ES6 Parameter Object Destructuring with Required Values

1:40 js

Not only can you provide default values when using ES6 parameter object destructuring, but you can also require the presence of certain properties

js tutorial about ES6 Modules (ES2015) - Import and Export

ES6 Modules (ES2015) - Import and Export

5:33 js

ES6 (ES2015) introduces a standardized module format to Javascript. We'll take a look at the various forms of defining and importing modules. Using Webpack to bundle up our modules and Babel to transpile our ES6 into ES5, we'll put this new module syntax to work within our project. Then we'll examine how to import 3rd party packages from npm, importing lodash with the _ underscore alias using the ES6 module syntax.

js tutorial about ES6 (ES2015) - Generators

ES6 (ES2015) - Generators

5:28 js

Generators in ECMAscript 6 are first-class coroutines that produce encapsulated suspended execution contexts. Whew! Yield values and iterate over them until no more values exist in the generator. We'll talk more about practical use later ;)

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 Destructuring Assignment in ES6

Destructuring Assignment in ES6

4:33 js

ECMAscript 6 destructuring provides flexible options for variable assignment.

js tutorial about Default Values for Function Parameters in ES6

Default Values for Function Parameters in ES6

2:16 js

With ECMAscript 6 we get the luxury of default parameters for our functions.

js tutorial about Creating the library and adding dependencies

Creating the library and adding dependencies

4:46 js

Don't reinvent the wheel. We're creating a great library here, but we don't have to write every line of code. Learn how to depend on other libraries while creating your own in this lesson.

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 Converting an array-like object into an Array with Array.from()

Converting an array-like object into an Array with Array.from()

2:19 js

Array.from() lets you convert an "iterable" object (AKA an array-like object) to an array. In this lesson, we go over grabbing DOM nodes and turing them into an array so that we can use methods like Array.filter() and Array.forEach() on them.

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 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 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 Arrow Function => in ES6

Arrow Function => in ES6

2:57 js

ECMAscript 6 introduces the "arrow function" as a shortcut for creating anonymous functions with this scope bound.

js tutorial about Modify Values in an Array with Map

Modify Values in an Array with Map

9:26 js PRO

Map is one of the most useful array methods. It creates a new array with the exact same number of items as the source and can be used to modify values, change their type, add fields to objects, simplify objects etc. In this lesson we focus on practical use-cases for map & see it in conjunction with other array methods.

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 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 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 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 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 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 Advanced Console Log Arguments

Advanced Console Log Arguments

3:52 js PRO

Get more mileage from your console output by going beyond mere string logging - log entire introspectable objects, log multiple items in one call, and apply C-Style string substitution to make the console work for you.

js tutorial about Adding badges to your README

Adding badges to your README

2:28 js

It's nice to know the status of a project. Adding badges to your readme gives first-timers and old-timers an at-a-glance peek into the status of your project. In this lesson, we'll add several badges using shields.io

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 Accessible Button Events

Accessible Button Events

6:57 js

Often buttons need to be handled by JavaScript, and if done improperly it can lead to accessibility issues. In this lesson you will improve a major news organization's global header with some basic HTML and JavaScript.

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 "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 Add and Remove Items in Arrays using Filter, Reject and Partition in Ramda

Add and Remove Items in Arrays using Filter, Reject and Partition in Ramda

2:09 js

We'll learn how to get a subset of an array by specifying items to include with filter, or items to exclude using reject. We'll also look at how to get the results from both filter and reject, neatly separated with partition.

js tutorial about Safer property access with Lodash's 'get' method

Safer property access with Lodash's 'get' method

8:36 js

Property access in Javascript can be problematic - especially when dealing with nested Objects and Arrays. Doing it manually and in a safe manner requires tons of boilerplate inside conditionals and results in a defensive style of coding. In this lesson we look at why this is a problem & how to overcome it using the get method from the popular utility library Lodash

js tutorial about Get JSON data from an API using fetch

Get JSON data from an API using fetch

1:19 js

We will use fetch to get JSON data from an API. fetch is available globally on the window object in the browser or via libraries in other JS environments.

js tutorial about Understand the Event Listeners Panel

Understand the Event Listeners Panel

5:46 js

Use the Event Listeners tab within the Elements panel to list all DOM Event listeners. This is useful to understand how and why your site is reacting to various forms of input.

js tutorial about Yarn: A JavaScript Package Manager

Yarn: A JavaScript Package Manager

1:57 js

Yarn is a new JavaScript package manager that aims to be speedy, deterministic, and secure. See how easy it is to drop yarn in where you were using npm before, and get faster, more reliable installs.

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.

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