Modern JavaScript beginners guide - Part 1
Tags: javascript, beginners
Published: 2019-07-02 06:58:56

You are starting coding JavaScript.. How do you know if you are writing good or bad JS? 

This is a mini-guide to get started with JavaScript.

Ok, let's begin with this cool guide full of tips & tricks. Grab some 

# Table Of Contents 📦
  * [Variables](#variables)
  * [Spot the mystical NaN](#spot-the-mystical-nan)
  * [How to type-check objects](#how-to-type-check-objects)
  * [Function default parameters](#function-default-parameters)
  * [Rest parameters](#rest-parameters)
  * [Callback functions](#callback-functions)
  * [The "this" keyword](#the-this-keyword)
  * [Shorthand properties](#shorthand-properties)
  * [Destructuring object properties](#destructuring-object-properties)
  * [Value existence check](#value-existence-check)
  * [Property existence check](#property-existence-check)
  * [Shallow copy objects](#shallow-copy-objects)
  * [Deep copy objects](#deep-copy-objects)
  * [Destructuring arrays](#destructuring-arrays)

## Variables <a name="variables"></a>

Use `let` to define variables that can potentially change, use `const` for variables that should not change. Nowadays you should never use `var`.

#### Understand let & const

Use `let` for variables that are supposed to change at some point in your app.

Use `const` for variables which should never change.

[Javascript variables](https://javascript.info/variables) ℹ️ 

#### Understand the old var

You should no longer use `var`. 🙅‍♂️

[The old "var"](https://javascript.info/var) ℹ️ 

## Spot the mystical NaN <a name="spot-the-mystical-nan"></a>

> NaN means *Not-A-Number*. 🤯

This the best way to check if a number is NaN or not.
{% stackblitz js-hpgwny view=editor file=index.js %}
- Line **(1)**: Tries to parse string `55px` as Number, but because it can't be parsed it returns `NaN`, so `result` is `NaN`.
- Line **(3)**: Checks if result is `NaN`, which is true.
- Line **(4)**: Checks if `'this is false baby!'` is `NaN`, which is false because it's a `String` not a `NaN`.
- Line **(5)**: Checks if `NaN` is a `NaN`, which is true because it's a `NaN`.

## How to type-check objects <a name="how-to-type-check-objects"></a>

This is the best way to check your object types. 
{% stackblitz js-cunxw2 view=editor file=index.js %}
## Function default parameters <a name="function-default-parameters"></a>

This is the best way to define default parameters for your functions.
{% stackblitz js-kuv4pu view=editor file=index.js %}
- Line **(1)**: By using `name = ` it allows you to define a default parameter for your function arguments.
- Line **(5)**: Overrides the default parameter.
- Line **(6)**: Use the default parameter.

## Rest parameters <a name="rest-parameters"></a>

> A function can be called with any number of arguments, no matter how it is defined.

[Rest parameters and spread operator](https://javascript.info/rest-parameters-spread-operator) ℹ️ 

Still not understanding? Yeah, I was there too. 🤷

Basically this allows you to send as many arguments you want, they will end up converted into an array. Let's see this in action ⚡
{% stackblitz js-qwaswa view=editor file=index.js %}
- Line **(1)**: By using `...prices` it allows you pass an arbitrary amount of attributes
- Line **(7)**: Call the function with `10, 50, 35, 42, 28` as argument.

But say you want extra parameters...
{% stackblitz js-9m7jic view=editor file=index.js %}
- Line **(1)**: By using `...prices` it allow pass an arbitrary amount of attributes
- Line **(6)**: Call the function with `'Jhon', 'jhon@example.com', 10, 50, 35, 42, 28` as argument.

**NOTE:** Extra parameters go first, the others go after (those are called "the rest" 😜).

## Callback functions <a name="callback-functions"></a>

Ok kids, this is important. So, you better pay attention 👨‍🏫

> A function passed as an argument to another function, usually to be called as a result of an event occurring.

[Introduction: callbacks](https://javascript.info/callbacks) ℹ️
{% stackblitz js-p514ib view=editor file=index.js %}
As you can see, we have defined a function that takes a name and a function as parameters.

`sayHello` logs "Hello, Jhon" AND then calls the function `sayGoodbye` which logs "Goodbye, Jhon". Notice that sayGoodbye expects the name argument.

## The "this" keyword <a name="the-this-keyword"></a>

Alright, this one is tricky. It's quite a big topic, so... I'm redirecting you to one of my posts: [The biggest JavaScript OOP gotcha](https://dev.to/victorhazbun/the-biggest-javascript-oop-gotcha-56ba) 😅

[Object methods, "this"](https://javascript.info/object-methods) ℹ️

## Shorthand properties <a name="shorthand-properties"></a>
{% stackblitz js-tbmy5l view=editor file=index.js %}
- Line **(7)**: Use the variable `name` to assign a `property` "name" with the value of the `name` variable. 
- Line **(8)**: Use the variable `beer` to assign a `key` called "gas" with the value of the `gas` variable. 

If you don't understand, have some beers and come back later 🍻

## Destructuring object properties <a name="destructuring-object-properties"></a>

Hopefully you are still sober 🥴

> Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and so on.

[Destructuring assignment](https://javascript.info/destructuring-assignment) ℹ️
{% stackblitz js-9nbgkv view=editor file=index.js %}
- Line **(10)**: Define an object, don't worry it will be used as a way to define our new variables which means this object is not assigned anywhere.
- Line **(11)**: Take the property `name` from `robot` and define a variable `name`.
- Line **(12)**: Take the property `stealing` from `robot`.`skills` and define a variable `stealing`.
- Line **(13)**: Take the rest of the `robot` properties and assign them to a variable `rest`.
- Line **(14)**: Use `robot` to define the variables.

## Value existence check <a name="value-existence-check"></a>

This is the best way to check if a value exists on a given object.
{% stackblitz js-l1m62a view=editor file=index.js %}
- Line **(6)**: Checks if there is a property on the computer object which value is equal to `127.0.0.1`

## Property existence check <a name="property-existence-check"></a>

There are couple ways to check the presence of a property on an object.
{% stackblitz js-m6zuos view=editor file=index.js %}
- Line **(5)**: Performs poorly when the object has too many keys.
- Line **(6)**: Performs well even if the object has too many keys.

## Shallow copy objects <a name="shallow-copy-objects"></a>

> A shallow copy will duplicate the top-level properties, but the nested object is shared between the original(source) and the copy(target).

Let's experiment:
{% stackblitz js-kemgrs view=editor file=index.js %}
- Line **(9)**: Make a shallow copy of the `robot` object.
- Line **(19)**: Update the `robotClone` speed to `800`.

🐞 WOOT 🐞 we have altered both robots `speed`, both `robotClone.skills` and `robot.skills` share the same reference to the object because of individual copies were not made, instead a reference to the object was copied. Any change made to any of the object's property applies to all references using the object.

**NOTE:** Don't shallow copy when your object has nested properties (Unless you really want to have this behaviour), instead use **Deep copy**.

## Deep copy objects <a name="deep-copy-objects"></a>

This is the best way to do deep copy.
{% stackblitz js-sqtpht view=editor file=index.js %}
By using **Deep copy** VS **Shallow copy** you can notice there are no side effects on the original object 🎉

## Destructuring arrays <a name="destructuring-arrays"></a>

This is very similar to **Destructuring objects** but because arrays do not have keys but instead positions then we need to access the positions we want to get back.
{% stackblitz js-z7dz7u view=editor file=index.js %}
- Line **(1)**: Defines a multi-dimentional array (You can also use a regular array as well, but I want to show you the power of this thing 💪).
- Line **(3)**: We define a variable `firstRobotName` which value will be `robots[0]`, that is `['Bender', 'Steal']`. Then define a variable `secondRobotState` (notice we skip the robot name but take its state `'Cool'`). Finally define a variable  `rest` to take the rest of the array.

## Keep learning 🤓

- [javascript.info](https://javascript.info)

## Final thoughts and next steps 🚀

We had experimented with modern concepts that you should understand as a beginner, some of these tips & tricks are today "best way" to accomplish what we traditionally did with JavaScript in the past.

I had a good time writing this post, and I wish you learnt a lot from it. For now, save this in your bookmarks so you have a quick reference to daily-basis JS tips.

I will love to hear about what other things you want to learn so I can include them in **Part 2** of **Modern JavaScript beginners guide** which is going to be full of really cool stuff. 👋