4 Most Useful features of the Window Object
Tags: javascript, beginners, programming, webdev
Published: 2022-03-24 18:19:13


One of the main elements of JavaScript DOM is the global Window Object.
There are many useful methods and objects it provides, but some are just more frequently used than others, which is the reason of me writing this article to introduce you to the features that I found most Useful for me. 
So Let's Get Started :
## 1. setTimeout() :
The first method that I want to talk about is `setTimeout()`.
What this method does is basically call a certain function once after a certain time which you provide.
The method takes two arguments, A callback function and time (in milliseconds) after which you want that function to run.
Imagine if you have to display a success or error modal after submitting a Form after a certain period or if you are just working on a Project Locally and want to imitate a fetch request from an API. Well, the **setTimeout()** method is the way to go.


![setTimeout in Action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl3cpvww2syaqutovlxm.png)
In the Example Above we ask if the user wants a custom theme for the website 5 seconds after the page is loaded.


## 2. setInterval() :
Many times, we want to run a function multiple times after certain intervals. `setInterval()` is the solution for such use cases.
The syntax of _setInterval()_ is similar to _setTimeout()_ as it also takes the function which you want to run and the interval in which you want the given function to run each time.
But what if you want to stop the function after certain intervals.
Well , there's also a method for just that. The `clearInterval()` takes the timerId or basically a variable in which the value of `setInterval()` is stored and stops/clears the function inside setInterval().

![setInterval example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv44f3mv4t7sg848kc18.png)
In the Above Example, the setInterval method updates our UI each second with an icremental value, thus forming a Timer.
**NOTE :**There's also a Catch with `setInterval()`, the function you call inside this can also take up time to execute, hence the interval you passed with the method can take up more time.
For this purpose, if you want to be precise with your delay at regular intervals. I'll Recommend using a nested `setTimeout()` method instead.
I could try to explain more about the why and how of both `setInterval()` and a nested `setTimeout()` in detail, but I think [this article here](https://javascript.info/settimeout-setinterval#nested-settimeout) does the job very well.

## 3. scrollTo()
One of the most Used window method, No website today is complete without a Back to Top button. I mean who doesn't love one such button at the footer of a website which when clicked saves you the hazard to use the Scrollbar to get back to the top of the Page. Also it makes navigating through different sections of your website easy and neat which also increases the User-Experience. With `scrollTo()`, you can implement this functionality with a single line. 
The method takes two arguments, the X and Y (horizontal and vertical) co-ordinates of where you want to scroll to on the page. 
the value cannot be negative.
Use this with 

```
html {
scroll-behavior: smooth;
}
```
in your CSS for enabling smooth scrolling and you are good to go.


![scrollTo example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufhqocccr9x6qwgf2gbw.png)
The above example shows a button which takes the user to the top of the Page when clicked.

## 4. Local Storage
This Last one is not a method but an Object with very useful methods.
How many times have you got your UI changes destroyed (removed) after reloading the Page. All your data with your hardwork to make the app work, Gone.
Therefore if you want to persist the changes you made to your website even after you reload the website, you'll need this object methods. Like all Objects _LocalStorage_ stores key value pairs and almost all object methods work on it like any other plain Object.
It mainly uses two methods which are `LocalStorage.setItem()` and `LocalStorage.setItem()` to save and retrieve a value from the **LocalStorage** Object. The Earlier takes key and value as arguments while the later only takes key. The keys and values stored in the LocalStorage object can only be strings. So if you want to store objects within the LocalStorage you can use the **JSON.stringify()** method like below :

```

localStorage.user = JSON.stringify({name: "John"});

// sometime later
let user = JSON.parse( localStorage.user );
console.log( user.name ); // John
```
There's also a `LocalStorage.removeItem(key)` which removes the item from the storage by it's key.
The best Use Case for using LocalStorage in Authenticating User on the Frontend. You could just save an Authorization Token sent from an API to the LocalStorage and Retrieve it later from the minimum 2MB storage space that all modern browsers provide today.

The **Window** Object is like a Magic hat which has a lot of other tricks to offer. We'll talk about what other magical things it's hiding in a future Article.

Till then,