Important Javascript functions you have to know to be a better developer
Published: 2022-03-05 09:31:18

Hi everybody, today I am going to show examples of few important Javascript functions.


##DEEP COPY 

JavaScript allows you to deep copy an object by converting it into string and then back into object.

Here is an example:

```javascript 
const deepCopy = (obj) => { 
JSON.parse(JSON.stringify(obj)) 
};
```



## WAIT FUNCTION

Javascript can do  a ship with a setTimeout function,
but it does not return a promise object, making it hard to use in async functions. So, we have to write our own wait sleep function. 
Here is an example:

```javascript
const wait = new Promise((resolve) => setTimeout(resolve, ms));

const asyncFunction = async() => {
    await wait(1000);
    console.log("async");

};
asyncFunction();
```



## Intersection Observer
You can check if an element is visible at viewport.
I am going to make use of **intersectionObserver()** 
to check if an element is visible in the viewport.

```javascript

const callback = (entries) => {
        entries.foreach((entry) => {
                    entries.forEach((entry) => {
                        if (entry.isIntersecting) {
                            //enter target in dom element.
                            //e.g entry.target.classList.add('animated');
                            console.log(`${entry.target} is visible`);
                        }
                    });
                };

                const options = {
                    threshold: 1.0,
                };

                const observer = new IntersectionObserver(callback, options);
                const btn = document.getElementById('.btn');
                const bottomBtn = document.getElementById('.bottomBtn');

observer.observe(btn); 
observer.observe(bottomBtn);
```
Customize the behavior of the observer using the option parameter. **threshold** is the most useful attribute. 
It defines the percentage of the element that 
needs to be visible in the viewport of the browser trigger.




## HIDE ELEMENTS

you can toggle the visibility of an element using the style. visiabilty property and in case you want to remove it from the render flow, you can the **style.display** property.
Here is an example:

```javascript

const hideElement = (element, removeFromFlow = false) => {
    removeFromFlow
        ?
        (element.style.display = 'none') :
        (element.style.visibility = 'hidden');
}

```




## GET URL PARAMETERS
Easy search of parameters from a URL objects.
Here is an example:
```javascript
const url = new URL(window.location.href);
const paramterValue = url.searchParams.get("pramaName");
console.log(paramterValue);
```


## DECTECT DEVICE TYPES

Use **navigator.UserAgent** to detect the device running the app.
Here is example:

```javascript
const dectectDeviceType = () =>
    /Andriod|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
    ) ?
    "mobile" :
    "desktop";
console.log(dectectDeviceType);
```

If you dont remove an element from the render flow , it will  be hidden , but its space will be occupied. it is highly useful while rendering long list of elements.
The elements not in view can be tested using **IntersectionObserver** Can be hidden to provide a performance boost.