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:

JavaScript Fundamentals: Checking null and undefined

The primitive values null and undefined have a distinct difference that should be used. But how to you tell the difference between a null value, an undefined value and other falsey values? We will address it in this tutorial.

Different Methods for Combining Arrays

Arrays are an important data structure to learn. In this tutorial we will look at different methods for combining arrays.

JavaScript Fundamentals: Using push, pop, unshift and shift to Manipulate an Array

There are certain applications for adding elements to the end of an array and removing elements from the beginning. This is a simple problem to solve with push and shift. In this tutorial we look at push, pop, unshift and shift.

JavaScript Foundations: Understanding the Ternary Operator

The ternary operator allows you to reduce a conditional statement into a single line. Those just getting started with JavaScript sometimes do not understand the ternary operator. In this tutorial we go over it and provide examples.

JavaScript Tip: Using slice and splice

slice and splice are two Array methods that sound very similar but are very distinct. In this tutorial we will describe both methods and look at examples that show how they work.

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.

JavaScript Problem: Scope and the Nature of Objects

In this JavaScript problem we are going to work with a problem that deals with scope and also the nature of objects. This tutorial will help you understand both concept more deeply.

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.

Using Immediately Invoked Function Expressions (IIFEs)

Immediately Invoked Function Expressions or IIFEs are a staple of JavaScript development, but can sometimes be confusing to the uninitiated. In this tutorial we will cover IIFEs so that anyone can understand them.

JavaScript Loading Strategies: Placing the Script Tag

There are multiple design patterns and strategies for the loading of JavaScript files in a browser. In this tutorial we look at area, the placement of the script tag in the HTML file. We will look at the implications and discuss the HTML loading process.

JavaScript Loading Strategies: Lazy Loading

In our second tutorial on JavaScript loading patterns we cover lazy loading. Lazy loading allows you to load a minimal amount of JavaScript to begin with and then load the rest in the background. This provides a faster page load.

JavaScript Loading Strategies: Using async and defer Attributes

In this third and final installment of JavaScript loading strategies we take a look at the defer and async attributes of the script tag. We will do several tests that show how the work and at the end we will discuss use cases.

JavaScript Best Practices

In this tutorial we take a look at some best practices for JavaScript. We will look at some DOs and some DON'Ts and delve into the reasons behind them.

Understanding Asynchronous JavaScript

Understanding asynchronous JavaScript is an important concept. This concept leads to a better understanding of callbacks and promises.

JavaScript Issues: Problems with Callbacks

This tutorial is part of a series that teaches about promises. In this tutorial we talk about the issues associated with callbacks. This leads us to the need for promises.

JavaScript Fundamentals: 5 Ways to Check a String for a Substring

JavaScript is very flexible and provides multiple ways to do many things. If you need to check a string for some value, there are 5 ways you can approach it. In this tutorial we will talk about all 5 methods.

JavaScript Fundamentals: Functions are Objects

A very important, yet loosely understood feature of JavaScript is the feature that functions are objects. In this tutorial I want to cement this idea with some examples.

Grabbing a CSS Style from an HTML Element

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.

Converting a String to a Number

In todays tutorial we are going to cover a simple but fundamental concept in JavaScript. We are going to look at how to convert a string to a number and why you might want to do that.

JavaScript Fundamentals: Strings are Iterable

Whenever you are working with Strings in JavaScript, it is important to remember that a string is an iterable. In this tutorial we are going to dicuss iterables as they apply to strings.

What is a Factory Function?

What is a factory function? In this tutorial we are going to talk about what they are and when you might want to use them. We will also address the value of closure with factory functions.

Iterating Over a JavaScript Object

For many years the for in loop has been available for iterating over an object. As oposed to general objects, Arrays have so many options available for working with the elements. In this tutorial we are going to look at accessing the keys and values of an object through an array.

The Magic of the JavaScript Reduce Method

Many times the JavaScript reduce method is limited because we are not creative enough with it. Reduce can do so much and in this tutorial we look at a couple of examples in order to show its possibilities.

JavaScript Patterns: Using the Traditional Module Pattern

The module pattern is an important pattern to learn in JavaScript. We will dive into this pattern in this tutorial.

JavaScript Arrow Functions are More than Just Concise Syntax Part 1

So many times when we talk about JavaScript arrow functions, we talk about its concise syntax. But there is more than that. Arrow function also perform lexical this binding. We take a look at when that can be a problem in this tutorial.

JavaScript Arrow Functions are More than Just Concise Syntax Part 2

In the last tutorial we looked at some of the problems that can be causes because arrow function perform lexical this binding. In this tutorial we look at where that can be an advantage.

Using Custom Events

In JavaScript you can create a custom event and respond to that event using a listener. In this tutorial we will show you how to create a custom event, emit that event, and respond to it with an event listener.

Understanding and Using JavaScript Promises

In this tutorial we cover what JavaScript promises are and show you how to use them to code asynchronous JavaScript. We will look at a couple of examples to help this sink in.

Creating JavaScript Promises

Not only do you need to know how to use promises, there are times you will need to create a promise. In this tutorial we walk through the process of creating a promise.

Using Promise Static Methods all and race

In this final tutorial on JavaScript promises we will take a look at the all and race static methods. They allow you to work with multiple promises at that same time.

Filtering JavaScript Arrays

If you need to filter values in an array, you should be using the filter method, not a loop. In this tutorial we do a deep dive into the filter method.

Mapping JavaScript Arrays

The map method of arrays is another method that you need to make a part of your JavaScript arsenal. If you need to manipulate the values of an array, use map. Don't modify the existing array. We cover it in this tutorial.

Reducing an Array to a Single Value

In this tutorial we cover the reduce method of JavaScript arrays to go along with filter and map. Reduce allows you to combine the elements of an array into a single value using a function you create.

Checking Each Element of an Array

If you need to check each element in a JavaScript array against some criteria, you should use either the some or every method of arrays. In this tutorial we dive into these methods in great detail.

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.

Using Regular Expression exec to Split a String

The exec method on regular expression objects has a nice feature that can be used to break a string into an array. Basically when you use capturing groups, those groups become elements in an array. We look at that in this tutorial.

JavaScript Fundamentals: Freezing a JavaScript Object

At times you need to make sure an object cannot be changed. Since JavaScript objects are mutable, the only way to prevent that is using Object.freeze. We talk about why you may want to freeze an object and how you should do it in this tutorial.

JavaScript Patterns: The Callback Pattern

The callback pattern is an important part of JavaScript. You should be incorporating this pattern in your code. We look at an example and some of the benefits in this tutorial.

Breaking Up a String Using exec

This tutorial builds on a previous tutorial on exec. We look at an example of how to extract a word and associated words from a string using the regular expression exec method.

JavaScript Comparisions: Checking for Objects

Checking for certain data types in JavaScript can sometimes be a bit tricky. You may not get what you expect. In this tutorial we are going to look at how you can check for objects and what we can learn about the JavaScript language from doing that.

The useCapture Feature of addEventListener

I've been doing some training on event listeners lately and so I've decided to discuss what I think is a poorly understood feature of addEventListener. That is the useCapture parameter that affects event propagation.

Nullish Coalescing

The ECMAScript 2020 feature set has some nice additions to JavaScript. We are going to look at one of those features in this tutorial: specifically null coalescing.

Creating and Using JavaScript Symbols

In this tutorial we will look at how to create them, how to refer to them and for what purposes you might use a symbol that you have created.

Simple Date Formatting with Vanilla JavaScript

There are now ways to format dates in JavaScript without using a library like moment.js. In this tutorial we will look at toLocaleString and how to specify date and time formats.

JavaScript Classes and the Prototype

There are multiple ways for creating objects in JavaScript, and I have done tutorials on many of those. However, I have yet to discuss classes, so it's time to do that. But I'm not just going to discuss classes, but also relate them to prototypal inheritance. We will then look at the plusses and minuses of JavaScript classes.

Concise Methods and Properties on JavaScript Objects

Concise methods and properties have been around since ES6. In this tutorial we will look at how you can save keystrokes when you use concise methods and properties while defining a JavaScript object using literal syntax.

Using a JavaScript Iterator

A JavaScript Iterator allows you to move through a collection in a one-at-a-time fashion. In this tutorial we will look at how to set up and use an iterator.

Arrow Functions

In this tutorial we examine arrow functions and the concise syntax provided by this new feature.

Creating a Collection of Key/Value Pairs

JavaScript has always allowed you to work with key/value pairs through objects. The Maps collection made available with ES6 improves on that. In this tutorial we cover Maps in full detail.

Using the JavaScript Spread Operator

ES6 gave us the spread operator which is represented by three dots (...). It can be very helpful in working with arrays in certain situations. In this tutorial we will look at several examples of how you can use the spread operator.

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.

The ES 2020 matchAll Method

ECMAScript 2020 has several neat features as a part of it. In this tutorial we are going to look at a new method for strings: matchAll.

JavaScript Question: When Should I Use the Prototype?

A recent question prompted this tutorial. You may understand prototypal inheritance, but when should you use it? We address that question with examples.

Using a Prototype with a Factory Function?

In my previous tutorial I talked about factory functions. In this tutorial, I'm going to look at how we can assign a prototype to objects that are produced using a factory function. Make sure you watch the tutorials referenced below for a complete understanding of this topic.

JavaScript Question: What is the Difference Between Properties and Variables?

JavaScript has some quirks that can sometimes make you scratch your head, but there is usually an explanation behind those quirks. In this tutorial we are going to look at one of those quirks that has to do with the difference between a variable and a property.

JavaScript Question: How do I Hide JavaScript Code?

At times you may find yourself working on a project where you need to hide some or all of the JavaScript code. In this tutorial we take a look at how you can obfuscate your code to achieve this purpose.

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.

JavaScript Questions: What is the Best Way to Clear an Array?

Let's say you are using an array to track data. And at times you need to clear out that array. What is the best way to do that and why? That is what we will be looking at in this tutorial.

JavaScript Questions: What is Destructuring?

When you first encounter destructuring, the syntax may look weird. But it is a simplified way for assigning values from arrays and objects. We will look at destructuring in this tutorial.

JavaScript Questions: How can I Create a Private, Immutable Object?

What if you want to make an object private; meaning you want to be able to access the data, but not able to change it. We are going to have a little fun and look at a unique way of doing that in this tutorial.

JavaScript Questions: How Do I Format Numbers?

When you need to display numerical information, you may need to format those numbers in different ways. In this tutorial we look at how to format numbers using Vanilla JavaScript.

JavaScript Questions: How do I Find and Extract a Value from an Array?

JavaScript arrays have a wealth of methods that can be used for working with them. In this tutorial we will look at one of those methods. Find can be used for locating and extracting values from an array.

JavaScript Questions: How Can I Select HTML DOM Elements?

In todays tutorial we are going to deal with a fairly basic JavaScript question, but it is a question you may get asked in an interview. We are going to look at all the ways you can select elements in the DOM using vanilla JavaScript.

JavaScript Questions: How Can I Flatten an Array?

How can you take an Array of Arrays and flatten it so that it is a single array without sub-arrays and just with elements. In this tutorial we are going to look at how to do that.

How Well to You Know these Important Fundamental Concepts?

Understanding the fundamental ways JavaScript works is so important. For example, it probably wouldn't matter how skillfully you solve difficult problems in a coding interview if you messed up on some of the fundamental questions. In this tutorial take a moment to see how well you know these important fundamentals.

How Can I Tell if an Object is a Date?

