Tutorials on YouTube

We have published numerous tutorials on the All Things JavaScript YouTube channel. On this page we have organized them by category to make it easier to view the tutorials you need. The following categories are currently being used:

Getting Started Tutorials

JavaScript Tip: Tracking Elapsed Time
Tracking the amount of time between two events in JavaScript is not too difficult once you know a little trick with the date object. In this tutorial we will show an example of tracking the amount of time from when a page loads to the clicking of a button.

The Ins and Outs of localStorage and sessionStorage
In this JavaScript tip we delve into localStorage and sessionStorage. We will discuss what they are, when to use them, and the different techniques to store data.

Inserting Special Characters in JavaScript Strings
The backslash (\) allows you to insert special characters in JavaScript strings. In this tutorial we take a look at several different ways to insert special characters. We also look at how escape sequences are used to obfuscate code.

JavaScript Problem: Searching an Array for a Value
Searching an array is a common task. In the past we have relied on indexOf and lastIndexOf. As of ES6 there are two new array methods: findIndex and find. This tutorial covers indexOf, lastIndexOf, findIndex and find.

JavaScript Truthy and Falsy: When to Use it and When Not
JavaScript converts values to Boolean when needed such as when a value is used in a conditional. Truthy and Falsy is the concept that determines what those values evaluate to. In this tutorial we will explore truthy and falsy.

JavaScript Question: How Does the switch Statement Work?
The switch statement sometimes gets ignored because of its complex syntax. In this tutorial we talk about when to use JavaScript switch and explain how it works.

JavaScript Question: What is Inheritance?
Inheritance is a term that you hear often. In this video we explain inheritance from a JavaScript perpective and compare it with class based inheritance.

The Basics of JavaScript Objects
Objects are central to the JavaScript world. In this tutorial we cover the basics of objects, different ways to create an object and assign or access properties on an object.

Debugging JavaScript: Tips on Console Statements
Console statements can be very helpful when debugging javascript. In this tutorial we take a look at some of the lesser known console statements.

JavaScript Question: How Do I Create a Multidimensional Array?
Though true multidimensional arrays are not supported in JavaScript, you can accomplish a similar thing by creating an array of arrays. In this tutorial we look at how to set that up and then access the values.

Enumerating JavaScript Objects: Understanding the for in Loop
In this tutorial we take a look at the features of the for in loop and how to use it to iterate over the properties of a JavaScript Object.

Selecting DOM Elements with Pure JavaScript: querySelector and querySelectorAll
querySelector and querySelectorAll are two JavaScript methods that allow the selecting of DOM elements using CSS selectors; similar to what you do in jQuery. In this video we will cover both methods and compare than to more traditional methods: getElementByID, getElementsByClassName and getElementsByTagName.

JavaScript Questions: What is the Best Way to Work with undefined?
JavaScript has two methods for indicating the absence of value: null and undefined. In this video we examine the difference between null and undefined and we take a look at the best way to check to see if something is undefined.

JavaScript Questions: What is Coercion?
Unlike many languages, JavaScript is very forgiving when it comes to data types. Coercion refers to the conversion of one type to another that JavaScript performs in certain operations. It can be a blessing at times, but also can cause problems. In this video we address the world of coercion.

JavaScript Questions: What is Hoisting?
Hoisting is a phenomenon in JavaScript where you can access variables and function declarations before they are declared. We examine the ins and outs of hoisting in this video.

Determining the Number of Days Between Two Dates
In this video we take a look at the Date object in JavaScript and how it can be used to determine a span of time between two dates.

Explaining JavaScript delete: When to Use It and When Not to Use It
The delete operator or keyword has confused many developers. It was never intended that it be used to delete variables. Use delete for removing properties from an object.

Function Declarations VS Function Expressions in JavaScript
JavaScript provides 2 methods for defining a function: the function declaration and the function expression. In this video we examine the difference, which includes hoisting and the emphasis on first class functions. We also take a look at when you might want to use a named function expression as opposed to an anonymous function expression.

JavaScript Equality: Choosing the Right Operator
Since JavaScript is a dynamically typed language, you can encounter some interesting results when comparing values. This is caused by coersion. In these video we illustrate the problem and explain why you should use strict equality or strict inequality when comparing values.

How to Start Learning JavaScript
If you want to learn JavaScript you may be wondering how do I start and what is the best way to proceed. In this video from All Things JavaScript I share a few thoughts on the best ways to learn JavaScript and the steps to take if you want to learn using a self-directed approach.

Understanding Scope in JavaScript
JavaScript scope is an important concept to understand thoroughly in order to pinpoint problems in your code or understand why your code works a certain way. In this video we will walk through a code example in order to better understand JavaScript scope and the scope chain.

