Despite its best intentions, JavaScript is not the most beginner friendly language. After working with thousands of beginners, here are a few common mistakes we see with applicants and students.

A little while back, we wrote a post on the top four javascript mistakes beginners make. In this post, we’ll be adding a few more we’ve seen to help you better prepare when learning the basics!

1. Dot vs Bracket notation

Let’s imagine we have the following object,

var instructorData = {
  firstName: "Elie",
  employer: "Rithm School",
  favoriteNumber: 42,
  isHilarious: false
};

When accessing a key in an object, there are two possible ways to go about it.

• dot notation
• bracket notation

Knowing when to use which one is essential, so here is a good rule of thumb to follow.If you know with 100% certainty what the key is – always use dot. If you are not 100% sure what the key will be, you must use bracket.

When do you find yourself using bracket?

• When looping over keys in an object. You don’t always know all the names of the keys
• When you need JS to figure out the name of the key on the fly. This could be in a function or if you have an expression you need to evaluate.

What happens in the bracket?

JavaScript evaluates whatever you put in and converts it to a string!

var instructorData = {
  firstName: "Elie"
};

var greeting = "hello";

instructorData[greeting] = "A nice message!";

instructorData[10 + 10] = "A nice number!";

If we take a look at instructorData right now, here is what we see:

var instructorData = {
  20: "A nice number!",
  firstName: "Elie",
  hello: "A nice message!"
};

2. Ignoring helper functions

Very commonly we see students try to write too much code in a single function. When writing functions, think about how much logic you really need and what things you can abstract to other functions. Let’s imagine we have a function called vowelCount which accepts a string and returns an object with the counts of each vowel.

Our logic might go as follows:

• Make an empty object
• Make a string of vowels
• Loop through the string passed to the function
• See if the character we are at is a vowel
• If it is, check if that key is in the object, if so, add one to the value
• Otherwise make a new key with that vowel and a value of 1
• Return the object

Whew, that’s a lot of logic – what can we break up here? Instead of seeing if each character is a vowel, let’s put that logic in another function.

function isVowel(char){
    const vowels = "aeiouAEIOU";
    return vowels.includes(char);
}

Now we can use that in our vowelCount function!

function vowelCount(str) {
  let vowelCounts = {};
  for (let char of str) {
    if (isVowel(char)) {
      if (char in vowelCounts) {
        vowelCounts[char]++;
      } else {
        vowelCounts[char] = 1;
      }
    }
  }
  return vowelCounts;
}

Don’t forget, JavaScript has quite a few built in string and array methods, so be sure to brush up on those as you keep learning. It’s very common to find yourself writing a helper function without realizing there’s a built in function that does what you need already!

3. Equality checks for objects

When you start learning how to compare values in JavaScript, you might dig through some differences between == and ===. When learning JavaScript, we recommend you just stick with === because it’s a more strict comparison of value and type.

However, when you start trying to compare objects (this includes functions and arrays), you can’t just use ===. In fact:

[] === [] // false
[1,2] === [1,2] // false
{} === {} // false

So why is that? The answer actually has to do with memory. The only time that == or === works is if the location in memory is the same for the two values. Each time that a new array or object is created, a new location in memory is placed for that object (this is unlike primitive values like strings, numbers and booleans)

The only time that == and === will work is if the two objects are the same location in memory. Here’s what that might look like:

let nums = [1,2,3]
let similarNums = nums

nums === [1,2,3] // false
nums === similarNums // true

If you need to compare two arrays or objects, you can write your own helper function, but that can get complex quickly if you have arrays in arrays or objects in objects and so on. If you need this kind of comparison, there are wonderful utility libraries like lodash that can help.

Be sure to read these over if you’re getting started and do your best to avoid these mistakes – good luck!