I ran into a small issue a couple of days ago, so I thought I would do this tutorial on the central question of that issue. We are going to look at how you can tell whether or not a JavaScript object is a date.

Habits to Continue Learning JavaScript

As we are approaching the new year, I wanted to use this tutorial to talk about ways we can make sure that we continue learning JavaScript.

My 5 Favorite Things about JavaScript

In this video I'm going to jump away for a bit from the normal tutorial and we are going to talk about the feature of JavaScript that I like most. Record your favorite things in the comments.

JavaScript Fundamentals: What You Need to Know about the JavaScript Engine

In this tutorial we dig a bit deeper into JavaScript. We talk about the JavaScript Engine, the thing that makes all the JavaScript we write possible.

The Flexibility of JavaScript

One of the things I like about JavaScript is how the same problem can have so many different solutions depending on the developer. JavaScript is flexible. In this tutorial we are going to look at a simple problem solved a number of different ways.

JavaScript Coding Conventions

Following coding conventions can help make your code more consistent, predictable and readable. In this tutorial we will discuss some of the more accepted coding conventions.

The State of JavaScript Report

In this movie, I take a small diversion from regular tutorials in order to discuss some of the results from the most recent State of JavaScript report. We will discuss findings in flavors, front end development, back end and a few other categories.

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.

Learning JavaScript

In this tutorial I take a few minutes to describe some resources I've provided for learning JavaScript. Many of those resources are included in the links below this description.

General JavaScript Questions I Receive

In todays topic I want to address some general questions about JavaScript and development. These are some questions that get asked frequently, and are of interest to most people learning JavaScript.

JavaScript Problem: Counting the Number of Occurrences in an Array

In this tutorial we are going to do another JavaScript Problem. With this problem we are going to look at a situation where we need to count the number of occurences of a particular value in an array.

JavaScript Problem: What is the Output?

In this tutorial we are going to look at a code snippet I saw in the learnJavaScript subreddit. It is great for testing three pieces of JavaScript knowledge which are: an understanding of Sets; the use of the rest/spread operator; and the use of the reduce array method.

JavaScript Problem: Deciphering Tricky Increment Operators

I think sometimes we don't understand the different between a pre-increment operator and a post increment operator. So that is what we are going to deal with in this tutorial.

JavaScript Problem: Replace All Occurrences of a String

Most people are aware of how you can replace a character or word in a string using the replace method. However, what if you want to replace all occurrences in that string? In this tutorial we are going to look at that JavaScript problem.

JavaScript Problem: Identifying the Locations of a Value in an Array

At times you may want to retrieve the multiple locations (index number) for a value that may exist once, multiple times or not at all in an array. Through the magic of reduce, we can make this happen. In this tutorial we take a look at it.

JavaScript Problem: A Tricky JavaScript Interview Question

In this tutorial we are going to look at a JavaScript problem that is sometimes used to weed out JS developers during a JavaScript interview. This problem shows the interplay of scope and closure.

JavaScript Problem: Checking JavaScript Performance with jsPerf

You may frequently need to concern yourself not only with how to solve a particular problem, but which solution is the most performant. In this tutorial we are going to look at how to check code performance with jsPerf.

JavaScript Problem: Capitalize the First Letter of Multiple Strings

In this JavaScript problem we look at processing multiple names in order to capitalize the first letter of each name. It is a simple solution that is sometimes made more complex than it needs to be.

JavaScript Problem: Sorting an Array of Objects

The sort method of JavaScript arrays allows the use of a callback function. For many sort features, this is necessary. In this tutorial we look at sorting an array of objects.

JavaScript Problem: Accessing Each Character in a String

In this tutorial we use two approaches for addressing characters in a JavaScript string. We use the for of loop and the reduce method of arrays.

JavaScript Problem: Responding to and Tracking Key Presses

In this tutorial we are going to look at adding a handler to capture and respond to keyboard events. We will capture those key presses and then display them.

JavaScript Problem: Passing a JavaScript Value Between HTML Pages

