Random JavaScript Tricks

As you grow in your journey, to becoming the very best, at coding in whatever language, you start to learn a few things along the way. Some of these things are pretty common, for example in JavaScript, you might learn or come across simple things like for loops, or conditionals (if/else/else if), and other common features like, that. But then like most things, there are unique features that JavaScript has that can be seen as more niche like ternaries, IIFE's and etc. And here is where I am going to show you some of these more unique and cool JS tricks that can help you grow more in your journey as a developer.

Ternary

Now let's start with a ternary, and you might be thinking, hey this is just a simple ES6 trick to use a conditional without typing out as much. And if you know that much then awesome cool, you're right. But for those of you who don't know, A ternary is indeed a way to "simplify" a if/else statement. Look at this normal if/else:

let dog = "Kitty"
if(dog === "Kitty") {
   console.log("Your dog is a kitty?" ) 
} else {
   //the backticks allows for string interpolation another cool trick
   console.log(`Your dog's name is ${dog}.`
}

This is a pretty simple conditional, if condition is true, you get "Your dog is a kitty?" and if it's false you get "Your dog's name is " whatever you named your dog variable. Simple, but a lot of typing right? This is where a ternary comes into play. Look here :

let dog = "Kitty"
dog === "Kitty" ? "Your dog is a kitty?" : `Your dog's name is ${dog}.`



 Explanation(Kinda)
//Let's break the ternary down here.
//The first section 
dog === "Kitty" 
//This is what condition you want to test, or what you would normally wrap in the () for a if/else
//next comes the ?
?
//This signifies that your done defining your condition and creating the ternary
//Next is the true condition : false condition
"Your dog is a kitty?" : `Your dog's name is ${dog}.`
//Like explained above, on the left side of your : is the return value you get when your condition is true
dog === "Kitty" is true
//Making the right side being what you get returned if it's false
dog === "Kitty" if false

This code block is basically a one liner, that does exactly the same thing as the code above. You might look and compare and ask, but wait, the ternary one doesn't even have a console log, but the other one does, you wouldn't get the same out put right? But that's also wrong, ternaries have what you call an implicit return, so what ever values set to be used as your return values ie. the strings we used, will be the return or consoled values. True they aren't complete the same but they are pretty close. We could wrap them in a console.log if you really wanted. Or change the conditional above to just return the strings.

You might also think, well okay ternaries are cool and all but, for normal conditionals you can have multiple else if, and you can nest them, can you do that with ternaries? Well yes you can but they do look a bit more confusing when you nest them. Like this:

let age = 18

age >= 18 ? 
age > 21 ? "You are able to drink at the bar" : "You can enter the bar, but you can't drink"
: "You are underaged" 

//So in this case you have, another ternary to act as a else if

Immediately Invoked Function Expression IIFE

Another cool JS trick you could use, is called IIFE, or an immediately invoked function expression. Now what is an iffe? simply it's a function that runs immediately on a webpage as the dom renders. Now if you don't know what dom is, this might not be as useful to you, but for those who do. An iffe is something that acts similarly to the react function componentDidMount, in that as soon as you program runs, what ever is in your iffe will run. This is helpful in various ways, but explaining it all in detail would be a much longer blog. I will just show you an example

(function() {
    // Function contents, the code you want to run as soon as the dom renders
You can wrap your whole code in this but at the same time its not necessary, most people use it, when they what to do some async api calls to get data then using that content they can render that content onto the dom in real time
})();

//you can also write it like this 

//same thing
(() => {
    //some code
})();

// It can also be used asynchronously 

( async () => {
   await //some code
})()

Conclusion

Yea I ended up explaining about ternaries a bit much so I ran out of time to really go in depth about IIFEs and the other neat JS tricks but if you do get curious, ill try and make a less in depth but more content version soon!! Thanks for the read, any questions just leave a comment.