JavaScript Void 0 – What Does javascript:void(0); Mean?

[ad_1]

The phrase void means “completely empty space” in accordance with the dictionary. This time period, when utilized in programming, refers to a return of “nothing” – an “empty value” so to talk.

What is the void key phrase?

When a perform is void, it signifies that the perform returns nothing. This is much like features in JavaScript which return undefined explicitly, like so:

perform und() {
  return undefined
}
und()

or implicitly, like so:

perform und() {
}
und()

Regardless of the expressions and statements within the features above (provides 2 numbers collectively, finds the typical of 5 numbers, no matter), there is no such thing as a outcome returned.

Now we all know what the void key phrase is all about. What about javascript:void(0)?

What is javascript:void(0)?

If we cut up this up, now we have javascript: and void(0). Let’s have a look at every half in additional element.

javascript:

This is known as a Pseudo URL. When a browser receives this worth as the worth of href on an anchor tag, it interprets the JS code that follows the colon (:) reasonably than treating the worth as a referenced path.

For instance:

<a href="javascript:console.log('javascript');alert('javascript')">Link</a>

When “Link” is clicked, right here is the outcome:

As seen above, the browser doesn’t deal with href as a referenced path. Instead, it treats it as some JavaScript code beginning after “javascript:” and separated by semi-colons.

void(0)

The void operator evaluates given expressions and returns undefined.

For instance:

const outcome = void(1 + 1);
console.log(outcome);
// undefined

1 + 1 is evaluated however undefined is returned. To verify that, this is one other instance:

<physique>
  <h1>Heading</h1>
  <script>
        void(doc.physique.type.backgroundColor = 'purple',
             doc.physique.type.coloration = 'white'
        )
  </script>
</physique>

The results of the above code is:

Here’s one other instance:

console.log(void(0) === undefined)
// true

Combining javascript: and void(0)

Sometimes, you do not need a hyperlink to navigate to a different web page or reload a web page. Using javascript:, you may run code that doesn’t change the present web page.

This, used with void(0) means, do nothing – do not reload, do not navigate, don’t run any code.

For instance:

<a href="javascript:void(0)">Link</a>

The “Link” phrase is handled as a hyperlink by the browser. For instance, it is focusable, nevertheless it would not navigate to a brand new web page.

0 is an argument handed to void that does nothing, and returns nothing.

JavaScript code (as seen above) will also be handed as arguments to the void methodology. This makes the hyperlink component run some code nevertheless it maintains the identical web page.

For instance:

<a id='hyperlink' href="javascript:void(
  doc.querySelector('#hyperlink').type.coloration = 'inexperienced'
)">Link</a>

When the button is clicked, that is the outcome:

With void, it tells the browser to not return something (or return undefined).

Another use case of hyperlinks with the javascript:void(0) reference is that generally, a hyperlink might run some JavaScript code within the background, and navigating could also be pointless. In this case, the expressions could be used because the arguments handed to void.

Conclusion

In this simplified article, we have realized what the void operator is, the way it works, and the way it’s used with the javascript: pseudo URL for href attributes of hyperlinks.

This ensures {that a} web page doesn’t navigate to a different web page or reload the present web page when clicked.

[ad_2]

Source hyperlink

Write a comment