ES6: Difference between revisions
No edit summary |
(→ESLint) |
||
Line 31: | Line 31: | ||
const desc = 'Use single-quotes if you don\'t need variables, if you want to make eslint happy.'; | 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. |
Revision as of 13:39, 20 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 );
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.