What is Wrong with Global Variables in JavaScript?
JavaScript makes it easy to create global variables, but we are told that global variables are bad. This video looks at what is wrong with global variables in JavaScript and how to avoid creating them.

The Difference Between var and let in JavaScript
ES6 or ES2015 provided a new way for declaring variables. This video examines the difference between var and let in JavaScript. Those differences have to do with variable scope and hoisting.

More Advanced Tutorials

Avoiding Issues with Mutability by Cloning JavaScript Objects
The fact that JavaScript objects are mutable can sometimes cause unexpected issues. We explored these issues in a previous tutorial: https://youtu.be/HE6KfMSTHKE. In this tutorial we will look at a solution commonly used in functional programming: cloning objects.

Understanding JavaScript Callbacks
Callbacks are fundamental to asynchronous coding in JavaScript. In this tutorial we delve into callbacks and look at several examples to help you understand them better.

JavaScript Tip: Working with querySelectorAll Results
Converting the results of querySelectorAll to an array allows you to use the array methods to work with those DOM elements. We show you how to do the conversion and discuss why it works. We then work with the results use forEach.

Higher Order Functions: A JavaScript Strong Point
How does the concept of higher order functions relate to first class functions? What is a higher order function? In this tutorial we answer these questions and show an example of a higher order function using the sort method to alphabetically sort the elements in an array.

JavaScript Question: What is Memoization and How Should I Use it?
Memoization is a technique for improving a function, by storing results and returning those results when they are called for again. In this tutorial we will look at 2 patterns for memoization and we will look at an example of how memoization can help.

JavaScript Question: Why are JavaScript Functions First-Class?
You have undoubtedly heard JavaScript functions referred to as first-class citizens. But what does that really mean? In this tutorial we explore that idea.

JavaScript Problem: Computing a Fibonacci Sequence
In this JavaScript problem you will see examples of using the while loop and recursion to determine a fibonacci sequence.

JavaScript Question: Should I Use try catch or an if Conditional?
Try catch is great for exception handling. But it is possible to use an if conditional in certain situations where try catch is used. We look at that in this tutorial and talk about reasons to use or not use try catch.

Dealing with JavaScript Exceptions: Using the try catch Statement
The try catch statement allows exception handling in JavaScript. In this tutorial we explain the syntax and look at a couple of examples.

XML and Recursion: An Example in JavaScript
In separate videos we have talked about working with XML using JavaScript and Recursion. In this tutorial we use a couple of examples to put both together.

JavaScript Question: How do I Work with XML Data?
In this JavaScript tutorial we look at how to convert XML data to an XMLDom and then commands that can be used to access and manipulate that data.

Private Data on Constructors: A Closure Example
At times you need data on an JavaScript object that remains private; meaning you can't change except through some interface/function you have provided. In this video we show a pattern for accomplishing this.

JavaScript Question: How do I Set the Prototype of an Object?
In this video we will show you three ways to establish the prototype of an JavaScript object.

JavaScript Question: What is a Prototype?
In this JavaScript question we cover prototypes. We define them and then look at examples to help illustrate the concept.

Understanding Recursion: A JavaScript Example
Using an example of recursion, we walk through how it is processed in order to illustrate how recursion works.

JavaScript Questions: What is Event Delegation, Event Propagation, Event Bubbling?
JavaScript has a feature that allows events to bubble up through the DOM hierarchy. These means handlers can be placed on parent or grandparent elements to handle events for the child. In this video we discuss and provide examples of event delegation which is also know as event propagation or event bubbling.

Getting Comfortable with the ES5 Array Methods in JavaScript
JavaScript supports higher order functions and good examples of the use of higher order functions can be found in the array methods that were introduced as a part of the ECMAScript 5 standard. This video presents 7 methods that are attached to the Array object: forEach, map, filter, every, some, reduce and reduceRight. We will discuss how they work and provide examples.

Creating Safe JavaScript Constructors
JavaScript constructors that are invoked without using the keyword new can cause certain issues. In this video we look at the problem and then examine a pattern that uses the instanceof operator for resolving this issue.

Five Important Concepts for Understanding JavaScript Constructors
JavaScript constructors provide a way to create multiple objects of the same type. This video presents 5 concepts regarding constructors that will help you understand exactly how they work.

Using JavaScript Statement Labels
JavaScript statement labels is a seldom used and little understood feature of JavaScript, but in certain situations it can solve a tricky problem. In this video we introduce statement labels and provide an example of how to use them with the break keyword.

JavaScript Variables and Objects: Passed by Value or Reference?
In this video we take a look at a simple concept, but a concept that is important to understand in JavaScript. Are primitive values and objects passed to other variables by value or by reference? We will illustrate the concept and then take a look at several code examples.