In this tutorial we are going to look at passing a value from one HTML page to another. We will use two techniques: localstorage and the query string. The value we are going to pass is the number of milliseconds so that we can determine elapsed time.

JavaScript Problem: Copying a JavaScript Object for Later Use

If you need a copy of an object that doesn't change when the original object is mutated, there are a couple of ways to do that. In this tutorial we look at the best ways to clone a JavaScript object.

JavaScript Problem: Extracting Numbers from a String

Occasionally you will need to extract numbers from a string. In this tutorial we show a pretty simple technique using a regular expression with the String match method.

JavaScript Problem: Formatting Time

In this tutorial I show you a couple of tricks that make it easier to format time in a hours, minutes, seconds pattern (0000:00:00.00). The scenario we are going to tackle is that we have collected the number of milliseconds a person as spent and now we need to format it.

JavaScript Problem: Creating a JavaScript Tooltip: Part 1

In this tutorial we explore some techniques for working with the DOM. This is all done within the context of solving a JavaScript problem: How do we create a JavaScript Tooltip. Yes, CSS can be used for tooltips, but JavaScript does offer some advantages.

JavaScript Problem: Creating a JavaScript Tooltip: Part 2

In this part 2 tutorial, we finish up our JavaScript tooltip. In the process we implement several important JavaScript concepts including closure, undefined and null values, and the value of the keyword this.

JavaScript Problem: Creating a JavaScript Tooltip Part 3: Callback Issues

We complete this series of tutorials by talking about callback issues. We introduce call and apply, talk about how callbacks affect the value of this, and deal with callback hell briefly.

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 Problem: Using Set to Create a Non-duplicated Collection

Creating an array of values without duplicating a value takes a bit of work. You need to check each new value. ES6 provides an easier way of doing that by creating a set. In this tutorial we will look at sets and how to work with them.

JavaScript Problem: Shuffling an Array

If you need to shuffle the elements of an array, there is a tried and true method for doing that. In this tutorial we take a look at how to shuffle the elements of an array.

JavaScript Problem: Using Fetch to Retrieve Cryptocurrency Data

XMLHttpRequest is a tired solution for retrieving data from a site. In this tutorial we will look at the fetch API. And we will use the coinmarketcap cryptocurrency site as an example site in retrieving data. We will look at the process of getting an API Key and then retrieving the data we want.

JavaScript Problem: Switching Name Order Using Capturing Groups in Regular Expressions

In this JavaScript problem we look at switching the first name and last name for several names in an array. However, we take a unique approach by using capturing groups in regular expressions with the replace method of strings.

JavaScript Problem: Combining Arrays and Removing Duplicate Values

In this tutorial we will look at a simplified process for combining arrays and removing any duplicate values. We also discuss why this doesn't work as smoothly if objects are the values in the array.

JavaScript Problem: Selectively Copying an Object

I've done tutorials on copying JavaScript objects which are linked below, but in this tutorial we will look at how you would selectively copy certain properties from an object.

JavaScript Problem: Iterating over an Object and its Children

Iterating through the properties of an object is not super difficult using the for in loop. But what if that object has child objects. What do you do then? In this tutorial we will take a look at that problem.

JavaScript Problem: Iterating an Object Tree with Arrays

In this tutorial we are going to continue dealing with iterating through an object. This time we will add an array to the mix and look at how we can deal with that.

JavaScript Problem: Extracting Decimal Numbers from a String

Last year I did a tutorial on extracting numbers from a string. As some questions have been asked about it, I've realized the solution could be improved to handle decimal numbers, so lets tackle extracting numbers from a string again.

JavaScript Problem: Creating a Function to Check Two Arrays for Equality

We are going to deal with another JavaScript Problem. So the problem is to create a function that will compare two arrays and see if they have the same elements. This problem presents some interesting issues that we will look at.

JavaScript Problem: Creating a Function to Check Two Arrays for Equality Part 2

