I must admit, JavaScript syntax isn’t the easiest thing I’ve encountered. It’s not so much the ‘words’ but the symbols that I have a hard time remembering. Normal brackets, swirly brackets, or no brackets? Single, double or no quotation marks? Ergh!
Additionally, there a multiple ways of writing the same thing. I know this was done to make it easier for developers, but it can be tough to keep the whole thing straight in your head when you’re learning.
I’ve already encountered multiple ways of shortening code that I had just figured out, so I’ve decided to start this cheat sheet to keep track of it all.
If Else Statements shorthand with conditional operators
A conditional operators, also called a ternary operator, let’s you write an if else statement in one single line.
Apparently ‘ternary’ means ‘consisting of three parts’, I looked it up. That makes a lot of sense now, because it goes like so:
condition ? thisIsWhatHappensIfTrue : thisIsWhatHappensIfFalse ;
That’s it. Three simple elements.
Using a conditional operator you can therefore take the below if else statement:
var iAmHungry = true ;
if (iAmHungry) {
console.log (‘Gimme the pizza!’) ;
} else {
console.log (‘I don’t want no pizza, thanks!’) ;
}
and shorten it to:
iAmHungry ? console.log (‘Gimme the pizza!’) : console.log (‘I don’t want no pizza, thanks!’) ;
Neat!
JavaScript Functions Shorthand
In my last post I was trying to wrap my head around how functions work. Now that I’ve figured this out, I can try using the shorter version in the future.
const iNeedPizza = function (day) {
if (day === ‘Sunday’) {
return true ;
} else {
return false ;
}
} ;
This function checks if the day is Sunday, and if it is then it saves the value true to the variable iNeedPizza.
Of course, wrongly assuming that I only need pizza on Sundays. Silly function.
To make things easier, we can use an arrow function () => instead of the word function so that we don’t have to write the word function all the day. Trust me, I just did it three times and it was already annoying. This is how the above function looks then:
const iNeedPizza = (day) => {
if (day === ‘Sunday’) {
return true ;
} else {
return false ;
}
} ;
So instead of writing the word function you just write out the parameter and use the arrow to point to the function body (the stuff in the swirly brackets).
Additionally, if the function only has one parameter, like (day) in our example, you can lose the brackets around it:
const iNeedPizza = day => {
if (day === ‘Sunday’) {
return true ;
} else {
return false ;
}
} ;
Another shortcut for lazy developers is that we can lose the swirly brackets and the return keyword IF what follows is just one line of code. So in the above case, that doesn’t apply, but what we can do is
- shorten the if else statement with what we learned in the first paragraph.
- get rid of the swirly brackets
- get rid of the word return
- and BAM:
const iNeedPizza = day => day === ‘Sunday’ ? true : false ;
console.log(iNeedPizza(‘Sunday’); // will return true
console.log(iNeedPizza(‘Monday’); // will return false
Speechless.
