Размеры javascript void 0

What Is “javascript:void(0)”—A Complete Guide (Examples)

You may have encountered javascript:void(0) in an HTML document as a href attribute like this:

A common reason why developers use javascript:void(0) trick is to prevent the page from reloading when clicking a link.

This comprehensive guide teaches you:

• What javascript:void(0) does.
• How the javascript:void(0) works.
• And a bunch of examples.

Speaking of examples, I think the best way to learn what javascript:void(0) does is by taking a look at an example first.

Example—Understanding “javascript:void(0)”

If you render this HTML tag, it produces a link that shows an alert when you click it. Feel free to try it below:

When you clicked the link, did you notice how the page refreshed and jumped back to the top? Frustrating, right?

This is where adding javascript:void(0) in the href attribute helps. It prevents the page from refreshing when clicking the link.

Let’s try it! Here’s the same HTML tag you saw above. This time, the href attribute is javascript:void(0):

Below is the link that the above HTML code renders. Feel free to try it again!

This time the page didn’t refresh thanks to using javascript:void(0).

Now you understand what the javascript:void(0) is used. But the reason for such a funky expression might still be unclear to you. If you want to learn what it does, keep on reading!

The javascript:void(0) Complete Breakdown

In this section, you will learn what the expression javascript:void(0) does and why such a funky expression is needed.

The javascript:void(0) expression has two parts:

1. javascript: — This prefix tells the href attribute to expect JavaScript to be executed.
2. void(0) — This is the piece of JavaScript code that gets executed.

Let’s take a closer technical look at these two parts.

1. javascript:

If you want to place JavaScript code in an href attribute, you need to use the javascript: prefix! This tells the anchor tag’s href attribute that it should expect some JavaScript code.

Back in the day, specifying the javascript: prefix was a convention for other HTML attributes too. As an example, here’s how you would specify a JavaScript action in the onclick attribute:

Notice that these days adding the javascript: prefix inline event attributes, such as onclick, onsubmit, or onmouseover is unnecessary.

But when you place JavaScript code into an href attribute, you still need to do this! The javascript: prefix tells the href attribute you want to run a JavaScript action instead of refreshing the page.

If you run JavaScript within a href attribute and forget to use the javascript: prefix, the JavaScript code won’t run. This causes the webpage to refresh.

Next, let’s take a look at the actual JavaScript part, that is, the void(0) expression.

2. void(0)

In JavaScript, the void keyword is an operator you can call on a single expression or a value. The void operator evaluates the expression and does not return a value. Instead, it returns undefined.

Using void is useful when an expression produces a value in a place where it shouldn’t. The void operator runs the input expression but returns no value regardless of whether the expression returns a value or not.

For example, consider this piece of JavaScript:

function giveValue() < console.log("Running the function!") return 100 >const x = void(giveValue()) console.log(x)

The output of running this piece of code is:

Running the function! undefined

So even though the giveValue() function returns 100, the void operator neglects that. It surely runs the giveValue() function but doesn’t return a value. That’s why the value of x is undefined instead of 100 when logging into the console.

There are two ways you can call the void operator:

In other words, you can also do it without parenthesis. For instance, in the above expression you could have done this instead:

Anyway, one way to look at the void operator is you can use it to obtain the value of undefined. One of the popular ways to obtain the undefined value is by calling void(0). But you could just as well call void(1000) or void(“test”) to get back undefined.

So after all, javascript:void(0) means “Tell the href attribute to run the following piece of JavaScript code: void(0) instead of changing or refreshing the page.”

Why Not “javascript:undefined” Then?

In the previous section, you learned that javascript:void(0) is just a way to obtain the value undefined. In href attributes, this prevents the site from refreshing when the anchor is clicked.

Now you may wonder, why not just do javascript:undefined instead of javascript:void(0).

In modern browsers, you could indeed replace javascript:void(0) with javascript:undefined.

