Free JavaScript Tutorials

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
More Advanced Tutorials
Latest JavaScript Features
JavaScript Questions
General JavaScript Topics
JavaScript Problems
JavaScript Tips
Node.js Tutorials

Getting Started Tutorials

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.

JavaScript Fundamentals: Primitives Versus Primitive Objects
In this tutorial I'm going to cover JavaScript primitives and their object equivalent. This is a concept not fully understood even by those that have been in JavaScript for a while.

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.

JavaScript Fundamentals: Addressing Deeply Embedded Objects and Arrays
In today's tutorial we are dealing with a JavaScript fundamental, but it is a fundamental that I receive as a question quite frequently. Many are unsure how to address deeply embedded arrays an objects. For example, when there is an array of objects that then has an array with additional objects. How would you address a property on one of those embedded objects. We are going to take a look at that today.

JavaScript Fundamentals: The Whys and Hows of BigInt
JavaScript has some issues with very large numbers. The creation of the BigInt type has helped with that. In this tutorial we are going to take a look at the problem and then how to use BigInt to overcome that.

JavaScript Fundamentals: Digging into the Arguments Object
I realized recently through an interaction with a student that there may be an incomplete understanding of the arguments object associated with functions. So we are diving into that today. We will use an example of a function that must deal with an unknown number of inputs.

JavaScript Fundamentals: Merging Objects Using Object.assign()
In this tutorial I want to take a look at the Object.assign static method. Traditionally I have used this for shallow cloning of objects, but it has some other uses that we will take a look at as well.

Latest JavaScript Features

Class Private Fields and Methods
In todays tutorial we are going to tackle one of the new features of JavaScript that has to do with classes. ECMAScript 2022 has provided class field declarations and private methods and fields, which makes creating private data much easier.

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

Optional Chaining
We are going to take a look at a new feature in this tutorial. Optional chaining was added as a part of the ES2020 specification and we will look at how to use and when to use it.

JavaScript Questions

JavaScript Question: What is the Double Bang?
In this tutorial we are talking about a JavaScript question that deals with the double bang operator. This really involves the logical not operator. But we are going to look at how using two together is a shortcut in JavaScript; a shortcut that gets called the double bang.

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

JavaScript Question: An Event Loop Problem
In this tutorial we are going to look at a JavaScript problem that requires a knowledge of the event loop and how it interacts with the queue and the call stack in order to get right.

JavaScript Question: What is a Decorator Function?
If you have been around coding for a bit, you may have heard of decorator functions. Well what are they and how do we use them? We are going to answer those quesions in todays topic.

Which Should You Use? concat VS push VS spread
There are three different methods we use when we are adding items to an array or combining arrays. In this tutorial we are going to look at the differences and why you may want to use one over other. It is push VS concat VS spread.

General JavaScript Topics

The State of JavaScript Survey
This week I won't be doing a traditional tutorial, but it is still important to JavaScript. I want to encourage you to participate in the state of javascript survey. This will be the fifth year of the survey and it provides super valuable information. This is one way you can give back to the JavaScript community and in return receive some very valuable information.

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.

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.

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.

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.

My Thoughts on the 2020 State of JavaScript Survey
Recently the state of JavaScript survey came out and I want to give some thoughts about the survey, some things that are of interest to me.

JavaScript Problems

Inserting Data at Every nth Element in an Array
I want to tackle a problem with arrays in this tutorial that may not be used frequently, but comes with some interesting solutions. We are going to look at how we can insert a data piece into an array at every so many elements.

Counting Duplicate Elements in an Array
In todays tutorial we are going to tackle a JavaScript problem. We are going to look at a couple of different ways you can count how many times each value appears in an array.

JavaScript Problem: Dynamic Data in Regular Expressions
In todays tutorial we are going to deal with a JavaScript problem that was presented by one of our Patreon viewers. We are going to look at how we can add dynamic data to a regular expression. Not a simple solution unless you know the trick.

JavaScript Problem: Combining and Sorting Objects in an Array
In todays tutorial we are going to deal with a JavaScript problem that was presented by one of our viewers. The solution to this problem will require a unique use of the reduce method and a custom function passed into the sort method.

JavaScript Problem: Removing Every nth Element of an Array
A question on the YouTube channel recently prompted this tutorial on this JavaScript problem. We are going to look at how we can remove every second or third item from an array.

JavaScript Problem: Removing Duplicate Objects from an Array
In todays JavaScript tutorial we are going to tackle another JavaScript problem. We are going to look at how you can take an array of objects and remove those that are duplicates.

JavaScript Problem: Determining the Earliest and Latest Date
The last few tutorials I seem to be on a Date object kick. In this tutorial we are going to look at how you can take an array of dates and pick the earliest or latest.

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: 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 Problem: Identifying Repeating Entries in an Array
In this tutorial we are going to look at a JavaScript problem. How can we take an array and determine the index location in the array of each element. Now at first this might sound simple. But we are assuming that some elements are in the array more than once. So we want to get the index of each time it exists in the array.

JavaScript Problem: Comparing Two Arrays without Loops
We are going to tackle another JavaScript problem in this tutorial. The specific problem is how one can compare two arrays without using any loops.

JavaScript Problem: Using a Double Sort on an Array of Objects
In this tutorial we are going to tackle another JavaScript problem. And in this problem I want to use the sort method of arrays. So we are going to look at how we can sort objects in an array, but we will be using a primary sort and a secondary sort.

JavaScript Problem: Randomly Extracting Values from an Array
In one of the comments recently there was a question about randomly extracting values from an array. As I looked through my tutorials, I discovered I haven't done a tutorial on random numbers. But to make it more than that, I want to do a tutorial on a generator function, randomly retrieving values from an array until they are all gone.

JavaScript Problem: Find All Occurrences of a Character in a String
In today's tutorial we are going to deal with a JavaScript problem that has to do with analyzing a string. We will create a function that will accept a string and a character and then return an array that contains the index of all occurrences for that character.

Reversing a String with Special Characters
Several months ago I did a tutorial on reversing a string. I will link to that in the description. But that tutorial brought up several questions about additional applications. We are going to look at one of those in this tutorial.

JavaScript Tips

Locating an Object in an Array
When working with an Array of objects, you may need to find a specific object in the array, to work with it or to remove it from an array. In this tutorial we are going to look at that process.

Loading a Local JSON File without Fetch
Loading a local JSON file is frequently done with fetch. But that is not the only way to accomplish this. In this tutorial we are going to look at a method for loading a local JSON file without using fetch.

Updating Shuffle Array with Destructuring
I had a question about one of my tutorials that I did a few years back on shuffling an array. As I was looking at the code, I could see it could be improved with destructuring. In this tutorial I show that improvement because it really is a nice application of destructuring.

JavaScript Tip: Retrieving a Property from an Array of Objects
At times you may receive an array of objects when retrieving data from a site. Yet you may only need one property from each object. Let's look at how we can take that array of objects and retrieve a single property into another array.

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

JavaScript Tip: Working with Site APIs
I had a request to cover the reading of a site API for accessing the sites data, so I'm going to spend a bit of time in this tutorial talking about that since it is an important part of many things we do in JavaScript. Especially when we are working with third party site data.

JavaScript Tip: Using Promise.all with an async Function
At times you may be working with several asynchronous processes and you need the results to all of them. Usually this requires the use of Promise.all. For a while when I needed to use Promise.all, I would always uses promises. But you can also use an async function with Promise.all. we are going to look at that in this tutorial.

JavaScript Tip: Swapping Values Using Destructuring
I came upon a really cool use of destructuring that I had not considered before. Destructuring makes it pretty simple to swap values between variables. We are going to look at it in this tutorial.

JavaScript Tip: The Magic of Filter
Application of the filter method of arrays may not always be straightforward. In this tutorial we look at an application of filter that removes duplicate values from an array and examine the use of filter.

JavaScript Tip: Iterating Through Regular Expression Matches
Many developers know how to use regular expressions in JavaScript, but few know the ins and outs of the exec method, a method of the regular expression object. It has some nice features one of which is making it possible to iterate over matches.

Node.js Tutorials

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.

Tutorials on YouTube

Getting Started Tutorials

More Advanced Tutorials

Latest JavaScript Features

JavaScript Questions

General JavaScript Topics

JavaScript Problems

JavaScript Tips

Node.js Tutorials

All Things JavaScript's YouTube Channel

All Things JavaScript Courses

Tutorial Requests