ES6: Difference between revisions

From Bitpost wiki
 
Line 25: Line 25:
  const nameChange = ({ target: { value }}) => setName( value );
  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!):
* 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.
  // setObject will include name and status, but not _id.
  // _id, name and status have all been destructured and are available for use.
  // _id, name and status have all been destructured and are available for use.
  const { _id, ...setObject } = data;
  const { _id, ...setObject } = data;

Latest revision as of 19:05, 26 September 2020

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 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.