Using an Array to Manipulate a JavaScript String
Sometimes the easiest way to work with a string in JavaScript, is to split it apart. Using the split method you can specify how to split the string in order to extract the parts you want. In this video we cover using the split method to manipulate a string.

Demystifying JavaScript Closure
JavaScript closure is sometimes not fully understood. In this tutorial from All Things JavaScript we attempt to demystify the concept through multiple JavaScript examples.

Three Techniques for Avoiding Global Variables in JavaScript Using Closure
Three techniques are presented for avoiding the creation of unnecessary global variables in JavaScript. Using closure this tutorial presents a simple function to change JavaScript variable scope, an immediately invoked function expression (IIFE), and a global object.

Latest JavaScript Features

Converting Array-like Objects to Arrays
Whenever you need to convert an array-like object to an actual array, use Array.from. This new static function was added with ECMAScript 2015 and is a much simpler way to make the conversion. We look at how to convert array-like objects as well as another tip using Array.from.

JavaScript Problem: Searching an Array for a Value
Searching an array is a common task. In the past we have relied on indexOf and lastIndexOf. As of ES6 there are two new array methods: findIndex and find. This tutorial covers indexOf, lastIndexOf, findIndex and find.

JavaScript Question: Should I Stop Using var and Replace it with let?
let and const are now widely supported by browsers. In this tutorial we address the question of whether there is a need to use var at all. We also address the question of using const for most declarations.

ECMAScript 2016: Using the Main Features
ECMAScript 2016 defined two main features. In this tutorial we look at those two features: includes method for arrays and the exponentiation operator.

ES6 String Inspection Functions
ES6 provides three additional functions that make it much easier to test strings for the presence of other strings. Traditionally we have had to use indexOf and lastIndexOf in non-intuitive ways. We look at the traditional methods and the new way provided by includes, endsWith and startsWith functions.

Using ES6 Default Values for Function Parameters
The ES6 standard provided a way to include default values for parameters when you set up a function. This video addresses the traditional way have handling this issue in JavaScript and then shows how it is done with ES6.

Using ES6 Template Strings
ES6 or EcmaScript 2015 provided a new way to work with string literals. Although unfortunately named, the template string literal can be advantageous in certain situations. In this video we introduce and take a look at the ES6 template string.

The Difference Between var and let in JavaScript
ES6 or ES2015 provided a new way for declaring variables. This video examines the difference between var and let in JavaScript. Those differences have to do with variable scope and hoisting.

JavaScript Questions

JavaScript Question: What is Memoization and How Should I Use it?
Memoization is a technique for improving a function, by storing results and returning those results when they are called for again. In this tutorial we will look at 2 patterns for memoization and we will look at an example of how memoization can help.

JavaScript Question: Should I Stop Using var and Replace it with let?
let and const are now widely supported by browsers. In this tutorial we address the question of whether there is a need to use var at all. We also address the question of using const for most declarations.

JavaScript Question: Why are JavaScript Functions First-Class?
You have undoubtedly heard JavaScript functions referred to as first-class citizens. But what does that really mean? In this tutorial we explore that idea.

JavaScript Question: How Does the switch Statement Work?
The switch statement sometimes gets ignored because of its complex syntax. In this tutorial we talk about when to use JavaScript switch and explain how it works.

JavaScript Question: Should I Use try catch or an if Conditional?
Try catch is great for exception handling. But it is possible to use an if conditional in certain situations where try catch is used. We look at that in this tutorial and talk about reasons to use or not use try catch.

JavaScript Question: What is Inheritance?
Inheritance is a term that you hear often. In this video we explain inheritance from a JavaScript perpective and compare it with class based inheritance.

JavaScript Question: How Do I Create a Multidimensional Array?
Though true multidimensional arrays are not supported in JavaScript, you can accomplish a similar thing by creating an array of arrays. In this tutorial we look at how to set that up and then access the values.

JavaScript Question: How do I Work with XML Data?
In this JavaScript tutorial we look at how to convert XML data to an XMLDom and then commands that can be used to access and manipulate that data.

JavaScript Question: How do I Set the Prototype of an Object?
In this video we will show you three ways to establish the prototype of an JavaScript object.

JavaScript Question: What is a Prototype?
In this JavaScript question we cover prototypes. We define them and then look at examples to help illustrate the concept.

JavaScript Questions: What is Event Delegation, Event Propagation, Event Bubbling?
JavaScript has a feature that allows events to bubble up through the DOM hierarchy. These means handlers can be placed on parent or grandparent elements to handle events for the child. In this video we discuss and provide examples of event delegation which is also know as event propagation or event bubbling.

JavaScript Questions: What is the Best Way to Work with undefined?
JavaScript has two methods for indicating the absence of value: null and undefined. In this video we examine the difference between null and undefined and we take a look at the best way to check to see if something is undefined.

