Learn ES6 new features

Hey guys, today I want to show you a few bits of ES6.

It was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015. It is the first major update to the language since ES5 which was standardized in 2009.

ES6’s destructuring

Most of the components you see in the wild will not take an argument called “props”. Instead, they use ES6’s destructuring syntax to pull the values out of the props object, which looks like this:

// Plain function:
function Hi({ name }) {
  return <div>Hello {name}!</div>;
}

The only thing that changed here is that the argument props became this object-looking thing { name }. What that says is: “I expect the first argument will be an object. Please extract the ‘name’ item from it, and give it to me as a variable called ‘name’.” This saves you from writing “props.whatever” all over the place and makes it clear, right up top, which props this component expects.

One more bit of ES6 syntax I want to show you, and then we’re done. This is const and the arrow function:

const Hi = ({ name }) => {
  return <div>Hello {name}!</div>;
}

The const declares a constant; the arrow function is everything after the first equal sign.

Compare that code with the “function” version above. Can you see what happened? Here’s the transformation step-by-step:

// Plain function:
function Hi({ name }) {
  return <div>Hello {name}!</div>;
}
// A constant holding an anonymous function:
const Hi = function({ name }) {
  return <div>Hello {name}!</div>;
}
// Removing the "function" keyword and adding the
// arrow after the parameter list:
const Hi = ({ name }) => {
  return <div>Hello {name}!</div>;
}
// Optional step 3: Removing the braces, which makes the
// "return" implicit so we can remove that too. Leaving the parens
// in for readability:
const Hi = ({ name }) => (
  <div>Hello {name}!</div>
)
// Optional step 4: If the component is really short, you can put
// it all on one line:
const Hi = ({ name }) => <div>Hello {name}!</div>;

Now you know how to pass props into a component to make it both dynamic and reusable!

Some nice features in ES6

• Let & Const: Before this, in JavaScript, we had a function and global scope, after the introduction let and const now JS has block scope.

//Let
let num = 5;

if(num < 6 ) {

    let greeting = "Hello ";
    let greeting = "World";
    console.log(greeting);

}

//Const
const num = 5;

if(num < 6 ) {

    const greeting = "Hello ";
    const greeting = "World";
    console.log(greeting);

}

• Template Literals: are an improvement on string concatenation that you should rarely ever combine strings with traditional concatenation.

let name = "Fernanda";
let lastname = "Correa";

//let fullname = "My name is " + name + " and my lname is " + lname;

let fullname = `My name is ${name} and lname is ${lastname}`;

console.log(fullname);

• REST Operator: It is used to handle function parameters, you can use three dots (…) for this. Rest operator signifies that parameter is a placeholder for any number of arguments. and rest operator is used for handling function parameters. The best thing is that the rest parameter is of Array type.

function mynumbers(...nums) {

   console.log(nums);

}

mynumbers(9,7,8);

• Spread Operator : Spread Operator is used with arrays and its syntax is exactly the same as that of Rest Operator, and it is used to split the content of an array.

let a = [1,2,3,4,5];
let b = [6,7,8,9];

let c = [...a, ...b]

console.log(c);
//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

• Maps: Before this, we had just object and arrays collection in JavaScript, but now you can use set and maps in javascript.

let map  = new Map();

map.set('name','Parwiz');
map.set('lname','Forogh');
map.set('email','par@gmail.com');

console.log(map.get('name'));
console.log(map.get('lname'));
//Parwiz
//Forogh
//undefined

If you want to know more about ES6, I suggest you read this tutorial.

Thank you! Bye!!!