🍬 Syntactic sugar 

Diabetes alert 🚨

MAYA SHAVIN

mayashavin

mayashavin

Syntactic sugar - Diabetes alert

What's it about

  • 🍫  Syntactic Sugar WHAT ?
  • 🤤  Sugar is sweet...
  • 🤢  ... until it becomes too much
  • 🚀️  Handle with CARE

mayashavin

Syntactic sugar - Diabetes alert

Me as 👩‍💻

👩‍💻 Senior Frontend Developer @ Cloudinary

👩‍🔬 Writer @FrontEndWeekly

👩‍💼 Portfolio: https://www.mayashavin.com

@MayaShavin

👩‍💻 Founder of @VueJSIsrael

mayashavin

Syntactic sugar - Diabetes alert

What is Syntactic sugar?

mayashavin

Syntactic sugar - Diabetes alert 

for (let i = 0; i < someArr.length; i++) {
    const elem = someArr[i];

    //Do something
}
someArr.forEach(element => { 
    //do something 
})
const filtered = someArr.filter(element => {
    return matchCondition(element)
));
const filtered = someArr.map(element => {
    return { isMap: true, id: element.id }
));

It's NOT JUST syntactic sugar

mayashavin

Syntactic sugar - Diabetes alert

impler

S

sability

U

ood Code

G

lternative

A

eadability

R

mayashavin

Syntactic sugar - Diabetes alert

When it's sweet...

let it be constant sweet 🤤

mayashavin

Syntactic sugar - Diabetes alert

LESS code

More CONCISE

FASTER

respectively

CLEARER

const banana = 'b' + 'a' + + 'a' + 'a';
const banana = `ba${fillme}a`
const hasExpression = expression ? true : false
const hasExpression = !!expression
if (object && object.child && object.child.property) {}
if (object?.child?.property) {}
const myAwesomeArr = new Array();
const myAwesomeArr = [];

mayashavin

Syntactic sugar - Diabetes alert 

const result = []

for(let i = 0; i < data.length; i++){
  const x = data[i];
  
  if (x % 2=== 0) {
    result.push(x)
  }
}
const isEven = number => number % 2 === 0
const result = data.filter(isEven)
const myValue = inputValue || 'defaultValue';
let myValue = 'defaultValue'

if (inputValue) {
    myValue = inputValue
}

mayashavin

Syntactic sugar - Diabetes alert

sweet

Too

to

handle

🤢

mayashavin

Syntactic sugar - Diabetes alert 

const flatternArr = (arr) => arr.reduce(
			         (flatten, original) => flatten.concat(Array.isArray(original) 
                                                         ? flatternArr(original) 
                                                         : original), 
                                 []);

const reducer = (flatten, original) => flatten.concat(Array.isArray(original) 
                                                         ? flatternArr(original) 
                                                         : original);

const flatternArr = (arr) => arr.reduce(reducer, []);

function flatten(arr){
    var reducer = (flatten, original) => flatten.concat(Array.isArray(original) 
                                                        ? flatten(original) : original);
    
    return arr.reduce(reducer, []);
}

const emitEvent = (eventId, ...params) => {
    ((callback) => setTimeout(() => callback(...params)))(events[eventId])
}

mayashavin

Syntactic sugar - Diabetes alert

🤷‍♀️

Less code !==  More readability

http://perfectionkills.com/javascript-quiz-es6/

mayashavin

Syntactic sugar - Diabetes alert

Filtering & mapping an array

const mappedData = data
                   .filter(x => isEven(x))
                   .map(x => x * 2);
const mappedData = [];

for (let i = 0; i < data.length; i++) {
    const x = data[i];

    if (isEven(x)) {
        mappedData.push(x * 2);
    }
}

O(n)

O(n)

                   .reduce(x => x * 2)
// And so on...

mayashavin

Syntactic sugar - Diabetes alert

It's O(n) but NOT O(n)

n = 100000
x 100000
data.filter()
x 100000
filtered.map()

new array created

new array created

http://bit.ly/for-vs-map-filtered-arr

x 100000

new array created

modify that array

for(...)

mayashavin

Syntactic sugar - Diabetes alert

🤷‍♀️

Concise code !==  Better performance

mayashavin

Syntactic sugar - Diabetes alert

Spread them all

const childObj = {
    ...momObj,
    ...dadObj
}
const momObj = {
    traitA: true,
    traitB: false,
    uselessInfo: 'uselessInfo',
    //...
}
const dadObj = {
    traitA: false,
    traitB: true,
    //...
}

traitA from momObj?

traitB from dadObj?

without uselessInfo?

mayashavin

Syntactic sugar - Diabetes alert

🤷‍♀️

Clearer !==  Less overhead

mayashavin

Syntactic sugar - Diabetes alert

Babel? 😳

mayashavin

Syntactic sugar - Diabetes alert 

const sumUp = (...numbers) => {
    let sum = 0;
    for(const number of numbers) {
        sum += number;
    }
    return sum;
}
"use strict";

var sumUp = function sumUp() {
  for (var _len = arguments.length, 
        numbers = Array(_len), _key = 0; 
        _key < _len; _key++) {
    numbers[_key] = arguments[_key];
  }

  var sum = 0;
  for (var _iterator = numbers, 
      _isArray = Array.isArray(_iterator),
      _i = 0, 
      _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
    var _ref;

    if (_isArray) {
      if (_i >= _iterator.length) break;
      _ref = _iterator[_i++];
    } else {
      _i = _iterator.next();
      if (_i.done) break;
      _ref = _i.value;
    }

    var number = _ref;

    sum += number;
  }
  return sum;
};

>9.x

mayashavin

Syntactic sugar - Diabetes alert 

function Point(x, y) {
  this.x = x;
  this.y = y;
}

var p = new Point(11, 22);
var q = new Point(33, 44);

q.z = 55;

mayashavin

Syntactic sugar - Diabetes alert

The hidden class

mayashavin

Syntactic sugar - Diabetes alert

Handle with CARE

mayashavin

Syntactic sugar - Diabetes alert

heck check check

C

sk for review

A

ead

R

xplicity

E

mayashavin

Syntactic sugar - Diabetes alert

Thank you 🤟