The first time I learned about the ternary operator, I thought it was so cool. I used it all the time like a kid with a new toy. Like that same kid, though, I eventually abandoned it because I felt that saving a few lines wasn’t worth the potential confusion someone might experience down the road.
And now I’m learning about arrow functions and already feeling the same way. Sure, it saves lines of code, but at the cost of clarity. Yes, we should understand what these things are and how they work, but we’re also drilled (depending on how we learn) to consider the ‘readability’ of our code. These arrow functions don’t appear to be very ‘readable’, especially once you start chaining them.
To me, these ‘syntactic sugars’ are just like slang in any spoken language: Great for your friends, but not so great in a professional setting. I’m approaching year 2 of my self-taught coding journey, but I believe in developing best-practice habits from the beginning. Seems to me that there’s a distinct clash here between ‘syntactic sugar’ and ‘readability’. Especially considering my career of nearly 10 years has been teaching English, I will always favor ‘readability’, but I’m curious about other thoughts on this matter.
What do you think?
1 Like
One true fact is, at the end, user might not judge you as you used arrow or whatever or not. But she/he will judge you by your code functionality, it’s buggy? no matter if you coded it with x or y, job needs to be done.
You should not take this part of the work so much serius, and should focus on business and stuffs need to be done.
The readability you stated is completely a personal thing. For me (a C/objc dev, and not just me) Most of the js frameworks are useless, but my opinion is not important, becasue some devs are using them, no matter syntax is fancy or not, for them the syntax is pro, but for me, no thanks.
Just like one like progressive rock, while someone else like pop.
Just code the way you like, but do the job right, and you will be professional, no matter if you code with emojis or hex values.
keep goin on great work, happy programming.
I agree with you. I have always hated reading other people’s code when they have compacted it with unecessary coding shortcuts. Readabilty is king for me.
As in all things, and especially anything regarding what you “should” do in programming, it depends. Most students go through a phase where they want to do as much in one line as possible. A long line of chained ternary statements give anyone trying to read their code a headache. As they start experiencing re-reading their old code or helping other students, they come to appreciate a more verbose approach. Over time you sort of get a feel for when a shorthand approach improves readability and where it hinders it (and this will of course vary from person to person).
When you write a very simple if/else statement, it can actually feel more natural to write (and read) it as a ternary.
/// verbose
let friendlyName = '';
if (isRegisteredUser) {
friendlyName = userRecord.firstName;
} else {
friendlyName = "Guest";
}
/// this is how I would do it
const friendlyName = isRegisteredUser ? userRecord.firstName : 'Guest';
Arrow functions are a little bit of a different case because there are some actual differences that make them helpful for some scenarios and poorly suited for others. As MDN sums up:
An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.
I use arrow functions a lot when I am writing callback functions. I would argue that in the example below, it’s just less cluttered - and therefore easier to read - to use an arrow function.
const honorRoll = students.filter((student) => student.gpa > 3.5)); // You'll note that I still like () even when not required, because I find it easier to read
1 Like
Adding to @ArielLeslie’s said, there is a section in YDKJS, ES6 & Beyond about arrow functions (complete with an amusing float chart) that goes into detail regarding both functionality and stylistic concerns and will probably address all of your concerns. 
Neither the ternary operator nor the arrow function syntax are syntactic sugar though.
As a very, very simple example (from the Babel docs)
var bob = {
name: "Bob",
friends: ["Sally", "Tom"],
printFriends() {
this.friends.forEach(f => console.log(this.name + " knows " + f));
}
};
Vs
var bob = {
name: "Bob",
friends: ["Sally", "Tom"],
printFriends() {
var _this = this;
this.friends.forEach(function (f) {
return console.log(_this.name + " knows " + f);
});
}
};
It’s not really possible to do a comparison for the ternary operator, as it’s the only thing like it in the language; it’s an expression, not a statement. You can have a variable that you adjust the value of using if/else, but that can only be done imperatively. There is the proposal to add do blocks into the language, so
var foo = do {
if (condition) {
something;
} else {
somethingElse;
}
};
But that’s only a proposal, may never reach fruition