What is ES6?

ES6 stands for ECMAScript 6. ECMAScript is a JavaScript standard intended to ensure a common language across different browsers. ES6 is the 6th version of ECMAScript.

Why ES6? / Features of ES6 / Upgrades in ES6

React uses ES6 and all of these new features will make your coding experience in React much better. You will be able to do things with much more ease and in fewer lines! Features like:

• Arrow Functions:

  const hello = () => {
    return "Hello World!";
  }

  or

  const hello = () => "Hello World!";

• .map(): .map can be used for a lot of things. One of its use cases is that we can make any number of cards through a loop and just put it in JSX, like this:

  const data = ['title1', 'title2', 'title3'];
  let cards = data.map((item) => <card>{item}</card>);

• Destructuring:

  Old Way:

  const languages = ['JS', 'Python', 'Java'];
  const js = languages[0];
  const python = languages[1];
  const java = languages[2];

  New Way:

  const languages = ['JS', 'Python', 'Java'];
  const [js, python, java] = languages;

• Ternary Operator: With this, you can write if/else conditions in one line. Its syntax is fairly simple like this:

  condition ? <expression if true> : <expression if false>

  Example:

  let loading = false;
  const data = loading ? <div>Loading...</div> : <div>Data</div>;

• Spread Operator:

  const languages = ['JS', 'Python', 'Java'];
  const morelanguages = ['C', 'C++', 'C#'];
   
  const allLanguages = [...languages, ...morelanguages];

  Output:

  ["JS", "Python", "Java", "C", "C++", "C#"]

and many more like classes, modules.