DEV Community: Rohit Kumawat

How to decode a URI

Rohit Kumawat — Thu, 07 Jan 2021 08:46:38 +0000

I once found myself in a situation where the URI was changing by clicking on a tag and href was adding parameters like name=dev community as a hash to make the page scrollable to a specific section. Basically, it was encoding the URI by adding a hash to it.
Now I need to decode that URI and extract the name from it. I tried several things but I forgot there is a native JavaScript method that decodes encoded URI.

decodeURI:

native javascript method
decodes encoded URI

Example:

const encodedURI = "https://example.com?name=dev%20community";

const result = decodeURI(encodedURI); 
//https://example.com?name=dev community

Note: There is also a function in Javascript encodeURI() which encodes the URI.

Kudos to undraw for such great illustrations.
Thanks for reading the article. For more tech tweets Twitter.

How to check if the occurrence of letters in the given string is the same

Rohit Kumawat — Wed, 25 Nov 2020 09:02:17 +0000

Problem statement: We have to check if all letters in a given string occurred same times.

Examples:

dev has three letters and all appeared 1 time. So it will return true.
aabbcc has three letters and all appeared 2 times. So it will return true.
xyyzzz has three letters and x appeared 1 time, y 2 times, and z 3 times. So it will return false.

Solution:

const str = "aabbcc";
const tracker = {};

for(let i = 0; i < str.length; i++) {
  if(!tracker[str[i]]) {
    tracker[str[i]] = 1;
  } else if (tracker[str[i]]) {
    tracker[str[i]]++;
  }
}

const repeatCount = Object.values(tracker);
const isTrue = repeatCount.every(el => el === repeatCount[0]);

console.log("same occurrence for all letters", isTrue); //true

In this solution:

We used for loop and check for each letter's occurrence.
Then we kept track of every letter's occurrence in an object.
And finally, we checked if the occurrence number is the same for all letters.
Time complexity for this solution is O(n).

Conclusion:

There are many solutions to this problem. This is just one of them. I will be adding different solutions in the future in the same post.

Thanks for reading and Happy coding 💻
For more tech and F.R.I.E.N.D.S. discuss, let's connect on Twitter.

First Hacktoberfest

Rohit Kumawat — Wed, 28 Oct 2020 12:40:37 +0000

I am so happy to announce that today I completed Hacktoberfest. I submitted 4 PRs and all are reviewed and merged.
This would be my first step towards open source contribution.

For discussion on tech or F.R.I.E.N.D.S let's connect on twitter.

Truncate string with ellipsis

Rohit Kumawat — Fri, 21 Aug 2020 22:01:58 +0000

Sometimes we required to adjust long strings in one line and show ellipsis(...) at the end of the string as a symbol that this text is long.

Then we can use the title attribute to show the full string on the hover of text.

To truncate long strings we will use the following CSS properties:

text-overflow: describes how hidden content should be shown to the user.
white-space: sets how white space inside an element is handled.
overflow: property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
width: width of the content.

div {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

text-overflow property is used with white-space and overflow to show this ellipsis signal if the content is clipped.

white-space: nowrap: text will not be wrapped.
overflow: hidden: hide/clip the content in fix width.
Finallytext-overflow: ellipsis: will show the sign (...) stating that this text is clipped.

Inform user about full-text content:

For that use the title attribute.
If used, the long string will be shown to the user if hovered on div like the example below.

const longText = Hey everyone, This code shows how we can truncate long strings so that they can show as an ellipsis. we can use 100% width to adjust the text in one line.

<div title={longText}>{longText}</div>

Both examples in codepen

Ellipsis in input element:

Just use text-overflow: ellipsis directly.

input {
  text-overflow: ellipsis;
}

Happy coding!

Thanks for reading!

Slice() & Splice() in JavaScript

Rohit Kumawat — Mon, 06 Jul 2020 15:31:30 +0000

There is often a confusion between slice() and splice() JavaScript array methods. It is a commonly asked question in Javascript interview for freshers.

Let's discuss how they work with examples and what's the core difference between them.

Slice():

Takes two optional parameters start index and end index.
Doesn't change the original array instead returns the copied part of array from {start index} to {end index - 1} in a new array, like the example below.

let fruits = ['apple', 'mango', 'banana', 'orange'];

fruits.slice(1,3); 
['mango', 'banana'] 
// it returns the elements in index 1(start index) and 2(end index - 1)

fruits: ['apple', 'mango', 'banana', 'orange'] 
// no change in original arary

But it only does shallow copying.[Example below]

let oldArray = [
  {id: 1, name: 'js'}, 
  {id: 2, name: 'react'}, 
  {id: 3, name: 'angular'}, 
  {id: 4, name: 'vue'}
];

let newArray = oldArray.slice(1,3);

// output: [  {id: 2, name: 'react'}, {id: 3, name: 'angular'}]


newArray[0].name = 'jquery';

console.log('new array id: 2 value', newArray[0].name); //jquery
console.log('old array id: 2 value', oldArray[1].name); // jquery

if you change the object value (reference type) in newArray it affects the value in oldArray i.e. Shallow copying.

Great Usecase: if you want a shallow copy of an array: you can use slice() method with no parameters and it will return the new copied array.

let originalArr = [1, 2, 3, 4];

let copiedArr = originalArr.slice(); // new copied [1, 2, 3, 4]

Splice():

Takes two optional parameters start index and length of elements to be deleted.
returns part of array from {start index} to the {start index + length of elements to be deleted} in a new array.
- But It changes the original array i.e. remove the elements from original array. [Example below]

let oldArray = [
  {id: 1, name: 'js'}, 
  {id: 2, name: 'react'}, 
  {id: 3, name: 'angular'}, 
  {id: 4, name: 'vue'}
];

let newArray = oldArray.splice(0, 2);

// newArray: [
  {id: 1, name: 'js'}, 
  {id: 2, name: 'react'}
] 

// oldArray: [
   {id: 3, name: 'angular'}, 
   {id: 4, name: 'vue'}
]

Usecase 1: It can also be used to replace items in the original array.
- splice() can take three parameters start index, length of items to be deleted and items to be replaced.[Example below]

let fruits = ['apple', 'mango', 'banana', 'orange'];

fruits.splice(0, 1, 'grape'); // ['apple']

// original array: 
['grape', 'mango', 'banana', 'orange'];

// grape has replaced the apple in the original array.

Usecase 2: You can add an item in particular index.[Example below]

let fruits = ['apple', 'mango', 'banana', 'orange'];

fruits.splice(2, 0, 'grape'); // []

// original array: 
['apple', 'mango', 'grape', 'banana', 'orange'];

// grape has been added to the index = 2 in the original array.

Usecase I came across several times: deleting an element by finding an index.

let fruits = [
  {id: 1, value: 'apple'}, 
  {id: 2, value: 'mango'},
  {id: 3, value: 'orange'}
];

let index = fruits.findIndex(el => el.id === 2) // 1

fruits.splice(index, 1); // [{id: 2, value: 'mango'}]

// original array: 
let fruits = [
  {id: 1, value: 'apple'},
  {id: 3, value: 'orange'}
];

Conclusion:

Both these methods can be used for deleting elements in an array.
The core differences are below in table.

slice	splice
return the copied version of deleted elements in new array	return the deleted elements in new array
doesn't change the original array	changes the original array, deleted elements are removed from the original array
no parameters, it will return the shallow copy of original array	no parameters, it will return empty array

Copying objects in JavaScript

Rohit Kumawat — Sat, 06 Jun 2020 17:56:09 +0000

Scenario:

Whenever we pass objects between components as props or as arguments in function, we need to copy that object to make sure that it doesn't affect the original one. Now we can easily make any changes to the copied object to our need.

So, following are the methods that we can use to do so:

Spread operator
Object.assign
JSON.parse and JSON.stringify

Does using any of these methods entirely copy the object? Will it also copy a nested object?

Let's look at another example:

let deepObj = {a: 4: b: {name: 'react'}, d: {name: 'angular'}};

So deepObj is a nested object and when it comes to copying nested objects i.e. objects with values as references, there comes the concept of shallow copy and deep copy.

Shallow copy: Only copies one level meaning if any of the value is a reference type then copy the reference but the exact value is not copied in the new object.
Deep copy: Copy every level of nested values even if it is a reference type like our example with deepObj object above.

Let's go one by to try copying the objects:

1. Spread Operator & Object.assign():

Example 1:

let obj1 = {a: 3, b: 4, c: "react"}, copiedObj1 = {};

copiedObj1 = {...obj1};
copiedObj1.c = "angular";

console.log(copiedObj1, obj1); 
{a: 3, b: 4, c: "angular"}
{a: 3, b: 4, c: "react"}



let obj2 = {a: 3, b: 4, c: "react"}, copiedObj2 = {};

copiedObj2 = Object.assign({}, obj2);
copiedObj2.c = "vue";

console.log(copiedObj2, obj2); 
{a: 3, b: 4, c: "vue"}
{a: 3, b: 4, c: "react"}