But the reason why javascript:void(0) is better than javascript:undefined is because, in older browsers, undefined is not a keyword! Instead, it’s a writeable property whose value you can change.

For example, in a browser that doesn’t support JavaScript 1.8.5, the following code:

console.log(undefined); var undefined = 1000; console.log(undefined);

Produces the following output:

You just successfully defined undefined to be 1000! If you now called javascript:undefined in the href attribute, the page would refresh because the JavaScript expression returns 1000 instead of undefined. To avoid this, it’s safer to use javascript:void(0) instead of javascript:undefined.

Summary

That wraps it up for today!

To recap, you learned that javascript:void(0) prevents a page from refreshing when an anchor is clicked. The javascript:void(0) consists two parts:

• The javascript: prefix that lets the href know you want to run JavaScript instead of opening a URL.
• The void(0) statement returns undefined which prevents the page from refreshing.

Thanks for reading. Happy coding!

Read Also

Источник

What Does JavaScript:Void(0) Mean?

JavaScript’s void operator evaluates an expression and returns undefined.

You can use the console to verify the same:

Note: void, irrespective of any value passed along, *always returns undefined as shown above*. But, void with the operand 0 is preferred.

There are two ways of using operand 0: void(0) or void 0. Either of them is fine.

When to use Javascript void(0)

Use javascript:void(0) if, when a link is clicked, you don’t want the browser to load a new page or refresh the same page (depending on the URL specified).

Instead it will just perform the JavaScript attached to that link.

Example 1 with Javascript void(0):

Output:

When someone clicks on the ClickMe link, an alert pops up as below:

Example 2 with Javascript void(0):

Output:

When you double click the link, an alert will popup without any page refresh.

Example 3 with Javascript void(0):

Output:

When you double click the link, an alert will popup. Closing it will also not redirect to google.com.

Example without Javascript void(0):

Output:

When you double click the link, an alert will popup, but closing it will redirect to google.com.

Conclusion

The void operator is useful when you need to prevent any unwanted page refresh or redirection. Rather, it performs some JavaScript operation.

Источник

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

Dillion Megida

The word void means «completely empty space» according to the dictionary. This term, when used in programming, refers to a return of «nothing» — an «empty value» so to speak.

What is the void keyword?

When a function is void, it means that the function returns nothing. This is similar to functions in JavaScript which return undefined explicitly, like so:

Regardless of the expressions and statements in the functions above (adds 2 numbers together, finds the average of 5 numbers, whatever), there is no result returned.

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

What is javascript:void(0) ?

If we split this up, we have javascript: and void(0) . Let’s look at each part in more detail.

javascript:

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

When «Link» is clicked, here is the result:

As seen above, the browser does not treat href as a referenced path. Instead, it treats it as some JavaScript code starting after «javascript:» and separated by semi-colons.

void(0)

The void operator evaluates given expressions and returns undefined .

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

1 + 1 is evaluated but undefined is returned. To confirm that, here’s another example:

 
Heading
   

The result of the above code is:

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

Combining javascript: and void(0)

Sometimes, you do not want a link to navigate to another page or reload a page. Using javascript: , you can run code that does not change the current page.

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

The «Link» word is treated as a link by the browser. For example, it’s focusable, but it doesn’t navigate to a new page.

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

JavaScript code (as seen above) can also be passed as arguments to the void method. This makes the link element run some code but it maintains the same page.

When the button is clicked, this is the result:

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

Another use case of links with the javascript:void(0) reference is that sometimes, a link may run some JavaScript code in the background, and navigating may be unnecessary. In this case, the expressions would be used as the arguments passed to void .

Conclusion

In this simplified article, we’ve learned what the void operator is, how it works, and how it is used with the javascript: pseudo URL for href attributes of links.

This ensures that a page does not navigate to another page or reload the current page when clicked.

Dillion Megida

Developer Advocate and Content Creator passionate about sharing my knowledge on Tech. I simplify JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / et al My YT channel: youtube.com/c/deeecode

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник