11 JavaScript Tricks You Probably Didn't Know About

FADHILI Josue — Tue, 07 Nov 2023 13:54:08 +0000

JavaScript is a versatile language with a myriad of features and quirks. While many developers are familiar with the basics, there are some lesser-known tricks that can enhance your coding prowess. In this article, we'll explore 11 JavaScript tricks that might surprise you and prove useful in your development journey.

1. Destructuring with Aliases

const person = { firstName: 'John', lastName: 'Doe' };
const { firstName: first, lastName: last } = person;
console.log(first); // Output: John
console.log(last); // Doe

2. Converting Strings to Numbers

This concise trick converts a string to a number using the unary plus operator. It's a concise alternative to parseInt() or Number().

const num = +"42";
console.log(typeof(num)) // number
console.log(+"asdf") // NaN

3. Numeric Separators

You can now easily separate numbers with just an _ . This will make life of developers working with large numbers more easier.

//old syntax
let number = 1243134123

//new syntax
let number = 1_243_134_123
console.log(number) // 1243134123

4. Get unique values from an array

We can extract unique values from an array i.e removing duplicate values in an array by simply using the Set object and Spread operator.

let array_values = [1, 3, 3, 4, 5, 6, 6, 6,8, 4, 1]
let unique_values = [...new Set(array_values )];
console.log(unique_values );
// [1,3, 4, 5, 6, 8]

5. Swapping Variables

This one-liner elegantly swaps the values of two variables. It leverages array destructuring to achieve a simple and readable swap operation.

// longhand
let a = 10;
let b = 20;

// Swapping variables using a temporary variable
let temp = a;
a = b;
b = temp;

console.log(a, b); // Output: 20 10


// shorthand
let a = 10;
let b = 20;

[a, b] = [b, a];

console.log(a, b); // Output: 20 10

6.Shuffling an Array

A quick way to shuffle the elements of an array.

const array = [23,3,34,3454,5,435,4343,33,343,3];
const shuffledArray = array.sort(() => Math.random() - 0.5); // [ 435, 23, 3454, 3, 33, 5, 3, 343, 34, 4343 ]
// you may get a different shuffle from mine because it is made randomly

7.Optional Chaining (Nullish Coalescing Operator)

Safely access nested properties without worrying about null or undefined.

const value = obj?.prop ?? 'default';

8. Using Function.prototype.bind()

this is a method available on all JavaScript functions. It allows you to create a new function with a fixed this value and possibly pre-set arguments

const module = {
  x: 42,
  getX: function () {
    return this.x;
  },
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// Expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// Expected output: 42

Partial Function Application

const add = function(a, b) {
  return a + b;
};

const add2 = add.bind(null, 2);

const result = add2(3); // Output: 5

Partially apply functions for more flexible code. In this example, add2 is a new function that always adds 2 to its argument.

9.Detecting the Environment (Browser or Node.js)

const isBrowser = typeof window !== 'undefined';
const isNode = typeof process !== 'undefined' && process.versions && process.versions.node;

10. Currying Functions

Currying is a functional programming technique that allows you to transform a function with multiple arguments into a sequence of functions, each taking a single argument. This can make functions more flexible and composable.

code examples:

Example 1: Basic Currying

const add = (a) => (b) => a + b;

const add2 = add(2);
const result = add2(3); // Output: 5

In this example, we have a add function that takes one argument a and returns a function that takes another argument b. This inner function adds a and b. When add(2) is called, it returns a new function add2 which adds 2 to any value passed to it.

Example 2: Currying with Multiple Arguments

const multiply = (a) => (b) => (c) => a * b * c;

const multiplyByTwo = multiply(2);
const multiplyByTwoAndThree = multiplyByTwo(3);
const result = multiplyByTwoAndThree(4); // Output: 24

Example 3: Real-world Use Case (Formatting Dates)

const formatDate = (format) => (date) => {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  const day = date.getDate();
  const month = months[date.getMonth()];
  const year = date.getFullYear();

  switch (format) {
    case 'dd-mm-yyyy':
      return `${day}-${month}-${year}`;
    case 'mm-dd-yyyy':
      return `${month}-${day}-${year}`;
    case 'yyyy-mm-dd':
      return `${year}-${month}-${day}`;
    default:
      return 'Invalid format';
  }
};

const formatAsDdMmYyyy = formatDate('dd-mm-yyyy');
const formattedDate = formatAsDdMmYyyy(new Date()); // e.g., Output: '07-Nov-2023'

In this example, formatDate is a curried function that takes a format argument and returns a function that takes a date argument. It formats the date based on the provided format. This allows for easy reuse of the formatting function with different formats.

11. `Promise.all()` for Parallel Execution

Using Promise.all() for parallel execution is a technique in JavaScript that allows you to concurrently run multiple asynchronous tasks and handle their results collectively. This is particularly useful when you have a set of independent asynchronous operations that can be executed simultaneously for improved performance.

const fetchUserData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: 1, name: 'John Doe' };
      resolve(user);
    }, 2000); // Simulating an asynchronous operation
  });
};

const fetchPosts = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const posts = [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }];
      resolve(posts);
    }, 1500); // Simulating an asynchronous operation
  });
};

const fetchComments = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const comments = [{ id: 1, text: 'Comment 1' }, { id: 2, text: 'Comment 2' }];
      resolve(comments);
    }, 1000); // Simulating an asynchronous operation
  });
};

Promise.all([fetchUserData(), fetchPosts(), fetchComments()])
  .then(([userData, posts, comments]) => {
    console.log('User Data:', userData);
    console.log('Posts:', posts);
    console.log('Comments:', comments);
  })
  .catch(error => {
    console.error('Error:', error);
  });

conclusion

Thank you for making it to the end! 🎉 i think you found this article insightful, and if so please share it to other people who can find it useful. Feel free to give a suggestion or send me a message on twitter or Linkedin.

Unveiling JavaScript Tricks: Dots and spreading well explained with examples

FADHILI Josue — Tue, 07 Nov 2023 07:31:33 +0000

JavaScript Spread Operator: Unraveling the Dots

This article contains examples and explanations of the JavaScript spread operator, a powerful feature that allows for easy expansion of arrays, strings, and objects. In this article, we'll explore various use cases and delve into the intricacies of spreading in JavaScript.

Using Spread Operator with Arrays
Spreading Strings
Combining Spread with Objects

Interesting examples could be composed with spreading of arrays. Consider this:

[...[..."..."]].length; // -> 3

💡 Explanation:

Why 3? When we use the spread operator, the @@iterator method is called, and the returned iterator is used to obtain the values to be iterated. The default iterator for string spreads a string into characters. After spreading, we pack these characters into an array. Then we spread this array again and pack it back to an array.

A '...' string consists with three . characters, so the length of resulting array is 3.

Now, step-by-step:

[...'...']             // -> [ '.', '.', '.' ]
[...[...'...']]        // -> [ '.', '.', '.' ]
[...[...'...']].length // -> 3

Obviously, we can spread and wrap the elements of an array as many times as we want:

[...'...']                 // -> [ '.', '.', '.' ]
[...[...'...']]            // -> [ '.', '.', '.' ]
[...[...[...'...']]]       // -> [ '.', '.', '.' ]
[...[...[...[...'...']]]]  // -> [ '.', '.', '.' ]
// and so on …

Using Spread Operator with Arrays

Spreading in JavaScript allows us to easily expand arrays into individual elements. It's a powerful feature that can lead to some fascinating results. Let's explore some interesting examples.

const numbers = [1, 2, 3, 4, 5];
const sum = (...args) => args.reduce((acc, val) => acc + val, 0);
const result = sum(...numbers); // 15

const arr1 = ['a', 'b', 'c'];
const arr2 = [...arr1, 'd', 'e', 'f']; // [ 'a', 'b', 'c', 'd', 'e', 'f' ]

Spreading Strings

The spread operator (...) is a versatile feature in JavaScript that allows us to easily manipulate strings. Let's explore some examples:

const str = "Spread";
const spreadChars = [...str].map(char => char.toUpperCase());  // [ 'S', 'P', 'R', 'E', 'A', 'D' ]

Combining Spread with Objects

const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };

const combined = { ...obj1, ...obj2 }; // { foo: 'baz', x: 42, y: 13 }

The spread operator provides a concise and powerful way to manipulate arrays, strings, and objects in JavaScript. By understanding its versatility, you can write more expressive and efficient code.

DEV Community: FADHILI Josue

11 JavaScript Tricks You Probably Didn't Know About

1. Destructuring with Aliases

2. Converting Strings to Numbers

3. Numeric Separators

4. Get unique values from an array

5. Swapping Variables

6.Shuffling an Array

7.Optional Chaining (Nullish Coalescing Operator)

8. Using Function.prototype.bind()

Partial Function Application

9.Detecting the Environment (Browser or Node.js)

10. Currying Functions

11. `Promise.all()` for Parallel Execution

conclusion

Unveiling JavaScript Tricks: Dots and spreading well explained with examples

JavaScript Spread Operator: Unraveling the Dots

Table of Contents

💡 Explanation:

Using Spread Operator with Arrays

Spreading Strings

Combining Spread with Objects

DEV Community: FADHILI Josue

11 JavaScript Tricks You Probably Didn't Know About

1. Destructuring with Aliases

2. Converting Strings to Numbers

3. Numeric Separators

4. Get unique values from an array

5. Swapping Variables

6.Shuffling an Array

7.Optional Chaining (Nullish Coalescing Operator)

8. Using Function.prototype.bind()

Partial Function Application

9.Detecting the Environment (Browser or Node.js)

10. Currying Functions

11. Promise.all() for Parallel Execution

conclusion

Unveiling JavaScript Tricks: Dots and spreading well explained with examples

JavaScript Spread Operator: Unraveling the Dots

Table of Contents

💡 Explanation:

Using Spread Operator with Arrays

Spreading Strings

Combining Spread with Objects

11. `Promise.all()` for Parallel Execution