Simple concepts of Modern JavaScript

Before I start, please note that this post is me trying to explain these concepts to myself so make sure I fully understood them and have these notes when I needed. There is much more to these concepts, but my notes will be summarized as very basic explanations.

The concepts are:
*Arrow functions,
*Template literals,
*Var, Let and Const,
*Ternary (conditional) operator,
*Shorthand object assignment and
*Spread operator.

Arrow Functions
Simply put, Arrow Functions are function 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')}

Template Literals
I have been using those for a while and had no idea what they are named. It is a new way of creating a string. I honestly 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`);

The result is the same, but writing as template literal is easier, I 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 want to reassign a value, them use let. Basically, 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
var todayIsFriday = false;
if(todayIsFriday){
  console.log('It is Fri-yay')
} else{
  console.log('Not quite there yet')
}

// using Ternary Operator
var 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:

//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. Tne Spread Operator syntax is ...

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

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

That is all I have for today.
Maybe my little notes can help someone navigating JavaScript like myself.
I have all those pieces of code on my codepen if you would like to try practicing yourself
: https://codepen.io/collection/DLMWOM/

Happy Monday folks!

Comments

[Ben Calder]

Just to clarify: the intention of arrow functions is not simply to be a shorthand for a normal function; though in practice they do often get used that way. The main intent is to solve a common scoping problem.

When you use a normal function the keyword this is set to that function's scope; but in an arrow function this is set to the parent scope. To illustrate the difference try running the following and looking at the console output:

const PseudoClass = function() {
  this.message = 'this is a pseudo-class property';

  return {
    normalFunction : function() {
      console.log(`normalFunction says: ${this.message}`);
    },
    arrowFunction : () => {
      console.log(`arrowFunction says: ${this.message}`);
    }
  }
};

const instance = new PseudoClass();
// right now you just need to know that you can call
// the functions returned by the PseudoClass function like so:
instance.normalFunction(); // normalFunction says: undefined
instance.arrowFunction(); // arrowFunction says: this is a pseudo-class property

In normalFunction this is scoped to the function where there is no message property.

In arrowFunction this is scoped to the parent where a message property is defined.

Strictly speaking arrow functions are usually intended to be defined in the context of a 'class'.

If you want further detail I always recommend the You don't know JS books for an in-depth and clear explanation of this; scope and why JS doesn't actually have classes :D

---

One other useful feature of template literals is how they handle white space:

console.log(`there is a line break here
but here \
not`);

Useful to know if you deliberately want to output line breaks; or if you want to break source code onto multiple lines.

[Pachi 🥑]

Thank you Ben! As I mentioned, I am currently studying those concepts so your input is VERY helpful!

[Ben Calder]

Happy to contribute. I have often posted my findings to forums precisely to help solidify concepts in my head and in case I had misunderstood anything. It's a really good learning process and has the benefit of helping others :)

One thing that I realised I didn't mention: a common use of arrow functions is in callbacks where you want to maintain the this context:

window.setTimeout(arrowFunction, 100);

Before arrow functions you had to use bind - which felt a little arcane:

window.setTimeout(normalFunction.bind(this), 100);

[Connor Tangney]

Akin to the ternary operator, if you just want to quickly evaluate something, and don't really care about the inverse situation, check out guards!

They're contextually similar to the ternary operator and I honestly have found more use-case for this in the past than ternaries:

//a variable to test with
let a = 'a';

//condition && result
a === 'a' && console.log('yes it does!');

Keep in mind, like the ternary operator, you should avoid complex logic in the block that is evaluated when your condition is met:

//a variable to test with
let a = 'a';

//condition && result
// !! THIS WON'T WORK !!
a === 'a' && (
  console.log('did this work?')
  console.log('no :(')
);

[Pachi 🥑]

Thank you !!!

[Allen Porter]

You'll need to be careful with the order you use the spread operator. If the first object contained c it would not have been replaced. Change the order and you'll get your expected result. Also the spread operator is a shallow copy.

[Alexandro Disla]

thank you

but

const  hello = () => {console.log('Hello')}

[morefox]

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

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

In this case the output is

// Object {c: "c", a: "a",  b: "b"}

I guess you meant to write something like

const obj2 = {...obj1, c: 'c'};

[Casi Imin]

Thank you P.

[Pachi 🥑]

I thank you for reading!

[Pachi 🥑]

Thank you Michele!!

[Teo Khai Kiong]

I guess there is a typo at Cons?
Should be const instead of Cons.

[Pachi 🥑]

Thanks, fixed