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 example= () => {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 : codepen.io/collection/DLMWOM
hey, follow me on twitter @pachicodes And have a great day !
XOXO, Pachi