JavaScript Questions: What is Coercion?
Unlike many languages, JavaScript is very forgiving when it comes to data types. Coercion refers to the conversion of one type to another that JavaScript performs in certain operations. It can be a blessing at times, but also can cause problems. In this video we address the world of coercion.

JavaScript Questions: What is Hoisting?
Hoisting is a phenomenon in JavaScript where you can access variables and function declarations before they are declared. We examine the ins and outs of hoisting in this video.

General JavaScript Topics

JavaScript Tip: Getting Started with indexedDB
IndexedDB is a specification that allows you to store data in a browser. It is more structured than localStorage and uses and asynchronous API. In this tutorial we will cover what is needed to get started with indexedDB.

JavaScript Question: Why are JavaScript Functions First-Class?
You have undoubtedly heard JavaScript functions referred to as first-class citizens. But what does that really mean? In this tutorial we explore that idea.

Debugging JavaScript: Tips on Console Statements
Console statements can be very helpful when debugging javascript. In this tutorial we take a look at some of the lesser known console statements.

Choosing a JavaScript Library or Framework: Resources to Help
With so many JavaScript libraries and frameworks available, it can be a bit of a daunting task to choose one for the project you are working on. In this movie we cover three resources to help you make the correct choice.

Learning JavaScript: Six Concepts You Should Understand Thoroughly
A lot of JavaScript developers are self taught. As a part of that process, sometimes important concepts are missed. In this video I address what I feel are six JavaScript concepts you should understand well. Everyone seems to learn the elements of the language, but sometimes these concepts are missed.

Five Important Concepts for Understanding JavaScript Constructors
JavaScript constructors provide a way to create multiple objects of the same type. This video presents 5 concepts regarding constructors that will help you understand exactly how they work.

Writing JavaScript on an iPad with JavaScript Anywhere
At times you may be out and about and want to try a JavaScript idea. With JavaScript Anywhere you can pull out your iphone or ipad and begin writing JavaScript, HTML and CSS and then run it to see what happens. In this video we do a short JavaScript test and then look at the features available with JavaScript Anywhere.

Function Declarations VS Function Expressions in JavaScript
JavaScript provides 2 methods for defining a function: the function declaration and the function expression. In this video we examine the difference, which includes hoisting and the emphasis on first class functions. We also take a look at when you might want to use a named function expression as opposed to an anonymous function expression.

JavaScript Problems

JavaScript Problem: Extracting Numbers from a String
In this JavaScript problem we look at how you might go about extracting numbers that are a part of a string. Once we have a solution we also show how these statements might be chained together.

JavaScript Problem: Searching an Array for a Value
Searching an array is a common task. In the past we have relied on indexOf and lastIndexOf. As of ES6 there are two new array methods: findIndex and find. This tutorial covers indexOf, lastIndexOf, findIndex and find.

JavaScript Problem: Computing a Fibonacci Sequence
In this JavaScript problem you will see examples of using the while loop and recursion to determine a fibonacci sequence.

JavaScript Problem: Eloquent JavaScript Exercise - Range and Sum Functions
In this JavaScript Problem we address an exercise from chapter 4 of the Eloquent JavaScript book. This exercise tasks the creating of a range function and a sum function and chaining them together to test the results.

JavaScript Tips

JavaScript Tip: Understanding the Mutability of JavaScript Objects
JavaScript objects are mutable; able to change. In order to use objects effectively, it is important to understand how they behave because of this characteristic. We will look at a couple of examples to show what can occur if you ignore that objects can mutate.

JavaScript Tip: Using Pseudo-classes with querySelectorAll
Because querySelector and querySelectorAll use CSS selectors for grabbing DOM elements, they can be very powerful. However, we sometimes forget what they are capable of. In this tutorial we delve a bit into that by using querySelectorAll with pseudo-classes.

JavaScript Tip: Creating a Function that Remembers Data
If you find you are passing the some of the same information to a function and calling it multiple times, you may want to bed that data with the function using the technique discussed in this tutorial.

JavaScript Tip: Tracking Elapsed Time
Tracking the amount of time between two events in JavaScript is not too difficult once you know a little trick with the date object. In this tutorial we will show an example of tracking the amount of time from when a page loads to the clicking of a button.

JavaScript Tip: Getting Started with indexedDB
IndexedDB is a specification that allows you to store data in a browser. It is more structured than localStorage and uses and asynchronous API. In this tutorial we will cover what is needed to get started with indexedDB.

JavaScript Tip: Working with querySelectorAll Results
Converting the results of querySelectorAll to an array allows you to use the array methods to work with those DOM elements. We show you how to do the conversion and discuss why it works. We then work with the results use forEach.

The Ins and Outs of localStorage and sessionStorage
In this JavaScript tip we delve into localStorage and sessionStorage. We will discuss what they are, when to use them, and the different techniques to store data.