Forem: Akhil sai

One liner operations on Arrays

Akhil sai — Thu, 16 Jan 2020 16:38:35 +0000

Introduction

This post covers the useful snippets for operations on 2 arrays.
An array is considered as a set in mathematical terms throughout this post
Assumptions:
- Arrays are not nested
- There are 2 arrays named arrA and arrB
```
const arrA = [2,4,6,8,10];
const arrB = [3,6,9,10];
```

Intersection of 2 arrays ( A ∩ B)

const intersectionOfArrays = arrA.filter(el => arrB.indexOf(el) !== -1);
 // [6,10]

Elements Unique to ArrayA (A-B)

const uniqueToArrA = arrA.filter(el => arrB.indexOf(el) === -1);
// [2,4,8]

Elements Unique to ArrayB (B-A)

const uniqueToArrB = arrB.filter(el => arrA.indexOf(el) === -1);
// [3,9]

XOR of Arrays A and B (A ^ B)

const xorOfAandB = uniqueToArrA.concat(uniqueToArrB);
// [2,4,8,3,9]

Union of Arrays A and B (A U B)

const unionOfAandB = arrA.concat(arrB);
// [ 2, 4, 6, 8, 10, 3, 6, 9, 10 ]

Conclusion

There are several libraries out there (eg: Lodash) that do these operations efficiently.
But these snippets come in handy when you are working on pet projects that donot generally need the overhead of the libraries

Adding Event Listeners to the future DOM elements using Event Bubbling

Akhil sai — Thu, 11 Jul 2019 10:27:54 +0000

Brief Intro :

Before I get into details, let me answer the primary questions so that you need not waste time reading the whole article

Who is this for?
- Any native javascript developer who has beginner knowledge of DOM API
What will I learn?
- You will be learning how to handle the use cases where you have to add an event listener to an element that might be added to UI in the future workflow. In short, you will be learning Event Delegation

Problem Statement :

It all started when I was developing a simple MVC to-do app using vanilla javascript. I came across a requirement of listening to the click event of the task item that is going to be added to the UI when the user clicks on 'Add Task Button'.

Then I started to wonder, how can one add the event listeners to the elements that will be added in the future workflow?

Generally, one can add an event listener to an element that already exists in the DOM in the following way

 let taskDOMElement = document.querySelector('#task');
 taskDOMElement.addEventListener('click',clickHandler,false);
 function clickHandler()
 {
    //handle the event
 }

But in order to add the event listeners to the elements that are going to be appended to DOM in the future, we have to use the concept of Event Bubbling where the events bubble from the target Element to the parent Element invoking their respective event handlers

Solution :

First, we have to figure out the nearest non-dynamic element in our DOM that will not be changed in our workflow(in my case it is body element)

let rootElement = document.querySelector('body');

Then attach the same event listener to that element you want to listen from the future element(in my case, it is click event)

let rootElement = document.querySelector('body');
rootElement.addEventListener('click',function(event){},true);

Now check if the event target matches your selector(in my case its a li tag)