In the last tutorial, which I will link to, I left a challenge at the end. In this tutorial I want to go through some of the solutions that were presented. I think there are things that can be learned from each solution.

JavaScript Problem: Reverse a String

I did a JavaScript challenge a few tutorials back and it seemed to be a big hit, so I want to do another one. In this particular challenge we will look at what it takes to reverse a string.

JavaScript Tip: Converting an Object to an Array

When retrieving JSON data from a site, you may find the need to convert the resulting object to an array in order to process the data easier. In this tutorial we will take a look at that.

JavaScript Tip: Creating a Function that can Handle any Number of Arguments

I recently had a question about creating a function that will support any number of arguments. There are two common approaches to this type of function and we will look at both in this tutorial.

JavaScript Tip: 7 Ways to Iterate Over an Array

JavaScript is quite flexible in the sense that there are many ways to accomplish a particular task. In this tutorial we are going to highlight this feature by looking at 7 different ways to iterate over the values in an array.

JavaScript Tip: Conditional Shorthand

I know when I was first learning JavaScript I would sometimes run into a conditional statement that was written in shorthand or a concise format, and it didn't immediately understand how it worked. As I stuck with it, I began to understand it, but also discovered how many keystrokes I could save. In this tutorial we are going to look at some conditional shorthand in JavaScript.

JavaScript Tip: Avoiding Problems with Decimal Math

Though not an exciting topic, dealing with decimal math in javascript is an important topic. Because of the way JavaScript stores numbers, it may provide inaccurate results when doing math on decimals. In this tutorial I will show you to solutions.

JavaScript Tip: Accessing JSON Data

In previous tutorials I have talked about how to load JSON data or retrieve JSON data from a site. In this tutorial we will look at how to access that data once it is retrieved.

Converting a JavaScript String to an Array

Effective manipulation of strings is important in JavaScript. At times you may need to work with individual characters. The most effective way of doing this is by converting the string to an Array. In this tutorial we show how to convert a string to an array, reverse the array and then put the string back together.

JavaScript Tip: Using Data Attributes

Data attributes let you assign additional data to DOM elements. You can then retrieve and use that data. In this tutorial we look at how to create data attributes and how to retrieve that data using JavaScript.

JavaScript Tip: Using slice and splice

slice and splice are two Array methods that sound very similar but are very distinct. In this tutorial we will describe both methods and look at examples that show how they work.

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.

JavaScript Tip: Loading an External XML File

If you need access to XML data and it is stored in an external XML file, you will need to load it. In this tutorial we use the XML HttpRequest object to load an external XML file.

JavaScript Tip: Using the Comma Operator

The comma operator in JavaScript is a relatively unknown, seldom used operator, but it can be surprisingly helpful. In this tutorial we are going to take a look at what the comma operator does and also look at some valid use cases.

JavaScript Tip: Working with Data in Objects

Working with data in objects could be simpler. In this tutorials we introduce three static methods of Object that helps facilitate this. Object.values and Object.entries are new with ECMAScript 2017. Object.keys has been around for a while.

JavaScript Essentials: Using Strict Mode

If you are not currently using strict mode, you should start. In this tutorial we will look at the benefits of using strict mode in your code.

JavaScript Tip: Preventing Code Blocking

CPU intensive JavaScript code can cause code blocking; basically preventing other code from executing while the cpu intensive code finishes. In this tutorial we look at how to prevent that using setTimeout.

JavaScript Tip: Finding the Minimum or Maximum Value in an Array of Numbers

You can use the spread operator along with the Math object to find the minimum or maximum value in an array. In this tutorial we look at how to do that. We also look at doing this with apply if you can't use the spread operator.

JavaScript Tip: Concise Expressions Using Logical Operators

Understanding the nature of logical operators and the concept of truthy and falsey and help write concise expressions. We look at a few examples in this tutorial.

JavaScript Tip: Testing for NaN

