Power of window object in javascript

Most of the time we are working on javascript framework or vanilla js and using some third party library. To debug we either use console.log for that library utility or use debugger to see what is the value. The problem with this is you can't really test on the go. That is you can't try different input faster. You have to do it manually in your code. For example:

Consider you are using using date-fns for your project. And you want to test its one function lets say it is:

formatDistance(subDays(new Date(), 3), new Date())
//=> "3 days ago"

Now you want to track what will be shown if the number is 23 you have to do it manually in code to check all this thing.

Today I will let you know another way to explore these function call on the go. i.e by accessing window object

Things need to do:

1. Assign function to window object i.e Note: For this case I am using format Distance you can set any name and any other function

window.formatDistance = formatDistance

1. Now you can access this function using window object

1. Now you can play with in browser console. No need to go to and from with code editor

If you want to test in now how it works. Here is the link. Open your browser console and play with it: link

Note:

1. This is for debugging purpose. Do not ever deploy this to on production may lead to security threat. Apart from this remove once your debugging is done otherwise if you keep adding consistently it may cause memory overflow issue as well.
2. Also use some identifier like this window.__identifierName__ so that you will always remember that this is your creativity. So that you can remove it later easily 😛 (Thanks @TiagoDias for mentioning this)

Comments

[Tiago Dias]

Why not throw a debugger; statement wherever you need? And why are you suggesting people to pollute the global scope, risking to override builtin functions by mistake?

[Tom Holloway 🏕]

I think what he is suggesting is being able to expose third party libraries to the console via window let’s you play around with input variations - effectively making these things more “repl” like

[Shubham]

Yes Tom, Correct. Generally whenever you need to play with third party library. Either you go to repl like site install and play with or install locally module. But at the same time if you are working in some project it irritates to switch context. Debugger is always there but at the same time most people are not comfortable with it. This post is for beginner or newbie who struggle alot. That's why I added disclaimer its just for testing purpose. There are always better method than this once you are proficient in code. Hope you got it @TiagoDias

[Tiago Dias]

I get the objective of doing what you did, I'm just trying to warn that people might be gunning their foot since they are less proficient in code and might do something like:

import Number from 'some-number-utils';

window.Number = Number;

And from here on they're overriding the Number global function and their app might not work as expected due to this override.

Maybe advise to wrap the global variable in __ like window.__<name>__ ?

I'm not against what you did, I'm just trying to warn for possible side effects.

[Shubham]

Totally agree. Maybe some variable identifier is good idea. Thanks will update in post as well

[FJones]

Most debuggers these days let you execute console input in the current scope. So a simple breakpoint within a scope which can access the function also works. ;)

[Corentin Girard]

Libraries like jQuery or Mocha do that too

[Shubham]

Any global library can do. Its all about scope!