let rootElement = document.querySelector('body');
rootElement.addEventListener('click',function(event){
let targetElement = event.target
let selector = 'li';
if(targetElement.match(selector) {
//logic for handling the click event of li tag
 }
},true);

But to be more precise , we have to traverse from the target to the root Element for capturing the event

rootElement.addEventListener('click',function(event){
let targetElement = event.target
let selector = 'li';
while(targetElement != null) {
if(targetElement.match(selector) {
   //logic for handling the click event of li tag
   return;
  }
  targetElement = targetElement.parentElement;
 }
},true);

So after few touchups,here is the generalised function to handle the event listeners of future elements

addCustomEventListener: function (selector, event, handler) {
        let rootElement = document.querySelector('body');
        //since the root element is set to be body for our current dealings
        rootElement.addEventListener(event, function (evt) {
                var targetElement = evt.target;
                while (targetElement != null) {
                    if (targetElement.matches(selector)) {
                        handler(evt);
                        return;
                    }
                    targetElement = targetElement.parentElement;
                }
            },
            true
        );
    }

//adding the Event Listeners to all the li tasks
addCustomEventListener('li#task','click',taskClickHandler);

So, this is how you can attach event listeners to the future elements i.e., elements that are added dynamically in future

Credits

Cover Image by Alejandro Alvarez

Conclusion:

I hope you find this article useful and helpful at some point in time. I would love to hear your feedback on the article and discuss more on this

Generating random color with single line of js code

Akhil sai — Mon, 13 May 2019 15:37:11 +0000

Did you ever feel bored or tired of writing long random colors for different divs or spans just to test something simple?

So here is a simple solution. The following snippet generates a random color in hexadecimal format.



var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
//generates a random color -> #56eec7

That's it!🥳 You can place this in a function and call the function everytime you need a random color



function generateRandomColor()
{
    var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    return randomColor;
    //random color will be freshly served
}
document.body.style.backgroundColor = generateRandomColor() // -> #e1ac94
someDiv.style.color = generateRandomColor() // -> #34c7aa

Well this is the end of the trick. If you are in hurry, you can the leave post here.

But,

if you are curious to know why only the number 16777215 and toString(16) are used, then the following part covers those explanations

So, let's divide the code into 3 parts

1.Why the number `16777215`?

Well this needs a little bit of Math. We all know that the colors range from #000000(pitch black) to #ffffff(pure white).
The number of colors that exist from black to white as per rgb values are 16777216.
This can be calculated simply by using permutation&combination formula [result = m to the power of n => 16 to power of 6 => 16777216]
However our ultimate goal is to convert the number into hexadecimal format and 16777216 converts to 1000000 and 16777215 converts to ffffff. Hence we proceed with 167777215 as the highest number for hexadecimal conversion

2.Randomness

As we need some randomness in our output we are multiplying our magic number with Math.random() which returns floating number in range from inclusive of 0 to exclusive of 1 ```javascript

Math.random()*16777215
//->9653486.355498075

 - As seen the output is floating point and we need to cut down it to an integer for hex conversion and hence we use `Math.floor()` for that
```javascript


Math.floor(Math.random()*16777215)
//->96953486

3.Hexadecimal conversion

Now we are in the endgame, the last part of the code. To convert a number to hexadecimal format string , we have a beautiful method toString() which accepts the number that tells to which format it has to convert.
As we are converting to string of hexa-decimal format and hence we pass 16 as the argument as follows ```javascript

(96953486).toString(16)
//->934cee
Math.floor(Math.random()*16777215).toString(16);
//->12ef556

    - All we need to now is just attach # before the string

```javascript


var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
//->#19feac

That's it!
Kudos to you!
You have successfully completed the post
Happy C0ding!

Replacing the if-else conditionals with logical operators && and ||

Akhil sai — Fri, 10 May 2019 18:02:05 +0000

(If you are not familiar with the concept of short circuit evaluation in javascript,please go through this post )

Ok. So if you are still here, then I believe that you are familiar with the short circuit evaluation concept.Let's get started!

If-else conditionals are generally used for checking truthy and falsy values and executing the logic accordingly as shown in following example

var flag = true;

var printTrue = function()
{
//do something here
console.log('true');
}

if(flag)
{
printTrue();
}
// -> true

Let's replace the if conditional with && operator and it prints the same output as the above

flag && printTrue()
// -> true

Now lets see how can we can use logical or || operator

var flag = false;
var printFalse = function()
{
//do something here
console.log('false');
}
if(!flag)
printFalse();
//-> false 
//or we can gain the same output using || operator
flag || printFalse();
//-> false

Similar concept can be used for

fallback to default value using logical or || operator

function Car(name)
{
   var _defaultName = "Tesla";
   //if name is not passed, then fallback to default name
   name = name || _defaultName;
   this.getName = function()
   {
    console.log('The name of car is ',name);
   }
}

var car1 = new Car('Beetle');
var car2 = new Car();// no name is passed is here and hence name is undefined

car1.getName();
// The name of car is Beetle
car2.getName();
// The name of car is Tesla

checking if the object is instantiated and then access its method using the logical and && operator as shown below

var car3 = new Car('Audi');
car3 && car3.getName();
//The name of car is Audi 
var car4;
car4.getName();//prints Uncaught TypeError: Cannot read property 'getName' of undefined 
//since car4 is not yet instantiated.
//To avoid such type of error the following line can be used
car4 && car4.getName();//checks if car4 is instantiated 
//undefined

/* similarly this can be used for following usecase  */
function Car(name){
var _defaultName = 'Audi';
name = name || _defaultName;
var capitalizeTheName = function(name)
{
return name.toUpperCase();
}
var modifiedName = name && capitalizeTheName(name);
this.getName = function()
{
console.log('The modified name is '+modifiedName);
}
}
var car5 = new Car('Ferrari');
car5.getName();
//The modified name is FERRARI

There are many other use-cases where we can use the similar concept for achieving them

Hope you find this article useful. Happy Coding!

Open for questions , suggestions and discussion

Credits

Cover image: Phot by Christopher Robin Ebbinghaus

Short-circuit evaluation in Javascript

Akhil sai — Thu, 09 May 2019 16:04:57 +0000

Short circuiting is an unique way of logical operators (&& and ||) handling the operands of different types.

Logical operators are generally considered as boolean operators. However, they handle the operands of different types by converting them to Boolean primitives.

The process of conversion happens in the following way,

The evaluation of expression starts from left to right
They will convert the value on their left side to Boolean type.
Then they decide what to return, either _original left side value or _original right side value based on the operator.
If the operator is ||, it will return the left side value if it can be converted to true else it returns right side value. For example:

var testFunction = function(){
console.log("true");
return true;
}
var testFunction2 = function(){
console.log("false");
return false;
}

var result = testFunction() || testFunction2();
//  prints true in console and never executes the testFunction2()
// result -> true

result = testFunction2() || testFunction();
// prints both false and true in console since the left side expression returns false
// result -> true

In the above example, the testFunction2() never gets evaluated because

If || operator encounters truthy expression on its left side , then it doesn't care about right side expression and hence the right side expression never gets evaluated.
If || operator encounters falsy expression on its left side then it evaluates the right side expression and returns the latter

The behaviour is similar with the && operator but the other way around.

Here if it encounters the truthy expression on its left side then it returns the right side value
If the left side expression turns out to be falsy it returns the left side value and doesn't care about the right side expression

var testFunction = function(){
console.log("true");
return true;
}
var testFunction2 = function(){
console.log("false");
return false;
}

var result = testFunction() && testFunction2();
// prints true and false in console
// result -> false

result = testFunction2() && testFunction();
//prints false in console and doesnot evaluate testFunction()
//result -> false

Also remember that there are few expressions that are always falsy(converted to false)

null
undefined
NaN
empty string('',"",``)

If you are still here reading the post, then kudos to you.You have successfully reached the end of post. But before leaving, if you closely observe the concept of short circuiting, you can see resemblance with the if-else conditionals. My next post is on the usage of short circuit for fallback to default values and replacing the if-else conditionals. Hope you enjoyed the post. Feel free to post your questions and suggestions

Useful links

MDN docs on logical operators

Credits

Photo by Linh Ha from unsplash

Quick tip: How to show the literal quotes " or ' in a string in javascript

Akhil sai — Wed, 08 May 2019 02:54:57 +0000

Generally we declare a string in javascript as follows

var str1 = "Hello there!";
//or
var str2 = 'Hello there!';

There can be use cases when you need to include a double quote or a single quote inside the string.

To achieve this, we can use the escape character '\' as shown below

var str1 = "\"Hello there!\"- Obi Wan Kenobi";
// "Hello there" - Obi Wan Kenobi
var str2 = '\'Urr Arrgghh Urr\' - Chewbacca' 
// 'Urr Arrgghh Urr'- Chewbacca

Bonus Content

How to display '\' in string since '\' is considered as escape sequence? Even in this case, the escape sequence can be used to display '\'

var str3 = "1\\2 is perfectly balanced";
/* 1\2 is perfectly balanced */

For more details on string and escape characters refer: MDN Docs

Hope you find it useful!

Forem: Akhil sai

One liner operations on Arrays

Introduction

Intersection of 2 arrays ( A ∩ B)

Elements Unique to ArrayA (A-B)

Elements Unique to ArrayB (B-A)

XOR of Arrays A and B (A ^ B)

Union of Arrays A and B (A U B)

Conclusion

Adding Event Listeners to the future DOM elements using Event Bubbling

Brief Intro :

Problem Statement :

Solution :

Links

Credits

Conclusion:

Generating random color with single line of js code

But,

1.Why the number 16777215?

2.Randomness

3.Hexadecimal conversion

Replacing the if-else conditionals with logical operators && and ||

Credits

Short-circuit evaluation in Javascript

Useful links

Credits

Quick tip: How to show the literal quotes " or ' in a string in javascript

Bonus Content

1.Why the number `16777215`?