More JavaScript Mistakes You May be Making
Tags: javascript, tutorial, webdev, beginners
Published: 2020-01-14 03:45:41

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

JavaScript is a language that’s friendlier than many other programming languages in the world. However, it’s still very easy to make mistakes when writing JavaScript code through misunderstanding or overlooking stuff that we already know. By avoiding some of the mistakes below, we can make our lives easier by preventing bugs and typos in our code that bog us down with unexpected results.

* * *

Confusing Undefined and Null
============================

JavaScript has both `undefined` and `null` for non-values. However, there are quite a few differences between the two. `undefined` means that the variable may have been declared, but nothing is set to it. A variable can also be explicitly set as `undefined`. The type of an `undefined` variable, when checking the type with the `typeof` operator, will get us the type `'undefined'`. Functions that don’t return anything returns `undefined`. On the other hand, `null` values have to be explicitly set by functions that return `null` or just set directly to a variable. When we check an object that has the `null` value set, we’ll find that the type of it is`'object'` if a variable has the `null` value.

For this reason, it’s probably easier to stick to `undefined` whenever we can when we’re setting variable values to non-values. It reduces confusion and we only have to check that the type of a variable is `'undefined'` to see whether it’s `undefined`. That’s less painful than having two checks, for both `null` and `undefined`.

To write functions that return `undefined`, we don’t have to do anything like the following example:

```javascript
const f = () => {}
```

To set a variable that was assigned some other value to `undefined`, we can write:

```javascript
x = undefined;
```

To check if a property value is `undefine`, we can write:

```javascript
typeof obj.prop === 'undefined'
```

or

```javascript
obj.prop === undefined
```

To check if a variable is `undefined`, we can write the following code:

```javascript
typeof x === 'undefined'
```

A declared variable that hasn’t been assigned anything automatically has the value `undefined`.

If we have to check for `null`, then we can write:

```javascript
obj.prop === null
```

or

```
x === null
```

for variables. We can’t use the `typeof` operator for checking `null` because the data type of `null` is `'object'`.

<img class="do t u hm ak" src="https://miro.medium.com/max/10084/0\*79d0pk1RCiMWq6dC" width="5042" height="3151" role="presentation"/>

Photo by [Mikhail Vasilyev](https://unsplash.com/@miklevasilyev?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

* * *

Confusing Addition and Concatenation
====================================

In JavaScript, the `+` operator is used for both adding two numbers and concatenating strings together. Because JavaScript is a dynamic language, the operands are all automatically converted to the same type before the operation is applied. For example, if we have:

```javascript
let x = 1 + 1;
```

then we get two because they’re both numbers. The `+` operation was used for addition like we expected. However, if we have the following expression:

```javascript
let x = 1 + '1';
```

then we get `'11'` because the first operand was coerced into a string before the `+` operation is applied. The `+` operation was used for concatenation instead of addition. When we use the `+` operator on multiple variables, this makes knowing the type even harder. For example, if we have:

```javascript
let x = 1;  
let y = 2;  
let z = x + y;
```

as we expect, we get three because `x` and `y` are both numbers. On the other hand, if we have:

```javascript
let x = 1;  
let y = '2';  
let z = x + y;
```

then we get `'12'` because `y` is a string, so the `+` operator was used for concatenation instead. To solve this issue, we should convert all the operands to numbers first before using them with the `+` operator. For example, we should rewrite the above example into the following:

```javascript
let x = 1;  
let y = '2';  
let z = Number(x) + Number(y);
```

The code above will get us 3 as the value of `z` since we converted them both to numbers with the `Number` factory function first. The `Number` function takes in any object and returns a number if it can be parsed into a number, or `NaN` otherwise. An alternative way to do this is to use the `new Number(...).valueOf()` function, as we do in the following code:

```javascript
let x = 1;  
let y = '2';  
let z = new Number(x).valueOf() + new Number(y).valueOf();
```

Since `new Number(...)` is a constructor that creates an `object` type, we want to use the `valueOf` function to convert it back to a primitive type to make sure that what we get is a number type. A shorter way to do this is to write:

```javascript
let x = 1;  
let y = '2';  
let z = +x + +y;
```

The `+` sign in front of a single operand will try to convert the single operand into a number or to`NaN` if it can’t be converted into a number. It does the same thing as the `Number` function. We can also convert a variable to a particular type of number. The `Number` object has a `parseInt` function to convert a string or object into an integer and a `parseFloat` function to convert a string or object into a floating-point number. `parseInt` takes the object you want to convert to a number as the first argument. It also takes a radix as an optional second argument, which is the base of the mathematical numeral systems. If the string starts with `0x`, then the radix will be set to 16. If the string starts with anything else, then the radix will be set to 10.

We can use them as in the following examples:

```javascript
let x = 1;  
let y = '2';  
let z = Number.parseInt(x) + Number.parseInt(y)
```

Also, we can use the `parseFloat` function as in the following code:

```javascript
let x = 1;  
let y = '2';  
let z = Number.parseFloat(x) + Number.parseFloat(y)
```

We will get 3 in both of the examples above.

* * *

Breaking Return Statements Into Multiple Lines
==============================================

JavaScript closes a statement at the end, so one line code is considered distinct from the other. For example, if we have:

```javascript
const add = (a, b) => {  
  return  
  a + b;  
}
```

we get `undefined` if we run `console.log(add(1, 2));` since we ran the `return` statement, which ended the function execution, before `a + b` is run. Therefore, `a + b` will never be run in this function. To fix this, we either have to put the `return` statement all in one line or use parentheses to surround what we want to return. For example, we can write:

```javascript
const add = (a, b) => {  
  return a + b;  
}
```

This will log 3 if we run `console.log(add(1, 2));` since we are actually returning the computed result in the function. We can also write:

```javascript
const add = (a, b) => {  
  return (  
    a + b  
  );  
}
```

This is handy for returning expressions that might be longer than one line. This will also log 3 if we run `console.log(add(1, 2));`. For arrow functions, we can also write:

```javascript
const add = (a, b) => a + b
```

for single-line functions since the `return` statement is implicit for single-line arrow functions. We can also write:

```javascript
const add = (a, b) => (a + b)
```

to get the same thing. This also works for single-line arrow functions.

In JavaScript, if a statement is incomplete, like the first line of:

```javascript
const power = (a) => {  
  const  
    power = 10;  
  return a ** 10;  
}
```

inside the function then the JavaScript interpreter will run the first line together with the second line to get the full statement. So:

```javascript
const  
  power = 10;
```

is the same as:

```
const power = 10;
```

However, for complete statements like `return` statements, the JavaScript interpreter will treat them as separate lines. So:

```javascript
return   
  a ** 10;
```

is not the same as:

```javascript
return a ** 10;
```

* * *

Even though JavaScript is a friendly language, it’s still very easy to make mistakes when writing JavaScript code. It’s easy to confuse `undefined` and `null` when we aren’t familiar with JavaScript. Because of the dynamic typing nature of JavaScript, operators like the `+` operator that can do multiple things can easily be converted to a type we don’t expect and produce the wrong result. Also, if statements can be complete on their own, then they shouldn’t be written in their own lines if we want both lines to be together.