Occasionally you need to test for the NaN value in JavaScript. In order to do so, you need to understand the correct methods. In this tutorial we cover isNaN, Number.isNaN and Object.is.

JavaScript Tip: Working with Sparse Arrays

In this tutorial we cover how to deal with sparse arrays, or values of undefined and null inside an array. These concepts can be helpful when working with arrays.

JavaScript Tip: Using fetch to Load a JSON File

In this tutorial we continue our discovery of the fetch API by looking at how it can be used to load a JSON file. We also look at creating a request object for use with fetch.

JavaScript Tip: Handling a Failed HTTP Request with fetch

In this tutorial we wrap up our discussion of fetch. We take a look at how to handle a failed HTTP request. By default it doesn't produce an error that promises can respond to, so we need to use a different technique.

JavaScript Tip: Deleting an Element from an Array

In this tutorial we look at how to properly delete an element in a JavaScript array using splice instead of the delete command.

JavaScript Tip: CSS Styling Using JavaScript

Though CSS styling using JavaScript may not be necessary in most projects, there are those small or simple applications where it may be needed. In this tutorial I review the skills necessary for CSS styling.

JavaScript Tip: Loading an XML File Using Fetch

Loading XML data using JavaScript is still a pretty common task. We will look at how to do this using the fetch API. We will then parse the data to a format that is then accessible.

JavaScript Tip: Requiring a Function Parameter

Since ES 2015 it has been possible to set a default value for function parameter in JavaScript. Well what if you wanted to produce an error if the parameter was missing. In this tutorial we will look at that tip.

JavaScript Tip: Combining Objects

At times you may need to combine multiple objects into a single object. The easiest way to do this is using the spread operator. In this tutorial we will look at how you can do that.

JavaScript Tip: Freezing the Prototype Object

If you make use of the prototype in your code, you may want to freeze that object so it can't be changed. In this tutorial we look at the reason why and how you would freeze it.

JavaScript Tip: Understanding and Using bind Part 1

I have had a few comments/questions of late asking about the bind method; how to use it and what it does. We are going to focus in this tutorial on part 1 of explaining bind which will have to do with the binding of this. The next tutorial will cover part 2 which will focus on partial application.

JavaScript Tip: Understanding and Using bind Part 2 - Partial Application

The bind method of functions unfortunately has two different purposes. In part 1, the previous tutorial we looked at the binding of this. I will link to that tutorial in the description so you can view it first. In this tutorial we will look at how you can do a partial application of the parameters for a function.

What is Node.js and How Does it Relate to JavaScript

In this first tutorial on Node.js we discuss what Node actually is and how it relates to JavaScript.

Running JavaScript in Node for the First Time

In the first tutorial on Node we introduced it. In this tutorial you will see how to write your first JavaScript code using Node.

Understanding and Using Modules in Node

In the third tutorial on Node we look at modules. We discuss what they are and create a simple module as an example.

Exporting Multiple JavaScript Functions from a Node Module

We are going to build on our last tutorial and look at how you can export more than one item from a node module. This is done using an object.

Running a Local Server Using Node

In this tutorial we are going to introduce NPM by using it to install a node package that allows us to run a local server for development testing. This is just one example of the many packages available for install with Node Package Manager (NPM).

Using the Node Event Emitter

The Event Emitter in Node.js lets you create custom events. In this tutorial we show you how to include and use the Event Emitter to help structure your JavaScript code.

Writing a JSON File to the Hard Drive

In order to use JavaScript to write a JSON file to the hard drive, you need to use Node.js. The fs module in Node provide file I/O functionality. We talk about the process in this tutorial.

Accepting User Input of Commands and Options

With node you may need to receive commands and options when code is invoked. In this tutorial we look at how you can do that using the Yargs module.

Using Package.json to Create an NPM Package

In this node.js tutorial we are going to look at the package.json file and how to create an NPM package. An NPM package is a great way to distribute a JavaScript Node module that you have put together and the package.json file facilitates this.