5 Common mistakes that every new JavaScript programmer does
Not all the points below are actually mistakes but avoiding them will make you a better programmer for sure.
1. Truthy And Falsy Values
This is one of the common mistakes that every programmer would have done at least once in their coding careers. Lets look at the code below.
let foo = 0;
let boo = 0;if (foo === 0) {
boo = 1;
} else {
boo = 2;
}
The above code looks correct, right ? And it is, but there is something more we can do with it. Now look at the code.
let foo = 0;
let boo = 0;if (!foo) {
boo = 1;
} else {
boo = 2;
}
Does this look any better ? So for the fact, we don’t need to explicitly check for 0 here as its a falsy value. We can simply check, if not foo then go inside the condition.
Take a look below for the truthy and falsy values in javascript.
// falsy values in JavaScriptundefined --> "undefined" is true since its a string
null --> "null" same as "undefined"
0 --> "0" same as "undefined"
false --> "false" same as "undefined"
NaN --> "NaN" same as "undefined"
'' or "" --> Empty String// truthy values in JavaScript"String" --> Any string
[] --> Empty Array
{} --> Empty Object
function() {} --> Empty Function
2. Ternary Operator
Every programmer has used if condition at least once in their lifetime but at places where there is not much logic inside the condition we can simply replace it with ternary operators. Why? To save a few lines ;) and for better readability. Lets take the same example from above and implement it using ternary operator.
let foo = 0;
let boo = 0;!foo ? boo = 1 : boo = 2;// to make it even betterboo = !foo ? 1 : 2;
So here in the above code instead of 5 lines of code we have simply implemented the same logic in a single line. Lets take a look at another piece of code.
if (whatever condition) {
----------------
some logic here
---------------- return foo ? true : false;
}
There is nothing wrong in the above code but you could simply avoid the ternary operator here. how? look at the code below.
if (whatever condition) {
----------------
some logic here
----------------return foo; // if you are sure foo is boolean
return !!foo; // if foo can be anything other than boolean}
So from above we can see that we don’t always need ternary operators and try not to ever use nested ternary operators.
3. Equality Check
lets look at the code directly to understand it better.
if (false == 0) {
return true;
} else {
return false;
}if (false === 0) {
return true;
} else {
return false;
}
Both should return true ?? Sorry to disappoint you but first if condition will return true and second will return false. **Thinking what kind of sorcery is that**. The difference in both is just a ‘=’, which makes a huge difference. “==” checks for equality with coercion and “===” checks for equality without coercion.
4. Addition and Concatenation
Addition and concatenation will depend on the data types as we don’t explicitly define variables with datatypes in javascript.
var a = 10;
var b = '20';
var c = 30;return a + b; // returns 1020
return b + c; // returns 2030
return a + c; // returns 40
So we can see in the above example, if we try to add a string and integer it will return a concatenated string but in case of two integers it returns sum of both.
5. Using variable as key in object
There can be certain cases where we are required to use variables as key. lets take an example.
const a = 1;
let b = '';if(a) {
b = 'first Name';
} else {
b = 'Last Name';
}
const myObject = {
b : 'Emily'
};return myObject;
Here in the above code we wanted to return object as { ‘first Name’ : ‘Emily’ } but what it returns is { b: ‘Emily’ } since b is used as key. So to solve the above problem we use square brackets [].
if(a) {
b = 'first Name';
} else {
b = 'Last Name';
}
const myObject = {
[b] : 'Emily'
};return myObject;
Now it returns what we wanted it to return { ‘first Name’ : ‘Emily’ }.
I hope you learnt something new from the article. If there’s anything I have missed or you find something wrong / contradictory, do let me know in comments ☺
