Forem: MR.H

Javascript Proxy

MR.H — Wed, 05 Apr 2023 02:45:36 +0000

The Proxy object allows you to create an object that can be used in place of the original object, but which may redefine fundamental Object operations like getting, setting, and defining properties. Proxy objects are commonly used to log property accesses, validate, format, or sanitize inputs, and so on.

Example

const target = {
    message1:'hello',
    message2:'everyone'
};
const handler  = {
   get(target,prop,receiver){
     const value = target[prop]
     if(prop ==='message1') {
        return value + ' world'
     } else if(prop ==='message2'){
        return 'Welcome '+ value
    }

    return value
   }
}

const proxy = new Proxy(target,handler);
console.log(proxy.message1) // hello world
console.log(proxy.message2) //Welcome everyone

The proxy object takes 2 arguments target which you want to create proxy and handler which

In the above example we have implemented get trap. This will intercept when you try to access the properties

If you have read this far please leave a like and share your thoughts in the comment section

Happy Coding

Capture VS Bubble

MR.H — Fri, 17 Mar 2023 02:10:39 +0000

On handling events in Javascript you may come across the bubble and capture phase. In this blog let's learn about both the phase

As you can see in the above example we have 3 div's Grandparent, parent, and child let's try to add an on-click listener to each of them.

const grandParent = document.getElementById('grandParent'),
    parent = document.getElementById('parent'),
    child = document.getElementById('child');

grandParent.addEventListener('click', () => {
    console.log('grand parent clicked')
})
parent.addEventListener('click', () => {
    console.log('parent clicked ')
})
child.addEventListener('click', () => {
    console.log('child clicked')
})

The above code will produce the following output

//Clicking the green area
child clicked
parent clicked
grandParent clicked

//Clicking the red area
parent clicked
grandParent clicked

//Clicking the blue area
grandParent clicked

As you can see in the above example event fired from the innermost element to the outermost element this phase is called Bubble. By default, events will be triggered during the bubble phase

Now let's try capture, To use capture we need to pass {capture: true} as the third argument to the addEventListener

grandParent.addEventListener('click', () => {
    console.log('grandparent clicked')
})
parent.addEventListener('click', () => {
    console.log('parent clicked')
})
child.addEventListener('click', () => {
    console.log('child clicked')
})

grandParent.addEventListener('click', () => {
    console.log('grandparent clicked from the capture')
},{capture:true})
parent.addEventListener('click', () => {
    console.log('parent clicked from the capture')
},{capture:true})
child.addEventListener('click', () => {
    console.log('child clicked from the capture')
},{capture:true})

The above code will produce the following output

//Clicking the green area
grandparent clicked from capture
parent clicked from the capture
child clicked from the capture
child clicked
parent clicked
grandparent clicked

//Clicking the red area
grandparent clicked from capture
parent clicked from the capture
parent clicked
grandparent clicked

//Clicking the blue area
grandparent clicked from capture
grandparent clicked

You can now see during the capture phase event is fired from the outermost element to the innermost element and then it will start the bubbling phase to bubble the event from the innermost element to the outermost element

Conclusion

Capture will move from the outermost element to the innermost element whereas Bubble moves from the innermost element to the outermost element

If you have read this far please leave a like and share your thoughts in the comment section

Happy Coding

I reduced loop from 100K to 1K

MR.H — Thu, 09 Mar 2023 07:14:58 +0000

On working on a project i want to return array of names for the array of email ids i have.

const users = [
   {name: 'John', email: 'john@example.com'},
   {name: 'Jane', email: 'jane@example.com'},
   {name: 'Bob', email: 'bob@example.com'}
];


function getNames(emailIds) {
   return emailIds.map((emailId)=>{
      const user = users.find((user)=>{
          return user.email === emailId
      });
      return user?.name || emailId
   })
}

As you see the above code, the time complexity is O(n*m). In other words, assume the emailIds array is of size 100 and users array size is 1000 then the above code may run 1000*100 = 100000, so in order to reduce the iterations

function getNames(emailIds) {
   const emailMap= {};

   users.forEach((user)=>{
      emailMap[user.email]=user.name
   });

   return emailIds.map((emailId)=>{
      return emailMap[emailId] || emailId
   })
}

