Victor Hazbun

Posted on Jul 2, 2019 • Edited on Feb 16, 2020

Modern JavaScript beginners guide - Part 1

#javascript #beginners

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
Spot the mystical NaN
How to type-check objects
Function default parameters
Rest parameters
Callback functions
The "this" keyword
Shorthand properties
Destructuring object properties
Value existence check
Property existence check
Shallow copy objects
Deep copy objects
Destructuring arrays

Variables

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 ℹ️

Understand the old var

You should no longer use var. 🙅‍♂️

The old "var" ℹ️

Spot the mystical NaN

NaN means Not-A-Number. 🤯

This the best way to check if a number is NaN or not.

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

This is the best way to check your object types.

Function default parameters

This is the best way to define default parameters for your functions.

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 function can be called with any number of arguments, no matter how it is defined.

Rest parameters and 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 ⚡

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...

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

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 ℹ️

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

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 😅

Object methods, "this" ℹ️

Shorthand properties

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

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 ℹ️

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

This is the best way to check if a value exists on a given object.

Line (6): Checks if there is a property on the computer object which value is equal to 127.0.0.1

Property existence check

There are couple ways to check the presence of a property on an object.

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 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:

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

This is the best way to do deep copy.

By using Deep copy VS Shallow copy you can notice there are no side effects on the original object 🎉

Destructuring arrays

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.

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

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. 👋