ES6

From Bitpost wiki
Revision as of 19:05, 26 September 2020 by M (talk | contribs) (→‎Destructuring)

ES6 brings lots of syntactic sugary goodness. I'll also add other niceties here too even if not strictly ES6.

Arrow functions

Simplified functions that have no this pointer.

const myfunc = onevar => {
   console.log( onevar );
};

const myfunc = ( v1, v2 ) => {
   console.log( `v1 = ${v1}, v2 = ${v2}` );
};

// One liners are simple, no curly braces or return statement needed:
const doubleIt = onevar => onevar * 2;

Destructuring

  • Destructure internal variables with curly braces on left side:
const { internalprop1, prop2 } = myobj;
  • Arrow + destructure:
const myFuncThatTakesOneObjectParam = ({ id, name, desc }) => {
  console.log( id, name, desc );
};
myFunc( { id: 2, name: 'internal name', desc: 'My desc' } );
  • Deeper destructure:
const nameChange = ({ target: { value }}) => setName( value );
  • Using destructuring to extract some properties along with a "copy" that does not have them, and extract others that remain in the copy (example helps!):
// setObject will include have name and status, but not _id.
// _id, name and status have all been destructured and are available for use.
const { _id, ...setObject } = data;
const { name, status } = data;

Backtick strings

Any time you have to build strings using variables, use backtick:

const title = `My name is ${name}.  I can use "quotes" and 'single-quotes' all day.`;

But silly ESlint will bitch if you use them for string literals. Ok fine!

const desc = 'Use single-quotes if you don\'t need variables, if you want to make eslint happy.';

Eslint

Eslint will keep you honest while adopting all the new goo.