Most common mistakes new JavaScript developers make

Javascript is one of the most used programming languages in the world. Being the most in-demand language, there are thousands of people learning JS every year.

While easy to learn, there are few mistakes most newbies make.

1. Not learning DOM APIs #

Vannial JavaScript is rarely used these days. This is the era of frameworks, where most people jump ship to learn React or VueJs, and skipp learning DOM APIs.

Frameworks may not be the best choice always. In smaller applications vanilla Javascript or web components will be much better because of smaller bundle size.

2. Not understanding the async nature #

JavaScript is async by nature, unlike most other programming languages. So statements written in sequence may not execute in the same sequence.

JavaScript is single-threaded, if JS head been synchronous browser would not have been responsive until the whole webpage loads. So JavaScript runtime uses Event loop to keep track of tasks which are to be done later.

For example in example below

setTimeout(() => {
    console.log(1);
}, 0);
console.log(2);

/* Output
2
1
*/

line 4 is executed before line 2. The reason for that setTimeout is executed on the stack but it put the callback function in Event Queue.

Learn more about event loop

3. Not understanding Promises #

Promises were introduced in ES2015 and are crucial part of the language now. Promises make working with async code much easier. Promises solved problem of callback hell by making code more readable.

Some newbies still make mistakes when executing two promises synchonorously, by nesting promises. Nesting makes code unreadable and a single .catch block won't handle nested promised errors.

// Wrong
axios
    .get("https://www.metaweather.com/api/location/search/?query=london")
    .then((location) => {
        axios
            .get(`https://www.metaweather.com/api/location/${res[0]["woeid"]}/`)
            .then((weatherData) => {
                console.log(weatherData);
            });
    }).catch(error => {
      console.error(error)
    });
// Right
axios.get("https://www.metaweather.com/api/location/search/?query=london")
    .then((location) => {
        return axios.get(`https://www.metaweather.com/api/location/${location[0]['woeid']}/`)
    }).then((weatherData) => {
        console.log(weatherData)
    })

4. Overusing for loop #

for loop is very useful to iterate over iterable. But by a first look, what a for loops does is not obvious, which makes for loops unreadable.

There are multiple Array methods like Array.map Array.filter Array.reduce available in JavaScript which can be used instead.

const numbers = [1,2,3,4,5]

// Array.map process all items and return new array of same length
numbers.map((number) => { //muptiplies all numbers by 3 [3,6,9,12,15]
  return number *3;
})

// Array.filter return subset of number which match a certail criterial
numbers.filter((number) => { // return array of even items
  return number % 2 == 0;
})

// Array.reduce return a single item by processing all items in array
numbers.reduce((acc, curr) => { // return sum of numbers
  return acc + curr;
}, 0)
posts javascript typescript beginner mistakes

Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated ! For feedback, please ping me on Twitter.

Published