When you first start learning JavaScript, it’s very easy to get overwhelmed by all of the concepts and terms thrown at you! In this post, we’ll be going over four common mistakes that beginners make when learning JavaScript.

1. Using the ‘return’ keyword too soon

Something we see many students doing quite frequently when getting started, is returning from a function too early. When you first learn about functions, you’ll learn that the return keyword is used to provide output from a function. However, when a function encounters the return keyword, that function will end. See if you can spot what’s wrong with this function:

function sumOddValues(arr) {
  var total = 0;
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 !== 0) {
      total += arr[i];
    }
    return total;
  }
}

When we run the function sumOddValues([1,2,3,4]), we get back 1, but that’s not what we want. Why is that? Since the return is inside of the for loop, we just return after the first value that we iterate over. Let’s fix that here:

function sumOddValues(arr) {
  var total = 0;
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 !== 0) {
      total += arr[i];
    }
  }
  return total;
}

When we run the function sumOddValues([1,2,3,4]) we now get 4 (1 + 3), much better! Let’s look at another example. Imagine we’d like to write a function called findOddValues which returns true if there is a single odd value in the array, otherwise it returns false.

function findOddValues(arr) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 !== 0) {
      return true;
    } else {
      return false;
    }
  }
}

See if you can spot what’s wrong with this function! Notice here we’re simply returning false the second that we don’t find an odd value, which means we’re returning too early!

function findOddValues(arr) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 !== 0) {
      return true;
    }
  }
  return false;
}

Be really careful when you’re using conditional logic or looping in a function. You might want to wait until a loop has finished before returning a value so be sure to put the return keyword outside of the loop.

2. Comparison versus assignment

This one is very common. You might find yourself trying to write an if statement with some code like this:

function compareNumbers(first, second) {
  if (first = second) {
    return "They are the same!";
  }
  return "They are not the same!";
}

So what’s wrong here? Instead of using a comparison operator (== or ===), we are using an assignment operator (=). When doing comparison be really really careful that you’re using a comparison operator! When you first start learning how to code, stick with triple equals so you can compare value and type.

3. Turning a string into an array to iterate over it (accessing values in strings)

Now let’s talk about a pretty common mistake beginners make when learning about looping. When you first learn about for loops, you’ll commonly see them being used on arrays, but remember that strings also have a length property and can be indexed and looped over! See how you can refactor the following code so that you don’t need to allocate additional memory to create a new array:

function countLetters(string, character) {
  var count = 0;
  var arr = string.split();
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] === character) {
      count++;
    }
  }
  return count;
}

What are we doing here that’s unnecessary? We don’t actually need to convert the string into an array! Let’s see how that code can be cleaned up:

function countLetters(string, character) {
  var count = 0;
  for (var i = 0; i < string.length; i++) {
    if (string[i] === character) {
      count++;
    }
  }
  return count;
}

Much better! Always be mindful when creating additional data structures and be sure to ask yourself – “Do I really need this?” Alright, one more topic!

4. Looping only from the beginning

When you first start learning about looping, it’s very common to just learn about for loops and how to iterate from the beginning of an array or string to the end, but when looping, you may find yourself wanting to loop from the end to the beginning. Imagine if we need to write a function to reverse a string, but we can’t use the reverse method or even convert the string into an array – how can we do it!

One option is to make a new string and start from the end of the string and add each character from the end to the beginning of the string. In order to start from the end, let’s start a for loop there!

function reverseString(str) {
  var newStr = "";
  for (var i = str.length; i > -1; i--) {
    newStr += str[i];
  }
  return newStr;
}

Not only can we loop from the beginning of a string, we can also start from the middle if we need to as well. When solving problems, remember that you can start and end your loops wherever you’d like!

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