Dealing with Mutable Data

In JavaScript Objects are mutable, which simply means they can be changed. I think the first time I heard this statement I thought “Yeah, so big deal.”. Well, it can be a big deal if you don’t understand what that mutable nature means. It can cause unexpected issues.

In this tutorial that I recently published I talk about the issues you can run into and provide some examples. The examples shows how the mutable nature of objects can cause some unexpected consequences.

I then followed up this tutorial with a second tutorial that shows a possible solution. The solution is cloning objects. This is a technique commonly used in functional programming and is great to be aware of. I think the two tutorials together can be a great help.

What tutorials would you like to see?

Creating a Function that can Remember Data

I recently released a tutorial about creating functions that remember data. This can also be referred as “retaining state”. This is a great feature of JavaScript and it reflects what I feel is one of the strengths of JavaScript.

This technique uses closure, but it uses it in a way that my not be intuitive, even to those that understand closure well. The basic idea is that your invoke a function that returns a function, and that returned function has access to (remembers) any data that was passed to it or establish at the time the function was returned.

This can be a powerful feature. Take a few moments and watch the tutorial and then tell me what you think.

Storing Data in a Browser

At times you may come across the need to store some data in the browser so that when the user returns, you already have that data available. This can help solve a problem that might require the connecting and passing data to a server. But I have also found situations where even though I am passing data to a server it is helpful to store some data in the browser to ease the experience for the user.

I’ve recently published two tutorials on ways to store data in the browser. One uses localStorage and the other uses indexedDB.

LocalStorage is a pretty simple solution, but it does have some limitations such as the data can only be a string and there is a limit to how much data you can store. IndexedDB overcomes those limitations, but it is not quite as simple to use as localStorage.

Watch these two tutorial to dive deep into storing data in a browser.

Performing a Case-Insensitive Sort on an Array of Strings

I recently released a tutorial on the All Things JavaScript YouTube channel that dealt with higher order functions. Within the tutorial I used an example that dealt with forcing the sort method of Arrays to do a true alphabetic sort. By itself, sort does not do this.

Here is the problem with sort. Lets say I have an array of strings like this:

let things = [‘Building’, ‘Car’, ‘house’, ‘tree’, ‘bicycle’, ‘automobile’];

It will not sort correctly if I use:

things.sort();

The reason is that I have a mixture of upper and lowercase characters. The uppercase characters will sort first and we end up with this.

‘Building’, ‘Car’, ‘automobile’, ‘bicycle’, ‘house’, ‘tree’

The solution is pretty simple; we just need to sort with the correct case. However, executing on that solution is not quite as simple. There are a number of different ways to do this. In the tutorial I chose to take advantage of a little known feature of sort; you can pass in a function to the sort method that can be used to determine the sort order. That makes sort a higher order function, and that was the reason I was using it as an example in the tutorial.

The end result is kind of cool.

If you would like to understand higher order function better or you are interested in the sort solution, take a look at this tutorial.

Dealing with Special Characters

The back slash character has special meaning in JavaScript strings. It is an escape character that allows us to enter special characters that would be difficult to enter otherwise.

Now most of my life I have been slash deficient. When someone says forward slash or back slash, I don’t know which character it is. Some have tried to explain it by telling me to imagine a person leaning backwards or forwards. But that doesn’t help me at all because I don’t know which side has the face.

Anyway, I digress. This is a back slash (\). Now we are all on the same page. This character allows escape sequences in strings that can insert special characters. JavaScript has some default escape characters, but the real power begins when you use unicode or hexadecimal character codes. To specify a hexadecimal character enter \x and then the hex code. For unicode, enter \u and then the code.

I think the biggest trick with these charaters is knowing the code to enter to get a certain character. Here are a couple of websites that have unicode and hexadecimal codes for characters:

Once you have a list of codes, most people are good to go. But if you need a little more guidance, here is a recent tutorial on special characters in JavaScript.

What the Heck is Memoization?

OK, I admit it. I went through a phase when I first heard the word memoization where I ignored that it existed. After all, what could a technique with a name like that have to offer me?

Well, I finally threw away my pride, admitted it might be valuable and spent some time learning about it. Yes, it is a technique used in functional programming, but it is a technique that can be applied to any coding paradigm. And it can be quite valuable.

So to make my penance complete, I thought it appropriate to do a tutorial on memoization.

Now don’t let the term scare you off. It really is not a complex concept. The patterns for implementing it are a bit involved, but the concept itself is pretty easy to understand.

I just published the tutorial on memoization and you can access it below. Take a look and give me your thoughts.

JavaScript Problems…

I’ve started a new type of tutorial on the YouTube channel: JavaScript Problems.

Every so often I want to do a tutorial which is simply presenting a problem that needs to be solved in JavaScript and then going through the process of solving it. Usually, I will present more than one way to solve the problem because I think that is great way to learn JavaScript: look at different solutions.

In the first tutorials I created, I used some problems found in some of the many JavaScript books I have access to. However, I would also like to include problems you are thinking about. So this is a chance for you to shoot me over some problems. It may end up in the next JavaScript Problem I choose to record.

To submit ideas, you can add a comment to this post, you can send an email to shancock@allthingsjavascript.com or you can add a comment to one of the YouTube videos.

Advanced Topics Course if Finally Here

After six months, I have finally release the Advanced Topics course. The Advanced Topics course is a part of the Learn Modern JavaScript series which begins with the Getting Started course.

I love the nuances of JavaScript and therefore this new course has been exciting for me to produce. It provides a lot of opportunities to delve into those types of topics.

This brand new course has over 70 lectures, over 11 hours of video, 2 quizzes, 7 assignments, and 1 large project at the end. In this course I also felt the need to create several Think Like a Programmer sections. In these sections I address topics that come into play when you are working as a JavaScript professional. I feel these contain some valuable information.

If you are interested in taking this course, here is a link that will allow you to take the course hugely discounted on Udemy:

Take the Course

JavaScript Problems: I Need Your Help!

Today I launched a new section of tutorials on our YouTube channel. It is called JavaScript problems. The idea is that every so often the tutorial released during that week will be a JavaScript problem to which I will provide one or more solutions.

Here is the first tutorial in this section. It shows two techniques for computing a fibonacci sequence given two starting numbers and how long you want the sequence to be.

The idea isn’t so much to show how to solve a particular coding problem, but more what can be learned about JavaScript by solving the problem. For example, in this first tutorial we use a while loop and also recursion.

So here is where the help comes in. There are numerous problems on the Internet that I can use for these tutorials, but I would rather use real world problems. If you have a problem you have seen in the past or one you are working on, provide it in the comments. It might be the perfect example to use in one of the upcoming JavaScript Problem tutorials.

Functional JavaScript

Functional programming in JavaScript has been a topic of considerable discussion for some time now. Several books have been published about functional programming in JavaScript and there are developers that use this approach almost exclusively.

Whether or not JavaScript is a functional programming language is beside the point now because so many people are using it for such.

I don’t know enough about functional programming to teach the ins and outs of that particular approach. However, what I do know is that functional programming has some very valuable concepts that you can draw on to improve your code. I’m advocating a pragmatic approach to functional programming in JavaScript. In other words, use elements of functional programming that you find valuable.

So this begs the question, how to get started? Well, as mentioned there are several books published about the subject, and I will be reviewing some of those in the future. But I think a great first step is to really understand some of the methods of the Array object. These methods were designed around functional programming concepts. For example, map, forEach, every and reduce are a few that are valuable to understand. And it just so happens we have a tutorial on some of those methods.

What are your thoughts on functional programming in JavaScript?

You can find the tutorial here: