🍬 Syntactic sugar, diabetes alert 🚨

Maya Shavin
Jun 10 · 8 min read
Syntactic sugar is sweet, isn’t it?

Syntactic sugar? No, it’s syntactic SUGAR!

Keep using SUGAR because…

KISS works well with SUGAR

//Before syntactic sugar
const result = [];
for (let i = 0; i < data.length; i++) {
const x = data[i];

if (x % 2 === 0) {
result.push(x);
}
}
//After
const isEven = number => number % 2 === 0
const result = data.filter(isEven)

When SUGAR’s in good use, it is extremely sweet and harmless

const banana = `ba${fillme}a`

SUGAR is not only about less code, it’s also about efficiency


Beware of JavaScript Diabetes

Less code !== More readability

Concise code !== Better performance

Browser.support(syntactic sugar)?

const sumUp = (...numbers) => {
let sum = 0;
for(const number of numbers) {
sum += number;
}
return sum;
}
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;
};

Conclusion


Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Maya Shavin

Written by

Senior Front-End Developer @Cloudinary www.mayashavin.com

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co