DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for My [updated] notes on Concepts of Modern JavaScript
Pachi πŸͺ (she/her/ela)
Pachi πŸͺ (she/her/ela)

Posted on • Updated on • Originally published at therelicans.com

My [updated] notes on Concepts of Modern JavaScript

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.

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

//arrow function
const hello = () => {console.log('Hello')}
Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

//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')

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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"}

Enter fullscreen mode Exit fullscreen mode

Final Notes:

I hope my notes can help someone learning JavaScript.
Also, you can find those pieces of code on my Codepen if you would like to try practicing yourself!

Want to learn to code with me?

Join me on my Live Coding Streams on Twitch!

Xoxo,

Pachi C.
Screenshot os Pachi streaming live code on Twitch

Top comments (3)

Collapse
 
devdanilov profile image
Nik Danilov

You talk about that var is dead and then use it in the ternary example which is can be confusing for beginners.

Collapse
 
pachicodes profile image
Pachi πŸͺ (she/her/ela) Author

great point! I will fix it

Collapse
 
reisdev profile image
Matheus dos Reis de Jesus • Edited on

Took me about to 2 years to discover that Template Literals(or strings) were named this way. Amazing article!

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!