My [updated] notes on Concepts of Modern JavaScript
Tags: javascript
Published: 2021-03-25 00:40:56

Hello and welcome! How are you doing?

Today I am writing about some concepts of modern JavaScript that are very useful, and often recommended to learn before going into React. 

*Note that post is about me trying to explain these concepts to myself! I want to make sure I understand them and have these notes when I needed, so I decided to share it here as well. Also, I first posted it on my personal blog over a year ago, so here you will find an updated version.*

There is much more to these concepts, but my notes will are basic explanations, great if you need to review them.

**The concepts are:**

- Arrow functions,
- Template literals,
- Var, Let and Const,
- Ternary (conditional) operator,
- Shorthand object assignment and
- Spread operator.

#
### Arrow Functions:
When you use a normal function, the keyword **this** is set to that function's scope. In an arrow function **this** is set to the parent scope.
Also, Arrow Functions are functions wrote in a shorter form.
They have this name because they use an arrow sign **=>** instead of the word function.

``` javascript
//regular function
function hello() {
  console.log('Hello');
}

//arrow function
const hello = () => {console.log('Hello')}
```
 
#

### Template Literals:
I have been using those for a while and had no idea what they were named. It is a "new" way of creating a string. I am not quite sure how to explain it, so I will show:

``` javascript
const name = 'Ana';
const age = 32;
//regular string
console.log(name + " is " + age + " years "+ "old");

//template literal
console.log(`${name} is ${age} years old`);

```
The result is the same, but writing as template literal makes things easier. We don't have to worry about spaces and the code looks neat.

#

### **Var, Let and Const:**
Always use **const** unless you are certain you will need to reassign a value, them **use** let.

In short, var is dead x.x
 
#

### **Ternary (or conditional) Operators:**
Those are pretty cool, as most of the other concepts here. It is the only operator that uses 3 operands and it is often used to replace if/them. Here is how:
``` javascript
//Using if
const todayIsFriday = false;
if(todayIsFriday){
  console.log('It is Fri-yay')
} else{
  console.log('Not quite there yet')
}

// using Ternary Operator
cont todayIsMonday = true;
console.log(todayIsMonday ? 'Yey, another week' : 'Yey, it is not Monday')

```
#

### Shorthand Object Assignment:
If you want to define an object whose keys have the same name as the variables passed as properties, you can use the shorthand and simply pass the key name:

``` javascript
//regular
const abc = {
  a:a,
  b:b,
  c:c,
};

//shorthand
const efg = { e, f, g};

```
#

### Spread Operator:
Last but not least, the Spread operator... Another one that is a bit tricky to explain. Basically, it takes an array or object and expands it. The Spread Operator syntax looks like this:

``` javascript
const obj1 = {a: 'a', b: 'b'};
const obj2 = {...obj1, c: 'c'};
console.log(obj2);

//The console will log: Object {  a: "a",  b: "b",  c: "c"}

```
#

### Final Notes:
I hope my notes can help someone learning JavaScript. 
Also, you can find [those pieces of code on my Codepen](https://codepen.io/collection/DLMWOM/) if you would like to try practicing yourself!

**Want to learn to code with me?**

[Join me on my Live Coding Streams on Twitch!](https://bit.ly/3chse4t)

Xoxo,

[Pachi C.](https://pachicodes.com)
![Screenshot os Pachi streaming live code on Twitch](https://www.therelicans.com/remoteimages/uploads/articles/1dosi3opqvn5jzbsslqf.png)