These 4 New JavaScript Methods are a game changer!

Samir — Sat, 02 Nov 2024 17:28:05 +0000

In July 2023, ECMAScript released several new specifications for JavaScript. Some of the features include new Array methods that do not modify the existing array. In this blog, we will talk about three of them (one from 2024) that you must know if you want to be up-to-date with the latest trends in Web and JavaScript!

Array.toSorted()

The original Array.sort() sorts elements of an array in-place. Sometimes you might not want this behavior. In programming, it's generally a good practice to avoid modifying existing values and instead return a new version.

Array.toSorted() solves this problem by returning a new array with the sorted elements as described in the callback function!

I am especially fond of this feature as I had already started using it in my code long before VSCode and web browsers had proper support for it!

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed() is a new addition that provides an immutable way to reverse an array. Unlike Array.reverse(), which modifies the original array, Array.toReversed() returns a reversed copy of the array, leaving the original unchanged.

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

Array.toSpliced() offers a non-destructive way to remove, replace, or add elements within an array. Traditional Array.splice() modifies the array directly, but Array.toSpliced() creates a new array with the changes applied, leaving the original array unchanged. This can be beneficial when you need to apply changes without affecting the source data.

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

Object.groupBy()

This method was officially released in ES2024, but was still available before with polyfills and had already advanced to a later stage of ECMAScript.

Object.groupBy() groups items of a given array based on a specific object property. This is extremely useful and can come in very handy when you want to group a certain list of objects and then iterate over them accordingly in a key-value structure. An interesting fact about this method is that it was not implemented as a prototype method of an array due to web compatibility issues. (Many older JavaScript libraries were already implementing some code within the Array.prototype.group() namespace, that’s why!)

BONUS: Implementing your own `Object.groupBy()` to group by multiple elements

Eventually, you may also need to group by multiple properties. The original Object.groupBy() groups at only one level.

Implement the code below in your project to group elements by multiple properties!

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

Example:

const data = [
  { country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' },
  { country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' },
  { country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' },
  { country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' },
  { country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' },
]

let groupedData = multiLevelGroupBy(data, [
  item => item.country,
  item => item.state,
  item => item.city
]);

console.log(groupedData);

/* Expected Output: */
{
  USA: {
    California: {
      'Los Angeles': [{ country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' }],
      'San Francisco': [{ country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' }]
    },
    New York: {
      'New York City': [{ country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' }]
    }
  },
  Canada: {
    Ontario: {
      Toronto: [{ country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' }]
    },
    Quebec: {
      Montreal: [{ country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' }]
    }
  }
}

The End!

If you have made it to the end of this article, Thank you so much for reading! 💝

How to Access raw.githubusercontent.com on JIO Networks

Samir — Tue, 12 Dec 2023 15:39:51 +0000

If you are a programmer and use GitHub for your projects, or to access other repository code, you may sometimes need to get the raw content of a file

But, if you use JIO as your internet service provider, you may not be able to access the site, and therefore, you won't be able to copy or see the file contents in raw format.

Why is this happening?

Internet service provider Jio has blocked the domain on their Cellular and Fiber connections. The reasons are not clear as to why Jio has done it. Although they should not be blocking it in the first place.

Any developer using Jio Internet may find this irritating, but worry not! We can fix this.

I will show you how you can unblock raw.githubusercontent on your Android device and Windows desktop.

How to unblock raw.githubusercontent on your Jio Internet?

On Android

Go to your device's settings, and then connections.
Find an option named "Private DNS" under your connections tab.
Your private DNS is most likely set to 'Automatic'. Change it to the Designated private DNS which allows you to set the DNS yourself.
Now, enter the custom DNS provider name. Choose one of these hostnames below:
- dns.google.com
- dns.adguard.com
Save the settings and try accessing this raw file link. It should work now! 🎉

On Windows

Make sure to connect your Jio internet to your desktop first.
Go to Control Panel 👉 Network and Internet 👉 View network status and tasks
Click on your network name (where it's written Access type: Internet & Connections: Your internet name).
Click on Properties.
Under the "This connection uses the following items:" section, double-click on Internet Protocol Version 4 (TCP/IPv4) (or after selecting it, click on properties).
Select "Use the following DNS server addresses" and then enter the following values in their corresponding fields:
- Preferred DNS server: 8.8.8.8
- Alternate DNS server: 8.8.4.4
Save the settings and try accessing this raw file link.

Conclusion

In both of these OS guides, we can see that we would have to configure a manual DNS resolver to bypass the restrictions. If you are on a different OS such as Linux or MacOS, refer to this article which provides specific guides on configuring DNS for each OS platform.

If this did not work out for you, or you think this article can be improved, then let me know in the comments section! If you have made it to the end, Thank you for your time. 💖

DEV Community: Samir

These 4 New JavaScript Methods are a game changer!

Array.toSorted()

Array.toReversed()

Array.ToSpliced()

Object.groupBy()

BONUS: Implementing your own `Object.groupBy()` to group by multiple elements

The End!

How to Access raw.githubusercontent.com on JIO Networks

Why is this happening?

How to unblock raw.githubusercontent on your Jio Internet?

On Android

On Windows

Conclusion

Additional references:

DEV Community: Samir

These 4 New JavaScript Methods are a game changer!

Array.toSorted()

Array.toReversed()

Array.ToSpliced()

Object.groupBy()

BONUS: Implementing your own Object.groupBy() to group by multiple elements

The End!

How to Access raw.githubusercontent.com on JIO Networks

Why is this happening?

How to unblock raw.githubusercontent on your Jio Internet?

On Android

On Windows

Conclusion

Additional references:

BONUS: Implementing your own `Object.groupBy()` to group by multiple elements