Both will perfectly copy the object because there is no reference type in object values and if you try to change any property that will not have any effect on copied object.

Example2:

let obj1 = {a: 3, c: [1,2]}, newObj1 = {};
newObj1 = {...obj1};
newObj1.c.push(5);

console.log(newobj1, obj1); 
{a: 3, c: [1,2,5]} 
{a: 3, c: [1,2,5]}


let obj2 = {a: 3, c: [1,2]}, newObj2 = {};
newObj2 = Object.assign({}, obj2);
newObj2.c.push(5);

console.log(newobj2, obj2); 
{a: 3, c: [1,2,5]}
{a: 3, c: [1,2,5]}

Here property c value is changes to [1,2,5] in both objects, so this is not perfectly copied because of reference type i.e. array ([1,2]). It just copies the reference to the array. Hence Spread operator and Object.assign() only does shallow copying not deep copying.

2. JSON.parse() and JSON.stringify():

var obj1 = {a: 3, b: 4, c: "react"};
var copiedObj1 = JSON.parse(JSON.stringify(obj1));
copiedObj1.c = "node";

console.log(copiedObj1, obj1); 
{a: 3, b: 4, c: "node"}
{a: 3, b: 4, c: "react"}


var obj2 = {a: 3, c: [1,2]};
var copiedObj2 = JSON.parse(JSON.stringify(obj2));
copiedObj2.c.push(5);

console.log(copiedObj2 , obj2);
{a: 3, c: [1,2,5]} 
{a: 3, c: [1,2]}

This perfectly copies the object as any change in copied object in both case doesn't have any effect in original object.

But this works only in those cases where value is converted to string first and it gets parsed again.
Following are few of the cases where it fails to copy the object.

let obj = {
  name: 'laptop',
  value: function () {
    return 100000';
  }
}

let copiedObj = JSON.parse(JSON.stringify(obj));

console.log(copiedObj);
{name: 'laptop'}

Failed -> It removed the value method from copied object.

let obj = {a: undefined, b: new Date()}

let copiedObj = JSON.parse(JSON.stringify(obj));

console.log(copiedObj);
{b: "2020-06-06T16:23:43.910Z"}

Failed -> Removed the first property and converted the date value to string;

For Shallow copying use

Spread operator
Object.assign().

For Deep copying

Use lodash library cloneDeep method (_.cloneDeep(any nested object))
Make a custom function which will handle reference types like in below example covering just one case.

function deepCopy(obj) {
    let copiedObj = {};
    for(key in obj) {
        if(Array.isArray(obj[key])) {
            copiedObj[key] = [...obj[key]];
        } else {
            copiedObj[key] = obj[key]
        }
    }
    return copiedObj;
}

var obj = {value1: 5, value2: [1,2,3]};

var copiedObj = deepCopy(obj);
copiedObj.value2.push(5);

console.log(copiedObj , obj);
{value1: 5, value2: [1,2,3,5]}
{value1: 5, value2: [1,2,3]}

Better way will be to use recursion to handle reference type

So there are other libraries exists which provide good performance event to do deep cloning as you saw it need more cumputation or you can make a custom function and add more edge case.

Conclusion: Always watch for values if any is reference types in the object that is being passed around. And use shallow and deep copying better.

Thanks for reading!

Convert an Array to an Object in JavaScript

Rohit Kumawat — Sun, 31 May 2020 13:35:19 +0000

Scenario-1: If you want to convert an array [1,2,3] to an object with keys being the index of the array, then you can use Object.assign and spread operator.

example:

let myArr = [1,2,3];

// use destructuring
{...myArr} // {0: 1, 1: 2, 2: 3}

Scenario-2: Suppose you receive a list of data in response from API and you want to cluster them with respect to date.

We can use the Array reduce method to convert that array to an object.

let myArray = [
  {data: [1,2,3], date: '1/3/2012'},
  {data: [1,2,3,10,11], date: '3/6/2012'},
  {data: [1,2,3,4,5], date: '2/5/2012'}
]

myArray.reduce((lastUpdatedValue, currentValue) => {
  lastUpdatedValue[currentValue.date] = currentValue.data;
  return lastUpdatedValue;
}, {});

output: 
{
  1/3/2012: [1, 2, 3]
  2/5/2012: [1, 2, 3, 4, 5]
  3/6/2012: [1, 2, 3, 10, 11]
}

Reduce method takes initial value which will be lastUpdatedValue on first iteration and on each iteration we can just add key & value pair to that object.

On each iteration starting from empty object, date as key and data as value will be added to the object.

Thank you for reading!