JavaScript remains a dominant force, as indicated by the recent Stack Overflow Developer Survey. It’s evident that developers primarily relied on JavaScript over the past year, thanks to its versatility as a "Write Once, Run Everywhere" language. The only limits are those of your creativity and expertise.

While JavaScript is relatively straightforward to grasp—allowing you to build a simple calculator within hours and develop functional websites in a matter of weeks—mastering it is a different story. Its quirks can be perplexing, with numerous variations and methods to achieve similar outcomes.

For those intrigued by the peculiarities of JavaScript, consider exploring this related discussion.

11 Unmentioned WTF Moments In JavaScript That Will Shock You

Yes, JavaScript can be quite peculiar at times.

The extensive range of approaches in JavaScript is beneficial. By examining someone's code, you can quickly discern whether they're a novice or a seasoned developer. Experienced programmers tend to write cleaner, more efficient code, avoiding excessive if-else statements and using descriptive variable names. This article presents three JavaScript tips to help you write more elegant code.

This piece follows the earlier article titled 3 Marvelous JavaScript Tips To Speed Up The Development Process. If you haven’t read it yet, be sure to check it out.

3 Marvelous JavaScript Tips to Speed Up the Development Process

Here are my favorite JavaScript tricks to save time.

Let’s dive in.

1. Conditionally Create Object Keys and More

When you think of the term "conditionally," if-else statements likely come to mind. While it’s reasonable to use an if statement with a dot operator to add keys to an object, this can lead to cluttered code. Imagine needing to write five separate if statements for five independent object keys—what a mess!

Instead, consider this: you can conditionally assign keys on the same line by using short-circuit evaluation and the spread operator. Simply return the object slice you want to include conditionally to the spread operator.

This approach is more intuitive than multiple if statements and can be applied in various scenarios, including:

• Adding elements to an array conditionally.
• Passing props to a React component conditionally.

The technique for returning items conditionally remains the same. In an array, spread the inner parentheses and return the array slice based on a condition.

In the case of React, it’s similar to assigning object keys conditionally. Passing props to a component is essentially creating an object in a different manner, so the process mirrors that of conditional object key assignment.

2. A Better Way to Handle Nested Ternaries

The ternary operator is one of JavaScript's standout features, allowing you to condense multiple lines of code into a single line for conditional assignments or flow changes. However, its syntax—with ? and :—can be challenging to write and comprehend, especially when nested.

In contrast, Python's ternaries are straightforward and easy to read.

JavaScript’s nested ternaries can become quite complex. To remedy this, I’ll introduce a helper function that facilitates the use of ternary statements in a more readable and simplified manner. With this function, you can harness the full power of ternaries without sacrificing clarity.

At first glance, the function may appear convoluted due to the numerous similar methods and statements. However, a closer inspection reveals that it returns an object with if and else keys. Depending on the action, it will return either the main function or the value passed conditionally.

Here’s how it can be utilized.

As you can see, the methods are chained together in a sequential manner, mirroring how they are read. The initial call to the is function serves as the base. The if method determines if the previous value should be returned; if the expression isn’t truthy, the else value is returned, just like with traditional ternary statements.

Furthermore, you can create nested ternaries in a readable format by chaining another is method after an if method and passing a value.

3. Dynamically Access Object Properties

The fundamental lesson about objects is that you can access their properties using the dot operator.

However, this isn’t the only method. You can also access properties through brackets ([]). Instead of placing a dot after the object name, use brackets as you would with arrays, substituting the index number for the property name as a string.

This feature adds flexibility to objects. For instance, the dot operator cannot access properties with spaces. However, by using brackets, you can easily reference keys that include spaces.

In addition to handling spaces in keys, you can also use this feature to access properties dynamically. This means employing another variable to retrieve inner values. Consider this code snippet.

In the example above, the goal is to access the key1 of the object and retrieve its value. When using a dot, the interpreter misinterprets dynamicVariable as the name of the key, rather than recognizing it as a variable holding the key name.

To resolve this, simply use brackets and insert the variable. Voilà! The issue is resolved.

Congratulations! You’ve now learned three valuable JavaScript tricks that I apply daily to streamline my coding process, and I believe you will find them useful too. If you have additional tips, feel free to share them in the comments section. If you enjoyed this article, please show your support with a clap. Until next time!

If you appreciate content like this and wish to support me as a writer, consider subscribing to Medium. For just $5 a month, you gain unlimited access to stories on the platform. Signing up through my link will earn me a small commission.

Join Medium with my referral link - Can Durmus

As a Medium member, a portion of your subscription fee supports the writers you read, and you gain full access to every story...