1️ Utilizing Sets for Quick Array Deduplication

In traditional programming, filtering unique values from an array typically involves looping through each element or using libraries like Lodash. Fortunately, ES6 introduces a new data structure called Set, which can significantly streamline this process. By leveraging the spread operator, we can swiftly generate a deduplicated array.

const array = [10, 10, 10, 20, 20, 30, 40, 40, 50, 60, 60, 70];

const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // [10, 20, 30, 40, 50, 60, 70]

This method is effective for arrays containing primitive values such as undefined, null, boolean, string, and number. However, it won't work with objects, functions, or nested arrays.

2️ Simplifying Conditional Judgments with Includes

When using logical operators (like ||) for conditional checks, lengthy conditions can clutter the code. The includes method offers a more concise way to check for the presence of an element in an array, allowing for clearer code.

const myNum = '3';

const numArray = ['1', '2', '3'];

// Traditional way

if (myNum === '1' || myNum === '2' || myNum === '3') {

//...

}

// Using includes

if (numArray.includes(myNum)) {

//...

}

3️ Changing Array Length: A Simple Approach

While high-level array functions are commonly used for manipulation, altering an array's length can be done intuitively by setting the length property directly.

let arr = ['1', '2', '3', '4'];

arr.length = 2;

console.log(arr); // ['1', '2']

For performance-sensitive applications, consider using array.slice() instead.

4️ Enhancing Number Readability with Separators

To make large numbers more readable, you can use underscores as separators. This practice enhances clarity at a glance.

const num = 1_000_000_000;

console.log(num); // 1000000000

5️ Improved Console Logging with Object Wrapping

For clearer console outputs, enclose parameters in curly braces when using console.log(). This will display both the variable name and its value.

const name = "Jack";

console.log({ name });

// Output: { "name": "Jack" }

6️ Streamlining Conditionals with Short-Circuit Evaluation

The if...else structure is common in programming, but it can be verbose. The ternary operator offers a more concise alternative, though it can sometimes complicate logic.

const num = 75;

const result = num > 100 ? 'more than 100' : 'less than 100';

To keep it simple, logical operators like && can help express conditions more succinctly:

const one = 8;

const two = 9;

const three = 10;

console.log(one && two && three); // returns 10

7️ Safe Property Access with Optional Chaining

Accessing nested object properties can lead to errors if the property doesn't exist. To prevent crashes, you can use optional chaining introduced in ES6.

console.log(abc?.ss?.aa?.bb?.cc);

8️ Mastering Operators for Quick Type Conversion

Understanding how various values are treated in JavaScript is crucial. The ! operator can convert types to boolean, while concatenation can convert numbers to strings.

const value = 12 + ''; // '12'

9️ Efficient Mathematical Operations with New Operators

ES7 introduced new operators that streamline mathematical operations. For example, the exponentiation operator ** allows for more efficient power calculations.

console.log(5 ** 7); // 78125

This guide aims to assist you in mastering these fundamental JavaScript techniques. If you have any questions or wish to discuss these topics further, feel free to reach out!

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go: Be sure to clap and follow the writer ️👏️️ Follow us on X | LinkedIn | YouTube | Discord | Newsletter. Explore our other platforms: Stackademic | CoFeed | Venture | Cubed. More content at PlainEnglish.io.