JavaScript Tips

Useful JavaScript Tips — Objects

Spread the love

Like any kind of apps, JavaScript apps also have to be written well. Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.

Picking and Reject Object Properties

We can use the Object.keys method to get the keys and pick the ones we want.

For instance, we can write:

const reject = (obj, keys) => {
  return Object.keys(obj)
    .filter(k => !keys.includes(k))
    .map(k => Object.assign({}, {[k]: obj[k]}))
    .reduce((res, o) => Object.assign(res, o), {});

In the code above, we called Object.keys to get the keys.

Then we called map to map the object key to their own object with the property value of the key as the value.

Then we used reduce to combine the objects array from map into one object with reduce .

We can call it by writing:

const obj = {
  foo: 1,
  bar: 2,
  bar: 3
const newOb = reject(obj, ['foo', 'bar']);

Using for Object Comparisons

We can use the method for comparisons. The difference between === and is that NaN equals itself.

For instance, we can write:, NaN);

and it would return true .

Create a Function to Log Values

We can create a function that logs the value and return it so that we can do both when debugging.

For instance, we can write:

const tap = (x) => {
  return x;

Then we log x and return it with the function.

It’s handy for things like:

.filter(c => tap(c.numItems > 100))

Then we can log the value of the express and return it at the same time.

Array Tricks

We can do a few things with arrays that we may not have thought of yet.

Iterating Through an Empty Array

We can create an arrays with empty slots with the array constructor.

To do that we can write:

const arr = new Array(10);

Passing in a number as its only arguments makes the constructor return array with the given number of empty slots.

Since we passed in 10, we get an array with 10 empty slots.

Populating Empty Arrays

We can use fill to populate empty arrays.

For instance, we can write:

const arr = new Array(10);
const nums = arr.fill().map((_, i) => i)

to create an array with numbers from 0 to 9.

We call fill to fill the empty slots with undefined . Then we can call map with a callback to return the array index to fill it with numbers.

Passing an Empty Parameter to a Method

We can pass in null or undefined to skip arguments.

For instance, we can write:

foo('a', null, 'b')


foo('a', undefined, 'b')

But we can also use the spread operator and write:

foo(...['a', , 'b']);

Then we can skip an entry in the array.

When we spread the entries as arguments, it’ll become undefined so we do the sam,e thing as the previous example.

Unique Array Values

We can remove duplicates from an array by converting it to a set and then convert it back to an array with the spread operator.

For instance, we can write:

const arr = [ Set([1, 2, 3, 3])];

Then we get:

[1, 2, 3]

as the value of arr .

Binding Objects to Functions

We can use bind to return a function with the value of this that we want.

for instance, if we have:

const getName = function () {

Then if we write:

const getJoe = getName.bind({ name: 'joe' });

Then would be 'joe' in getJoe since bind returns a function that has the value of this as given in the first argument.

Likewise, we can write:

const getJane = getName.bind({ name: 'jane' });

Then would be 'jane' .


We can create arrays with empty slots with the Array constructor.

Then, we can use the fill method to fill it with entries.

We can return a new object without some properties by using Object.keys and Object.assign .

Also, we can use to compare values including NaN . Therefore, it’s slightly more useful than === .

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *