DEV Community: Arunkumar Palaniappan

[Series] Made Easy with JavaScript - Objects

Arunkumar Palaniappan — Thu, 01 Oct 2020 10:14:49 +0000

Welcome to series Made easy with JavaScript. In this series we will be exploring some quick and efficient methods to do day to day operations in JavaScript. This post will explore on the most used operations/actions. Let’s get started.

You can read Part 1 of this series Made easy with JavaScript Arrays at https://akrp.in

Checking for a key exists in object

Checking for an key in object by value by validating it with undefined, but is not an accurate way of testing whether a key exists because undefined itself can be a value of an key.

const obj = { key: undefined };
if(obj["key"] !== undefined) {
    // key exists
}

So, we can use in operator to check for a key.

if("key" in obj){
    // key exists
}

We can also check if a key doesn't exist using negate condition with a parenthesis.

!("key" in obj) //  key does not exist
!"key" in obj   // ERROR!  Equivalent to "false in obj"

If we want to particularly check for properties of the object instance (and not inherited properties), we can use hasOwnProperty

obj.hasOwnProperty("key") //  key exists

In terms of performance, in offers better performance that hasOwnProperty.

Iterating through all keys in an object

We can use various methods to iterate through an object in JavaScript, but the most easiest and high performing approach is using a plain for loop or Object.keys method.

// for loop
const myObject = {
    "key1": "value",
    "key2": "value"
};
for (let key in myObject) {
   console.log(key);    
   console.log(myObject[key]);
}
// Object.entries
Object.entries(myObject).forEach(([key, val]) => {
  console.log(key); 
  console.log(val); 
});
// Object.keys
Object.keys(myObject).forEach(key => {
  console.log(key);       
  console.log(myObject[key]);
});

Plain for loop and Object.keys is providing better performance that using Object.entries.

Merging two objects

We can able to merge two JavaScript objects using different methods like using Object.assign or even a plain for loop.

Object.assign provides better performance than a traditional for loop.

// using for loop
const obj1 = { "location": "delhi", "country": "us" };
const obj2 = { "pet": "dog" };

const merge = (obj1,obj2) => {
    let obj3 = {};
    for (let key in obj1) { obj3[key] = obj1[key]; }
    for (ley key in obj2) { obj3[key] = obj2[key]; }
    return obj3;
}
console.log(merge(obj1,obj2));

// using object.assign
console.log(Object.assign(obj1, obj2));

Checking if the Object is empty

We can check if the object is empty by using a traditional for loop or checking the length of object using Object.keys method and as you expect both provides a similar performance.

// Object.keys
var obj = {};

console.log(Object.keys(obj).length === 0 && obj.constructor === Object);
// for loop 
var obj = {};
const isEmpty = (obj) => {
    for(let key in obj) {
        if(obj.hasOwnProperty(key))
            return false;
    }
    return true;
}
console.log(isEmpty(obj));

Deep cloning an Object

Most widely used method for this is by using the combination if JSON.parse and JSON.stringify, we can also we Object.assign to deep clone the object.

Using JSON.parse and JSON.stringify is affecting the performance in big time, so its better to use Object.assign whenever possible to get a better performance.

// JSON.parse and JSON.strigify
const myObj = {
  string: 'string',
  number: 123,
  bool: false
}
console.log(myObj);
const clonedObj = JSON.parse(JSON.stringify(myObj));
console.log(clonedObj);
// Object.assign
const newClonedObj = Obj.assign({},myObj);
console.log(newClonedObj);

That's marks the conculsion for this part of the series - Made Easy with JavaScript. Thanks for reading and will see you soon with the Part 3 on Strings.

This article is cross-published from https://akrp.in/posts/2020/09/made-easy-with-javascript-objects

Cover Photo by Maxwell Nelson on Unsplash.

[Series] Made Easy with JavaScript - Array

Arunkumar Palaniappan — Fri, 18 Sep 2020 11:05:41 +0000

Welcome to series Made easy with JavaScript. In this series we will be exploring some quick and efficient methods to do day to day operations in JavaScript. We will start with arrays. Everyday we are doing various operations like appending, checking element, inserting, sorting, etc.., to process data in our web application. In this post we will be exploring the best ways to do these operations.

Adding new element at the beginning

There are two efficient ways to add a new element at the beginning in an array.

We can use unshift. It's like push, except it adds elements to the beginning of the array instead of the end.

unshift - adds an element to the beginning of an array
push - adds an element to the end of an array
shift - remove and return the first element of an array
pop - remove and return the last element of an array

let array = [1, 2, 3, 4];
array.unshift(0);
console.log(array);

However this will mutate the original array, if we don't want to mutate the array, we can use concat or ES6 spread ... operator, both offers best performance.

let array = [ 1, 2, 3, 4 ];
const myFirstElement = 0;
const newArray = [myFirstElement].concat(array);
console.log(newArray);
const newArraywES6 = [myFirstElement, ...array];
console.log(newArraywES6);

Empty an array

Again, we can use various methods to empty an array in JavaScript, but the most easiest and high performing approach is assigning a empty array to the variable.

// direct assignment
let array = [0,1,2,3,4];
array = [];
// using .length
let array = [0,1,2,3,4];
array.length = 0;
// using splice
let array = [0,1,2,3,4];
array.splice(0,array.length);

Remove the duplicates from an array

Again, we can use a library like lodash or use native implementation like Set or use filter to remove duplicates, but which is the efficient way?

// using Set
const array = [0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4];
const unique = [...new Set(array)];
console.log(unique);
// using filter
const array = [0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4];
const unique = array.filter(function(item, pos) {
    return array.indexOf(item) == pos;
});
console.log(unique);
// using hash table
function unique(array) {
    var seen = {};
    return array.filter(function(item) {
        return seen.hasOwnProperty(item) ? false : (seen[item] = true);
    });
}
const array = [0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4];
console.log(unique(array));

As we can see, the naive implementation with filter is performing better than other methods.

Removing a specific element from an array

We can remove a specific element using many ways, from my interactions with fellow developers, I found that most used methods are using splice, slice and own implementaion on prototype chain using for loop.

// splice
const array = [1,2,3,4,5];
console.log(array);
const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}
console.log(array); 
// prototype 
Array.prototype.removeItem = function(array) {
    for (let iterator = 0; iterator < this.length; iterator++) {
        if (this[iterator] == array) {
            for (let iterator2 = iterator; iterator2 < this.length - 1; iterator2++) {
                this[iterator2] = this[iterator2 + 1];
            }
            this.length = this.length - 1;
            return;
        }
    }
};
const array = [1,2,3,4,5];
array.removeItem(5);
// slice
let array = [1, 2, 3, 4, 5];
let index = array.indexOf(5);
let newArray = arr.slice(0,index).concat(arr.slice(index+1));
console.log(newArray);

Here native implementation with for loop is faster than other two methods.

Check if the array contains a value

Most widely used method for this is includes and using indexOf, both menthod provides best performance, so we can use any of them to check for an element in an array.

// includes
const array = [1,2,3,4,5];
console.log(array.includes(5));
// indexOf
const array = [1,2,3,4,5];
console.log(array.indexOf(5));

That's marks the conculsion for this part of the series - Made Easy with JavaScript. Thanks for reading and will see you soon with the Part 2 on Objects.

Original Posted on https://akrp.in/posts/2020/09/made-easy-with-javascript-array

Cover Photo by Bharat Patil on Unsplash

High Performance JavaScript

Arunkumar Palaniappan — Fri, 21 Aug 2020 09:09:30 +0000

In JavaScript, we can do the same thing in more than one way and its a good thing(mostly!)., even though some ways are not recommended, JavaScript has it. The only reason for such parts in JavaScript is, fixing it will break all those web application built using those bad parts.

In this post we are going to see the best and highly efficient methods for some popular and most used methods. We are not going to see how each method works instead we will be running performance tests and finding the high performing method.

Converting String to Number

As JavaScript is dynamically typed, type conversion is one of the most used feature in almost all applications. We have more than one method to convert a string to number.

const str = "100";
let num;
num = parseInt(str,10);    
num = parseFloat(str);
num = str << 0;
num = +str;
num = str*1; 
num = str-0;
num = Number(str);

parseInt is faster than other ways and I have run the performance test on these methods.

Why use `parseInt` apart from performance reasons?

parseInt detects a leading zero on the string, it will parse the number in octal base, this has changed on ECMAScript 5, the new version of the standard, but it will take a long time to get in browser implementations (it’s an incompatibility with ECMAScript 3), also parseInt will ignore trailing characters that don’t correspond with any digit of the currently used base.

parseInt(“20px”);       // 20
parseInt(“10100”, 2);   // 20
parseInt(“2e1”);        // 2

We can also pass radix and define octal value in parseInt

parseInt(“010”);       // 8, implicit octal
parseInt(“010”, 10);   // 10, decimal radix

Fastest way to iterate through for loop

Next to data type conversion, we will use a for loop in many scenarios and as always JavaScript provides more that one way to iterate through the data.

// const arr = [...];
// let assign;
//plain loop
for (let x = 0; x < arr.length; x++) {
    assign = arr[x];
}
//plain loop with cached length
const len = arr.length;
for (let x = 0; x < len; x++) {
    assign = arr[x];
}
//for-of loop 
for (let val of arr) {
    assign = val;
}
//forEach
arr.forEach(function(value, index) {
  assign = value;
});
//i-- plain loop
for (var x = arr.length; x >= 0; x--) {
    assign = arr[x];
}
//i-- plain loop with cached length
var len = arr.length;
for (var x = len; x >= 0; x--) {
    assign = arr[x];
}

As we can see, The fastest loop is plain for loop, both with and without caching length delivering really similar performance. The for loop with cached length sometimes delivered better results than the one without caching, but the difference is almost negligible.

String Concatenation

We can concat a string by using += or array.join() but which is faster?

// +=
let result = "";
for (let i = 0; i < 1e6; i++) {
    result += "test";
}
//array.join
let array = new Array(1e6);
for (let i = 0; i < 1e6; i++) {
    array[i] = "test";
}
result = array.join("");

As you can see, array.join is providing better performance that Normal String concatenation. With respect to String Concatenation, we can use array.join.

array.push vs array[length]

When building a fairly large application in JavaScript, we tend to use arrays. And again we have more than one ways to insert the data into an array. We will be doing performance tests for top two ways to insert data in an array.

//array.push
let result = [];
for (let i=0;i<2e6;i++){
   result.push(i);
}
//array[n]
let result = [];
for (let i=0;i<2e6;i++){
   result[i] = i;
}

Again there is not much of a difference between array.push and array[n], Personally I prefer accessing using length than pushing because we know exactly where we’re adding the data.

Find the Number of Keys in an Object

JSON is used in all applications and one common task for Web based application is to find the key size, so we can effectively use a graph or chart or table to visualise it.

//Object.keys
//var obj = {...};
var len = 0;
len = Object.keys(obj).length;
//for loop
var len = 0;
for(var prop in obj) {
    if(obj.hasOwnProperty(prop))
        ++len;
}
//lodash
var len = 0;
len = _.size(obj);

Object.keys(obj).length; Works by iterating over the keys to compute a temporary array and returns its length. Its more readable and clean syntax. Plus we don’t need a library or custom code required except a shim if native support is unavailable.

Thanks for reading! Yes, we skipped some other ways which we can use to perform these operations, But I hope that you had a better insight on performance metrics of these operations than before.

Lets build a faster web.

This content was originally posted on High Performance JavaScript with Arunkumar Palaniappan

Cover Image Photo by Reza Namdari on Unsplash