location.href property vs. location.assign() method

Javascript

Javascript Problem Overview


Is there any particular advantage/disadvantage in JavaScript memory consumption between using location.href = url as opposed to location.assign(url)?

I guess I'm wondering if it takes more memory to access the method as opposed to setting the property.

Javascript Solutions


Solution 1 - Javascript

I personally prefer calling the function instead, because calling a function gives me a better impression that something is running and that is not only a value of a variable that is changing.

But probably yes, it may be true that location.href = url; is faster than location.assign(url), although it may depend on the JavaScript engine implementation, according to my tests. [Dead link to tests removed.]

Solution 2 - Javascript

I know this is old, but I stumbled on this when I was looking for a way to check my unit tests were redirecting to the correct url.

I would go with window.location.assign() if you are more concerned with testing. Using a function allows you to mock said function and check the url input parameters.

So, using jest:

window.location.assign = jest.fn();

myUrlUpdateFunction();

expect(window.location.assign).toBeCalledWith('http://my.url');

// Clean up :)
window.location.assign.mockRestore();

Solution 3 - Javascript

I always used and never had problems with:

location.href = url;

Calling a function should be slightly slower than accessing the property, but in terms of memory there should not be a big difference in my humble opinion.

Solution 4 - Javascript

> Is there any particular advantage/disadvantage in JavaScript memory consumption between using location.href = url as opposed to location.assign(url)?

NO

There is exactly zero difference.

The reason for this is simple. Every time your browser loads a new page, it starts a fresh new Javascript 'VM' with the scripts for that page running in that VM. When running either of the statements in your question, you are instructing the browser to load a new page, which means destroying the current VM (and freeing up any memory associated with it) and loading a completely new VM for the new page.

Save for any weird browser bugs the net effect is always the same. Your scripts are running in a brand new VM with the exact same memory consumption.

ulocation

If you are working with the location object in the browser and you want to be able to run this code on Node JS (e.g. for testing or for isometric code), you can use ulocation, a universal/isometric implementation of the Location object. Full Disclosure: I am the author of that package.

Solution 5 - Javascript

Tested my machine/browser, http://jsperf.com/location-href-vs-location-assign/2, for Chrome 40.0.2214.93 32-bit on Windows Server 2008 R2 / 7 64-bit

location.assign was 15% slower than location.href.

Solution 6 - Javascript

I'd like to add a difference that I experienced using both while working in React which the above answers missing.

Analyze the following snippet in React:

return (<>location.href = "www://example.com"</>)

Vs

return (<>location.assign("www://example.com")</>)

In the fonmer case you'd actually see the string www://example.com getting typed on the DOM for a split second since it renders the text before this redirection happens.

To avoid that We need to use the latter location.assign()

Solution 7 - Javascript

actually there is a difference i think

  1. location.href is a property which mean it is faster than calling a function but most importantly href property make user able to go back when clicking on back button on the browser

  2. location.replace() the user will not be able to go back to the current page.

  3. location.assign() the user will able to go back through back button like href but location.assign is better in terms of testing and mocking

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDoug WeaverView Question on Stackoverflow
Solution 1 - JavascriptPereView Answer on Stackoverflow
Solution 2 - JavascriptkieranroneillView Answer on Stackoverflow
Solution 3 - JavascriptTobias KroghView Answer on Stackoverflow
Solution 4 - JavascriptStijn de WittView Answer on Stackoverflow
Solution 5 - JavascriptMusoderelictView Answer on Stackoverflow
Solution 6 - JavascriptABGRView Answer on Stackoverflow
Solution 7 - JavascriptAndrew NaemView Answer on Stackoverflow