DEV Community: FADHILI Josue

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.

Unveiling JavaScript Tricks:[] is equal ![]?

FADHILI Josue — Mon, 06 Nov 2023 08:57:12 +0000

`[]` is equal `![]`

Array is equal not array:

[] == ![]; // -> true

💡 Explanation:

The abstract equality operator converts both sides to numbers to compare them, and both sides become the number 0 for different reasons. Arrays are truthy, so on the right, the opposite of a truthy value is false, which is then coerced to 0. On the left, however, an empty array is coerced to a number without becoming a boolean first, and empty arrays are coerced to 0, despite being truthy.

Here is how this expression simplifies:

+[] == +![];
0 == +false;
0 == 0;
true;

See also [] is truthy, but not true.

`true` is not equal `![]`, but not equal `[]` too

Array is not equal true, but not Array is not equal true too;
Array is equal false, not Array is equal false too:

true == []; // -> false
true == ![]; // -> false

false == []; // -> true
false == ![]; // -> true

💡 Explanation:

true == []; // -> false
true == ![]; // -> false

// According to the specification

true == []; // -> false

toNumber(true); // -> 1
toNumber([]); // -> 0

1 == 0; // -> false

true == ![]; // -> false

![]; // -> false

true == false; // -> false

false == []; // -> true
false == ![]; // -> true

// According to the specification

false == []; // -> true

toNumber(false); // -> 0
toNumber([]); // -> 0

0 == 0; // -> true

false == ![]; // -> true

![]; // -> false

false == false; // -> true

Abstract Equality Comparison

clip-path is the Best css trick for you as frontend developer2023–2024

FADHILI Josue — Mon, 18 Sep 2023 16:09:15 +0000

clip-path

Introduction

Welcome, fellow frontend developers, to the exciting world of CSS! In this blog post, we're going to delve into one of the most powerful and versatile tools in your CSS toolkit: clip-path. Over the next few minutes, we'll uncover its hidden potential and demonstrate how it can take your web designs to the next level.

Chapter 1: Understanding clip-path
Before we dive into the tricks, let's first get a solid grasp of what clip-path is and how it works. We'll cover:

A brief overview of clip-path and its purpose in CSS.
How it differs from other CSS properties.
Basic syntax and usage examples.

Chapter 2: Creating Geometric Shapes with clip-path
One of the most intriguing aspects of clip-path is its ability to create complex shapes with ease. In this section, we'll explore:

How to use clip-path to craft various geometric shapes like circles, triangles, and polygons.
Practical examples of these shapes in real-world design scenarios.

codes

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Geometric Shapes with clip-path</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="circle"></div>
  <div class="triangle"></div>
  <div class="custom-shape"></div>
</body>
</html>

CSS (styles.css):

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.circle {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  clip-path: circle(50%);
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 87px 50px;
  border-color: transparent transparent #e74c3c transparent;
  margin-top: 20px;
}

.custom-shape {
  width: 200px;
  height: 100px;
  background-color: #2ecc71;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

Chapter 3: Custom Clipping Paths
Unleash your creativity! clip-path allows you to define your own custom clipping paths. We'll discuss:

The process of creating custom paths using SVG or CSS.
Practical applications, such as creating unique image masks and dynamic UI elements.

codes

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Clipping Paths</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="custom-shape"></div>
</body>
</html>

CSS (styles.css):

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.custom-shape {
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
  clip-path: url(#customPath);
}

In this example, we're using an SVG clipping path defined in an inline SVG element.
SVG (styles.css):

<svg width="0" height="0" style="position:absolute;">
  <defs>
    <clipPath id="customPath" clipPathUnits="objectBoundingBox">
      <polygon points="0.1 0, 0.9 0, 1 0.5, 0.9 1, 0.1 1, 0 0.5" />
    </clipPath>
  </defs>
</svg>

This SVG code defines a clip path named "customPath" with a polygon shape. The clipPathUnits="objectBoundingBox" attribute ensures that the polygon's coordinates are relative to the bounding box of the element it's applied to.

you can adjust the sizes and colors to fit your specific design.

Chapter 4: Animating clip-path for Engaging User Experiences
In this section, we'll take clip-path to the next level by adding animations. We'll cover:

Transitioning between different clip-path shapes. Creating captivating hover effects to enhance user interaction.

codes

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animating clip-path</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box"></div>
</body>
</html>

CSS (styles.css):

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.box {
  width: 150px;
  height: 150px;
  background-color: #f39c12;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  transition: clip-path 0.5s ease;
}

.box:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Chapter 5: Combining clip-path with Other CSS Properties
clip-path is even more powerful when used in tandem with other CSS properties. We'll explore:

Techniques for combining clip-path with features like gradients, shadows, and transformations.
How to achieve stunning visual effects through creative layering.

codes

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Combining clip-path with Other CSS Properties</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <img src="image.jpg" alt="Sample Image">
    <div class="caption">
      <h2>Awesome Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</body>
</html>

CSS (styles.css):

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.card {
  width: 300px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card img {
  width: 100%;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

.caption {
  padding: 20px;
  text-align: center;
}

.caption h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.caption p {
  font-size: 1em;
  color: #555;
}

In this example, we're combining clip-path with other CSS properties to create a card with an image that has a clipped shape.

Please make sure to replace the src attribute of the img element with the actual path to your image file. Additionally, adjust the styles, sizes, and colors to fit your specific design.

Final Thoughts

Thank you for joining us on this journey through the world of clip-path and CSS wizardry. As you implement these tricks into your own projects, remember that experimentation is key. Embrace the creative process, and let your imagination run wild!

Conclusion: Elevate Your Designs with clip-path

Congratulations! You've now unlocked the full potential of clip-path and gained valuable insights into how it can revolutionize your frontend development workflow. Incorporate these techniques into your projects, and watch your designs come to life!

you can readmore about the trick by following the links below:
link1
link2

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

Unveiling JavaScript Tricks:[] is equal ![]?

[] is equal ![]

💡 Explanation:

true is not equal ![], but not equal [] too

💡 Explanation:

clip-path is the Best css trick for you as frontend developer2023–2024

codes

codes

codes

codes

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

`[]` is equal `![]`

`true` is not equal `![]`, but not equal `[]` too