Important Javascript functions you have to know to be a better developer

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:

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:

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.

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:

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:

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:

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.

Comments

[Luke Shiru]

You might want to update a few:

• Deep Copy: You now have structuredClone, no need to implement it yourself.
• Wait: You don't need to have wait as a separate value, you can just make it into a function:

const wait = timeout => new Promise(resolve => setTimeout(resolve, timeout));

• Hide elements: Please, don't do it like that. Ideally use the hidden attribute which is more accessible and you can style it from CSS to make it hidden with visibility or display:

const toggleHidden = element => (element.hidden = !element.hidden);

• Detect device types: Another thing to avoid. Don't trust navigator.userAgent. Is better to use feature detection, not device detection. You should NEVER care about the OS/Device of the user.

---

Another thing: The "you have to know to be a better developer" part of the title ... none of these make you a better developer. And you can google any of these if needed.

Cheers!

[Tamir]

"And you can google any of these if needed." reading relaxed me instantly.

[Mateusz Skrobiś]

love that reply, thank u.

[Sanzhar Danybayev]

Bro, you're a bit harsh. Though I would agree that title looks like a clickbait.

[Sam Sonter]

I dont mind criticism. Its ok

[Sanzhar Danybayev]

You're opened minded. Much respected!

[Luke Shiru]

Why harsh? I try to always be as informative as possible in my replies. We are all constantly learning new stuff, and the author might not be aware of some of the issues with the snippets on the article, so I made clear what things should be avoided and why.

[Sanzhar Danybayev]

That's good too hear. I like your attitude. No offense. Might have misread your comment.

[Lars Feldeisen]

You should not use JSON.stringify to clone object. It leads to problems because it can't strinigfy functions,symbol etc.

JSON.stringify({ 
    fun: () => console.log('lol'), 
    s: Symbol(), 
    u: undefined, 
    n: NaN, 
    in: Infinity
})
'{"n":null,"in":null}'

Just use lodash. Or write your own deep cloning algo. Or when using the browser you can use structuredClone (there are some limits too).

[peerreynders]

Node.js 17.0.0 added structuredClone(value[, options])

Before that use v8.serialize(value) and v8.deserialize(buffer).

Then there is flatted which adds recursive references and RecursiveMap on top of JSON (still no functions, symbols, etc.).

[Sam Sonter]

noted. thanks

[Sam Sonter]

noted. thanks

[CuriousDev]

Thank you and I would like to add, that creating a clone with JSON object (with parse and stringify) has some limitations! It will not work with every object.

[codingjlu]

It's also important to remember that JSON.stringify cannot copy functions, so the "deep copy" only works for regular data types and objects.

[Jackson Kasi]

wow, thanks, it's really helpful for me :)

[Sara (Risclover)]

These seem useful. Thanks for posting!

[Sam Sonter]

you are welcome

[Tony B]

On potentially useless comment from me ... whenever I have found a case where I would like to deep clone an object, I refactor so I don't need to. There is almost never a good reason to do so.

[Sam Sonter]

hhahahhahah. what work, works

[Hélio oliveira]

There is some typos. Like DECTECT , Andriod, prama, visiabilty.

[Long Cui]

The "Wait" function is wrong. Please see @luke shiru's comment.