DEV Community

Cover image for Some common javascript mistakes
Ronny Medina
Ronny Medina

Posted on • Edited on

1

Some common javascript mistakes

Promise

This code seems "async" but it's not.

function myPromise() { return new Promise((resolve, reject) => { let i = 0; while (i < 1000000000) { i++; } resolve(); }) } console.log('start'); myPromise(); console.log('end');

What's going on here?. The answer is easy, the promise cannot be resolved until the while loop is ends.

To solve this we can do this.

function myPromise2() { return Promise.resolve().then(() => { let i = 0; while (i < 1000000000) { i++; } }); } console.log('start'); myPromise2(); console.log('end');

Now this is async because our code is inside Promise.resolve(). Try to run this now.

Reference copy

Sure you know (Spread Operator). This operator we used to do several operations like assigning properties or values, not copying object reference.

const arr1 = ['php', 'go', 'ruby']; // wrong const arr2 = arr1; arr2.push('java'); console.log('arr1', arr1); console.log('arr2', arr2);

Well we need use spread operator to fix this.

const arr1 = ['php', 'go', 'ruby']; const arr2 = [...arr1, 'java']; console.log('arr1', arr1); console.log('arr2', arr2);

Other example.

const arr1 = [ {id: 1, name: 'php'}, {id: 2, name: 'ruby'}, ]; const arr2 = [...arr1]; // but it doesn't copy the array reference but it does copy the object console.log('arr1', arr1); console.log('arr2', arr2); const [obj] = arr2; obj.id = 300000; obj.name = 'OHHH'; console.log('arr1', arr1); console.log('arr2', arr2);

We saw that spread operator doesn't work. Why?. Well spread operator works but only the first level, To solve this, we need to iterate each element of the array and apply the spread operator.

const arr1 = [ {id: 1, name: 'php'}, {id: 2, name: 'ruby'}, ]; const arr2 = arr1.map((obj) => ({...obj})); console.log('arr1', arr1); console.log('arr2', arr2); const [obj] = arr2; obj.id = 300000; obj.name = 'OHHH'; console.log('arr1', arr1); console.log('arr2', arr2);

We used the funcion map, this function returns a new array, so it doesn't copy the array reference and apply spread operator to each object inside of the array. But we imagine that it has a more complicated object.

const arr1 = [ { id: 1, name: 'php', moreProperties: { years: [2000,2001,2002], info: { title: 'Title', desc: 'Desc', }, }, }, { id: 2, name: 'ruby', moreProperties: { years: [2020], info: { title: 'Title 2', desc: 'Desc 2', }, }, }, ]; const notCopy = arr1.map((obj) => { const moreProperties = { years: [...obj.moreProperties.years], info: {...obj.moreProperties.info}, }; return {...obj, moreProperties }; }); console.log(notCopy)

The example above works, but there are several ways to do it. We can use lodash for example or use this code.

const arr1 = [ { id: 1, name: 'php', moreProperties: { years: [2000,2001,2002], info: { title: 'Title', desc: 'Desc', }, }, }, { id: 2, name: 'ruby', moreProperties: { years: [2020], info: { title: 'Title 2', desc: 'Desc 2', }, }, }, ]; console.log(JSON.parse(JSON.stringify(arr1)))

Comparation

A typical mistake, for example, is something that this.

const a = null; const b = []; const c = {}; const d = 1; const e = NaN; console.log('null and [] is: ' + (typeof a === typeof b).toString()); console.log('[] and {} is: ' + (typeof b === typeof c).toString()); console.log('1 and NaN is: ' + (typeof d === typeof e).toString());

Well I hope this can help you. If you are interested in knowing more you can see this repository https://github.com/denysdovhan/wtfjs

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay