🍬 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 🤟

Syntactic sugar, diabetes alert

By Maya Shavin

Made with Slides.com

Syntactic sugar, diabetes alert

JavaScript starting with ES6 offered a lot of new syntax and features. Most helps saving lines of code needs, while improves code readability and reduces the learning curve for the language. Yet usage of these syntax without considering consequences nor situation can bring the exact opposite result. In this session, we will discuss about these pitfalls, and how to develop more proactive coding habit .

  • 2,136

More from Maya Shavin