This function first initializes an empty object emailMap. It then iterates over the users array using the forEach() method and stores each email-to-name mapping in the emailMap object, where the email is the key and the name is the value.

Now the time complexity is O(n+m). In other words, the above code may run 1000+100 = 1100

This modified approach is faster than the original version because it reduces the number of iterations needed to find a matching user object for each email ID. Instead of searching the users array for each email ID, the function only needs to perform a single iteration over the users array to create the email-to-name mappings. Subsequent lookups are done using constant-time key lookups in the emailMap object.

Thank you for reading please leave a like and share your thoughts in the comment section.

Happy Coding

Tagged templates in JavaScript

MR.H — Thu, 02 Mar 2023 03:11:13 +0000

JavaScript tagged templates are a powerful feature that allow's developers to create custom template literals that can be used to manipulate and transform data in a more flexible and expressive way.

Template literals

Template literals were introduced in ECMAScript 6 as a new way to create strings in JavaScript. They use backticks (`) instead of quotes (' or ") and allow for easy interpolation of variables using ${}. For example:

const name = "Jhon";
console.log(`Hello ${name}!!`) //Hello Jhon!!

Tagged templates

Tagged templates is also a template literal followed by a function block. For example:

const person = "Mike";
const age = 28;

function myTag(strings, ...values) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "
  const str2 = strings[2]; // "."

  const userName = values[0] // Mike
  const age = values[1] // 28

  const ageStr = age > 99 ? "centenarian" : "youngster";

  // We can even return a string built using a template literal
  return `${str0}${userName}${str1}${ageStr}${str2}`;
}

const output = myTag`That ${person} is a ${age}.`;

console.log(output);
// That Mike is a youngster.

How do tagged templates work?

In the above example myTag is called with a parsed template with array for strings as first argument and values as subsequent arguments

myTag`That ${person} is a ${age}.`

Parsed into 
strings = ['That ',' is a ','.']
values = ['Mike',28]

The strings array contains static parts of the message and values contain the dynamic parts of the text, myTag function is used to manipulate the text.

Use cases for tagged templates

1) Localize strings

function localize(strings, ...values) {
  // Use an i18n library to translate the static parts of the string
  const translatedStrings = strings.map(s => i18n.translate(s,'es'));

  // Combine the translated strings and dynamic values to create the localized string
  let result = translatedStrings[0];
  for (let i = 0; i < values.length; i++) {
    result += values[i] + translatedStrings[i + 1];
  }

  return result;
}

const name = "John";
const message = localize`Hello, ${name}! How are you?`;
console.log(message); // "Hola John Cómo estás"

In this example, the localize function uses an i18n library to translate the static parts of the string and then combines the translated strings and dynamic values to create the localized string.

2) Styled templates:

function format(strings,...values){
  let result = strings[0];

  for (let i = 0; i < values.length; i++){
      result+=`<b>${values[i]}</b>strings[i+1]`
  }

  return result
}

const name = "Mike",
  age=35;
console.log(format`My name is ${name}. I am ${age} years old`)
//My name is <b>Mike</b>. I am <b>35</b> years old

Conclusion

Tagged templates are a powerful feature of JavaScript that can be used for a variety of purposes. They allow developers to create custom template literals that can be used to manipulate and transform data in a flexible and expressive way.

If you have read until the end, leave a like and share your thoughts in the comment section

Happy coding

How a single line code change, improved my performance

MR.H — Sun, 26 Feb 2023 14:01:24 +0000

I was experimenting with javascript for a project i was working on. I tried to log 0 to 1 Million in console because, why not?

I ran the below code

console.time('time')
for (let i=0;i<=1000000;i++){
console.log(i)
}
console.timeEnd('time')

The above code will run from 0 to 1M and print's time taken to complete. You can see the output for the above code

0
1
2
...
...
...
999998
999999
1000000
time: 22588.629150390625 ms

You can see the above code ran for about ~22,588 milliseconds.
I tried running the same code multiple time and got an average of ~22,600 ms.

Instead of logging inside the loop I tried to move the log outside of the loop by concatenating numbers to a string

console.time('time')
let output = ''

for (let i=0;i<=1000000;i++){
    output+=`${i}\n`
}

console.log(output)
console.timeEnd('time')

0
1
2
...
...
...
999998
999999
1000000
time: 286.9052734375 ms

As you can see above code ran 200% faster then previous code

The reason, is that the first code logs each number to the console immediately as it is generated by the loop. This means that the console has to keep up with the loop and display each number as it is generated. This can be slow, especially when dealing with a large number of iterations.

On the other hand, the second code uses a string to store all the numbers and newline characters, and then logs them in a single string. This approach is faster because it avoids the overhead of logging each number to the console separately.

In general, it's a good practice to avoid logging large amounts of output to the console, especially when dealing with large data sets. Instead, you can store the data in a data structure (like an array) and then process it later, or write it to a file for further analysis. This can help improve performance and avoid unnecessary overhead.

Thanks for reading, Please leave a like and share your thoughts in the comment section

Happy coding

Javascript structuredClone

MR.H — Thu, 23 Feb 2023 01:38:26 +0000

The structuredClone method allows you to deep clone a object including its keys and values.

const person = {
    name: 'Paul G. Reynolds',
    skills: ['javascript','react','ember','vue']
    dob: new Date('1995-11-25')
}

const person2 = structuredClone(person);
person2.name = 'Brad T. Kennedy';

console.log(person.name); //Paul G. Reynolds
console.log(person2.name); //Brad T. Kennedy

As you see in the above code altering person2.name did not alter person.name.

You might think we can achieve this by using javascript spread operator.

const person2 = {
   ...person
}

But, the problem is skills is an array altering person2.skills will alter person.skills too.

In such case you can think we can also use,

person2 = JSON.parse(JSON.stringify(person))
//{"name":"Paul G. Reynolds","skills":["javascript","react","ember","vue"],"dob":"1995-11-25T00:00:00.000Z"}

Here the problem is dob is a Date object it will loose it's properties and become string value.

Previously we need to use lot of workarounds like this to achieve deep cloning now we have a built in method structuredClone.

One thing to keep in mind when using structuredClone is, that it only works on structured objects. If you try to clone an unstructured object, you will get an error. For example:

const func = () => {
  console.log('Hello, world!');
};

const func2 = structuredClone(func); // Error!

In this example, we tried to clone a function object using structuredClone method, but it will raise an error because functions are not structured objects.

Supported browsers

Chrome	Edge	Firefox	Safari
98	98	94	15.4

Source: MDN

Conclusion

The structuredClone method in JavaScript is a powerful tool for making exact copies of objects.

If you read until the end leave a like and share your thoughts in the comment section

Happy coding

Checkout full spec: MDN StructuredClone

Names generated from https://www.fakenamegenerator.com/

Java Reflection

MR.H — Sun, 19 Feb 2023 11:28:14 +0000

Reflection is an API in java to modify the behaviour of the code in runtime. It allows options to invoke a class, methods, fields dynamically.

How it works?

Java Reflection works by examining the bytecode of a class at runtime, and providing a way to interact with its members programmatically. Reflection can be used to create new instances of classes, inspect the properties of objects, and invoke methods dynamically.

Uses of Reflection

Dynamic loading of classes : Reflection can be used to dynamically load classes at runtime. This can be useful when the name of the class is not known until runtime, or when you need to load classes from external sources such as JAR files.
Examine the properties of objects: Reflection can be used to examine the properties of objects at runtime. This can be useful for debugging or logging purposes.
Dynamically invoke methods: Reflection can be used to dynamically invoke methods on objects at runtime. This can be useful when the exact method to be invoked is not known until runtime, or when you need to invoke methods based on user input.
Creating new instances of classes: Reflection can be used to create new instances of classes at runtime. This can be useful when you need to create objects dynamically based on user input or other runtime conditions.

Limitations

Reflection is relatively slow and can have performance implications.
Reflection can make your code more complex and difficult to maintain
Reflection will make your code less secure as it has access to private methods and fields which should not be accessed directly

Example

import java.lang.reflect.Field;
import java.lang.reflect.Method;

class Test {
    public static void main(String[] args) throws Exception {
        //Creating a object for the class person
        Person employee = new Person("employee 1", "employee1@example.com");

        // Creating class object from the object using getClass() method
        Class employeeClass = employee.getClass();

        // Printing the class name using getName()
        System.out.println("The name of the class is " + employeeClass.getName());


        // Getting field by passing the field name
        Field emailField = employeeClass.getDeclaredField("email");
        emailField.setAccessible(true);
        System.out.println("The email of the employee is " + emailField.get(employee));


        Field nameField = employeeClass.getDeclaredField("name");

        //Since name is a private field. we are changing its access modifier
        nameField.setAccessible(true);
        // Updating name field value
        nameField.set(employee, "Employee 2");
        nameField.setAccessible(false);

        Method getNameWithPrefix = employeeClass.getMethod("getName", String.class);

        String updatedName = (String) getNameWithPrefix.invoke(employee, "Mr.");

        System.out.println("The name of the employee is " + updatedName);
    }
}

class Person {
    private String name;
    private String email;

    public Person(String name, String email) {
        this.name = name;
        this.email = email;
    }

    public String getName() {
        return this.name;
    }

    public String getName(String prefix) {
        return prefix + " " + this.name;
    }
}

Output

The name of the class is Person
The email of the employee is employee1@example.com
The name of the employee is Mr. Employee 2

Conclusion

Java reflection can be used to modify the behaviour of a java code in runtime and dynamically loading of classes in runtime. However, Reflection should be used carefully as it will have performance issues and security implications.

Leave a like and share your thoughts in the comment section

HAPPY CODING

Cover Photo by Zoltan Tasi on Unsplash

Javascript promise chaining

MR.H — Tue, 14 Feb 2023 12:00:26 +0000

Javascript promise is a major addition to EcmaScript6 enabling you to work on asynchronous code in a clean and organized manner.

Promise

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Source: MDN

Javascript promise represents the result of an asynchronous operation, it can be resolved with a .then() or rejected with a .catch() callbacks

Promise Chaining

Javascript chaining is a process of nesting multiple asynchronous operations where the result of one operation is passed as input to another

Here is an example


const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("Resolving first promise")
        resolve();
    }, 2000)
});

firstPromise
.then(() => {
    console.log("First promise resolved")
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("Resolving Second promise")
            resolve()
        }, 2000)
    })
})
.then(() => {
    console.log("Second promise resolved")
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("Resolving Third promise")
            resolve()
        }, 2000)
    })
}).then(() => {
    console.log("Third promise resolved")
});

output

//After 2 seconds
Resolving first promise
First promise resolved
//After 2 seconds
Resolving Second promise
Second promise resolved
//After 2 seconds
Resolving Third promise
Third promise resolved

In the above example, the firstPromise is resolved and logged after 2 seconds, then the second promise is returned and after 2 seconds it is resolved and it goes on for the third promise

This way, you can chain any number of promises together, creating a pipeline of asynchronous operations.

Error handling

One of the benefits of promise chaining is you can use .catch() method to catch errors that occur at any point in the code.

const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("Resolving first promise")
        resolve();
    }, 2000)
});

firstPromise
.then(() => {
    console.log("First promise resolved")
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("Rejecting second promise")
            reject("ERROR: Rejecting promise")
        }, 2000)
    })
})
.then(() => {
    console.log("Second promise resolved")
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("Resolving Third promise")
            resolve()
        }, 2000)
    })
}).then(() => {
    console.log("Third promise resolved")
}).catch((error) => {
    console.error("Error in promise chain")
})

Output

//After 2 seconds
Resolving first promise
First promise resolved
//After 2 seconds
Rejecting second promise
Error in promise chain

In the above example, we rejected the promise after resolving the firstPromise hence Error in promise chain is logged and the chain broke

Conclusion

JavaScript Promise Chaining is a powerful technique that allows developers to handle complex asynchronous operations in a simple, readable, and manageable way. By chaining promises together, you can break down complex operations into smaller steps, making your code easier to understand and debug. Additionally, promise chaining allows for code re-usability and helps you write more maintainable code.

Try it yourself

Try to find the output of this below code. Don't execute code immediately, try to find and compare the output by executing

const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, 2000)
});

firstPromise
.then(() => {
    console.log("First promise resolved")
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, 2000)
    })
}).then(() => {
    console.log("Second promise resolved")
}).catch((error) => {
    console.error(error)
});


firstPromise.then(()=>{
    console.log("First promise resolved in second chain")
})

Please leave a like and share your thoughts in the comments section

HAPPY CODING

Cover photo by Mike Alonzo on Unsplash