6 Things you probably did not know javascript could do natively

Originally posted on Enmascript.com

#Did you know is a new series of Enmascript where we write short and concise explanations about topics we consider might be relevant or underestimated, if you are looking for more complete in-depth articles check out our other series.

JavaScript is a language that evolves fast; for this reason, it is sometimes hard to catch up with all its features and capabilities. On this short article, we will explore some of the features that you may not know existed.

Getting query string parameters

URLSearchParams is an interface that allows us to process query string parameters, it's been around for some years now but it might surprise you to know that it is not that popular between developers, let's see how to use it:

// to get the query strings from the current url use window.location.search
const queryStrings = new URLSearchParams('?browser=chrome&action=redirect');
queryStrings.get('browser');
queryStrings.has('action');

Simple enough, here more information about the complete API, in case you are interested in the complete functionality.

Create a unique list of elements using the Set object

Creating unique lists in javascript is a common task, this is usually achieved by applying filters or for loops, but there is another way to accomplish this leveraging the Set object.

const list = [1, 2, 3, 5, 2, 5, 7];
const uniqueList = [...new Set(list)];

We pass the array of primitive values to the Set object; it creates a collection of unique values which is then converted to a list using the spread operator syntax and array literals.

Cast a list of primitive values to a different type

Sometimes endpoints or processed data from the DOM doesn't return the type of values we need, I have seen this especially happening when processing dataset properties. Let's say we have the following list:

const naiveList = ['1500', '1350', '4580'];

We want to execute a sum of all the elements in the array, in JavaScript if you "sum" two strings like '1' + '2' they will concatenate, generally, to solve this we would leverage the parseInt function, but there is another way; We can cast the elements in the array to the type of primitive we need:

const castedList = naiveList.map(Number);

castedList now contains the values with the correct Number type.

Flatten nested array values

With the rise of Single Page Applications architectures such as Redux and concepts like frontend data normalization became more popular, part of this "data normalization" trend sometimes implies having all the ids of elements listed at the same level.

Let's say we have the following list and we want to flatten it:

const nestedList = [133, 235, 515, [513, 15]];
const flattenList = nestedList.flat();

and just like that our array of ids is now flattened.

Avoid object mutations with Object.freeze

When talking about functional code, one of the things that I have been asked the most is how to stop objects from mutating, the answer to this question is always the same Freeze them:

const immutableObject = {
    name: 'Enmascript',
    url: 'https://enmascript.com'
};
Object.freeze(immutableObject);
immutableObject.twitter = 'https://twitter.com/duranenmanuel';
immutableObject.name = 'Another name';
// immutableObject is still { name: "Enmascript", url: "https://enmascript.com" }

Created Controlled objects with Object.seal

Does the same as Object.freeze but it allows you to change the values of properties that were already defined in the object, this will enable you to _control _the properties declared in an object but not the definitions:

const controlledObject = {
    name: 'Barry Allen'
};
Object.seal(controlledObject);
controlledObject.name = 'Clark Kent';
controlledObject.hero = 'Superman';
// controlledObject will return { name: "Clark Kent" }

Do you know of any other javascript features that may not be popular but useful? share them with us.

Comments

[Alok Ranjan]

Just another great article.
Thanks a lot.

[Elliot Derhay]

Wow. All that URL splitting I was doing before...

[Kunj Choksi]

Got to know about Object mutation and Object seal..
Thanks..

[Ioannis Potouridis]

How about using Object Destructuring on arrays?

const data = [
    {
        id: 1,
        name: 'John'
    },
    {
        id: 2,
        name: 'Mary'
    }
]

const { 0: { id }, [data.length - 1]: last, length } = data;

// id => 1
// last => { id: 2, name: 'Mary' }
// length => 2

[Jay Wick]

Just learnt about Object.seal! Nice!