You'll learn about JavasScript NaN in this tutorial, how to check whether a value is NaN, and how to effectively handle NaN.
\nNaN, in JavaScript, can be many things. In fact, it can be almost anything, so long as it is Not a Number. Its type is technically “number” (when evaluated with “typeof”), although it stands for Not a Number.
\nValues can become NaN through a variety of means, which usually involve erroneous math calculations (such as 0/0), or as a result of type coercion, either implicit or explicit.
\nA common example is when you run parseInt on a string that starts with an alphabetical character. This isn’t exclusive to parseInt, as it also applies when using explicit coercion with Number(), or with the unary “+” operator.
\nBefore selecting a method for checking for NaN, how should you not check for NaN?
\nNaN is a bizarre value in JavaScript, as it does not equal itself when compared, either with the loose equality (==) or strict equality (===) operator. NaN is the only value in the entire language which behaves in this manner with regards to comparisons.
\nFor example, if parseInt(“a”) returns NaN, then parseInt(“a”) === NaN will return false. This may seem strange, but it makes perfect sense after thinking about what NaN really is.
\nNaN doesn’t tell you what something is, it tells you what it isn’t.
\nThese two different strings being passed to parseInt() will both return NaN.
\nparseInt(“abc”) // NaN\nparseInt(“def”) // NaNBoth statements return NaN, but are they really the same? Maybe, but it certainly makes sense why JavaScript would disagree, given that they are derived from different string arguments.
\nHere are a few examples of strict inequality comparisons, which demonstrate the inconsistency of NaN.
\n2 !== 2 // false\ntrue !== true // false\n“abc” !== “abc” // false\n...\nNaN !== NaN // trueJavaScript has a built-in method, appropriately named “isNaN,” which checks for NaN. There is a newer function called Number.isNaN, which is included in the ES2015 spec.
\nThe difference between isNaN and Number.isNaN is that isNaN coerces the argument into a number type. To avoid complicated and unexpected outcomes, it is often advised to use the newer, more robust Number.isNaN to avoid these side effects.
\nNumber.isNaN does not perform any forcible type conversion, so it simply returns the boolean based on the parameter.
\nHere is an example of the difference between the two methods:
\nisNaN(undefined) // true\nNumber.isNaN(undefined) // falseisNaN, when passed undefined, returns true because undefined becomes NaN after number coercion. You can test this yourself by running Number(undefined). You will find that it returns NaN.
\nNumber.isNaN, on the other hand, returns false. This is because no coercion takes place, and undefined is not NaN, it is simply undefined.
\nIt is also important to note that Number.isNaN is a newer (ES2015) method in JavaScript, so browser support for Number.isNaN is not as stable as isNaN, which has been around since ES1 (1997).
\nObject.is is a JavaScript method which checks for sameness. It generally performs the same evaluations as a strict equality operator (===), although it treats NaN differently from strict equality.
Object.is(0, -0) will return false, while 0 === -0 will return true. Comparisons of 0 and -0 differ, as do comparisons of NaN. This concept is called “Same-value-zero equality.”
NaN === NaN // false\nObject.is(NaN, NaN) // trueObject.is(NaN, NaN) will in fact return true, while we already know that NaN === NaN returns false. That makes this yet another valid way to check if something is not a number.
Between the given methods of checking for NaN, the most common is to use the global isNaN function, or the ES2015 Number.isNaN method. While method #2 is valid, most people will typically use isNaN or Number.isNaN, which were created specifically for checking for NaN.
\n","frontmatter":{"title":"NaN in JavaScript: An Essential Guide","author":{"id":"Greg Sakai","github":null,"avatar":null},"date":"November 22, 2019","updated_date":null,"tags":["JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/64b659badd7a09c3d955b9c49a7f271f/1f5c5/numbers-1.webp","srcSet":"/static/64b659badd7a09c3d955b9c49a7f271f/61e93/numbers-1.webp 200w,\n/static/64b659badd7a09c3d955b9c49a7f271f/1f5c5/numbers-1.webp 400w","sizes":"(max-width: 400px) 100vw, 400px"}}}},"fields":{"authorId":"Greg Sakai","slug":"/engineering/checking-for-nan-in-javascript/"}}},{"node":{"id":"6df2af8c-e948-5ef1-be16-64e709922921","html":"What is Web Accessibility?
\nWeb Accessibility (often stylized “a11y”), is the practice of ensuring that your websites and web applications are accessible by people with disabilities of many kinds.
\nSome examples of common disabilities which we need to consider are: Blindness and visual impairment, deafness and hearing difficulties, motor skill impairment, and many more.
\nThe common categories of disabilities include:
\nThis list was taken from the W3C Web Accessibility Initiative (WAI). A link to their resources can be found at the bottom.
\nWhat is Semantic HTML? What is its correlation with Web Accessibility?
\nHTML semantics refers to conveying meaning through the use of HTML elements. An example of semantic HTML would be using <header>, <main>, <footer>, and other content-specific tags when applicable. Unsemantic HTML would be using <div> or <span> tags for every use-case.
Images and “alt” attributes
\nUsers who are visually impaired may encounter trouble when the content of a website relies on an image. Luckily, there are precautions that we - as developers - can take to ensure that their user experience does not suffer because they are unable to see images.
\nThe easiest way to do this is to add an alt attribute to all of your <img> tags. This way, screen readers will be able to describe the image to the user. Here are a few suggestions and best practices for writing alt text:
Do not include words like “image”, or “picture”. It is redundant, because the screen reader will notify the user that it’s an image. An exception to this would be if the image is of a painting, or an illustration. In this case, emphasizing that is fine, because you want the user to know that it’s specifically a painting, as opposed to any image.
\nAlways include the alt attribute, even if you don’t want the screen reader to read it. If you have a decorative image (one that is simply cosmetic, and not necessary for the site), then you can add an alt tag and assign it to an empty string. In this case, the image will be ignored by the screen reader. If this is neglected, the screen reader may read the file name instead, which may not be particularly helpful.
\nForm Labels and ARIA Labelling
\nUsers with screen readers will need some way to differentiate between multiple inputs on a single form. Without labels, the user will have a difficult time figuring out what each input is for.
\nThe easiest way to implement form labelling is with the HTML <label> tag. The <label> element uses an attribute called for in order to form a relationship with the ID of the <input> tag.
Another way to give context to a screen reader is with the ARIA aria-labelledby attribute. This attribute can be placed on (but not limited to) <input> tags, and then reference the id of the label. You can use <label for=””> in conjunction with <input aria-labelledby=””> in order to provide extra support and maximize compatibility.
Buttons and Tabindices
\nButtons should use <button> tags (or <input type=”submit”> if applicable), rather than <a>, <span>, <div>, or anything else that doesn’t have semantic meaning for clickable buttons. Often people choose to use these tags, because they want to clear all styling and not have default <button> styling. This is ill-advised because <button> tags come with a ton of functionality built-in, an important part being its tabindex. A user who isn’t able to use a mouse, and must navigate the site with their keyboard, will press the tab key to jump through interactive elements. Standard <div> tags are not tabbable by default, and assigning a tabindex to it manually can break the flow of the natural tabindices of the page.
Other Semantic HTML tags
\nOther than images and forms, there are still many ways to provide the best accessibility possible. Semantic HTML tags are useful because they describe the content and the relationship with your overall page. Using appropriate, accurate tags such as <article>, <aside>, <section> will give screen readers an idea of what the role is for those sections.
Other elements such as <h1> and other heading tags should be carefully planned before sprinkled throughout your webpage. The <h1> through <h6> tags should form direct relationships with each other in order to differentiate their meaning. Headings with lower importance (relative to the previous heading) can be used to start new subsections within its current section. Your different page sections can even use aria-labelledby to point to its corresponding heading in order to label your sections accurately.
The full W3C specification on HTML semantics can be found at: W3C Recommendation.
\nMore information about the varying disabilities and barriers can be found at: Diverse Abilities and Barriers
\n","frontmatter":{"title":"Introduction to Web Accessibility with Semantic HTML5","author":{"id":"Greg Sakai","github":null,"avatar":null},"date":"July 24, 2019","updated_date":null,"tags":["HTML5","HTML","Web Accessibility","Semantic HTML5"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/70f4300c1f86c6d8e337f40979e66dea/58556/handicapped.webp","srcSet":"/static/70f4300c1f86c6d8e337f40979e66dea/61e93/handicapped.webp 200w,\n/static/70f4300c1f86c6d8e337f40979e66dea/1f5c5/handicapped.webp 400w,\n/static/70f4300c1f86c6d8e337f40979e66dea/58556/handicapped.webp 800w,\n/static/70f4300c1f86c6d8e337f40979e66dea/cc834/handicapped.webp 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Greg Sakai","slug":"/engineering/introduction-to-web-accessibility-with-semantic-html5/"}}},{"node":{"id":"41249db1-bbc4-561f-9e26-b45636298819","html":"A basic example of a JavaScript event
\nEvents, in JavaScript, are occurrences that can trigger certain functionality, and can result in certain behaviour. A common example of an event, is a “click”, or a “hover”. You can set listeners to watch for these events that will trigger your desired functionality.
\nWhat is “propagation”?
\nPropagation refers to how events travel through the Document Object Model (DOM) tree. The DOM tree is the structure which contains parent/child/sibling elements in relation to each other. You can think of propagation as electricity running through a wire, until it reaches its destination. The event needs to pass through every node on the DOM until it reaches the end, or if it is forcibly stopped.
\nEvent Bubbling and Capturing
\nBubbling and Capturing are the two phases of propagation. In their simplest definitions, bubbling travels from the target to the root, and capturing travels from the root to the target. However, that doesn’t make much sense without first defining what a target and a root is.
\nThe target is the DOM node on which you click, or trigger with any other event.
\nFor example, a button with a click event would be the event target.
\nThe root is the highest-level parent of the target. This is usually the document, which is a parent of the , which is a (possibly distant) parent of your target element.
\nCapturing is not used nearly as commonly as bubbling, so our examples will revolve around the bubbling phase. As an option though, EventTarget.addEventListener() has an optional third parameter - which takes its argument as a boolean - which controls the phase of the propagation. The parameter is called useCapture, and passing true will cause the listener to be on the capturing phase. The default is false, which will apply it to the bubbling phase.
\nOnce you trigger the event, it will propagate up to the root, and it will trigger every single event handler which is associated with the same type. For example, if your button has a click event, during the bubbling phase, it will bubble up to the root, and trigger every click event along the way.
\nThis kind of behaviour might not sound desirable - and it often isn’t - but there’s an easy workaround...
\nEvent.stopPropagation()
\nThese two methods are used for solving the previously mentioned problem regarding event propagation. Calling Event.stopPropagation() will prevent further propagation through the DOM tree, and only run the event handler from which it was called.
\n<!--Try it-->function first() {\n console.log(1);\n}\nfunction second() {\n console.log(2);\n}\nvar button = document.getElementById("button");\nvar container = document.getElementById("container");\nbutton.addEventListener("click", first);\ncontainer.addEventListener("click", second);In this example, clicking the button will cause the console to print 1, 2. If we wanted to modify this so that only the button’s click event is triggered, we could use Event.stopPropagation() to immediately stop the event from bubbling to its parent.
\nfunction first(event) {\n event.stopPropagation();\n console.log(1);\n}This modification will allow the console to print 1, but it will end the event chain right away, preventing it from reaching 2.
\nHow does this differ from Event.stopImmediatePropagation()? When would you use either?
<!--Try it-->function first(event) {\n console.log(1);\n}\nfunction second() {\n console.log(2);\n}\nfunction third() {\n console.log(3);\n}\nvar button = document.getElementById("button");\nvar container = document.getElementById("container");\nbutton.addEventListener("click", first);\nbutton.addEventListener("click", second);\ncontainer.addEventListener("click", third);Let’s suppose we wanted to add a third function, which prints 3 to the console. In this scenario, we will also move the second function to also be on the button. We will apply third to the container now.
\nLong story short: we have two event handlers on the button, and clicking <div#container> will now print 3.
\nWhat will happen now? This will behave the same as before, and it will propagate through the DOM tree, and print 1, 2, 3, in that order.
\nHow does this tie in to Event.stopPropagation() and Event.stopImmediatePropagation()?
Adding Event.stopPropagation() to the first function, like so, will print 1, 2 to the console.
\nfunction first(event) {\n event.stopPropagation();\n console.log(1);\n}This is because Event.stopPropagation() will immediately prevent all click events on the parent from being triggered, but it does not stop any other event handlers from being called.
\nAs you can see in our example, our button has two click handlers, and it did stop the propagation to its parents. If you wanted to stop all event handlers after the first, that’s where Event.stopImmediatePropagation() comes in.
\nfunction first(event) {\n event.stopImmediatePropagation();\n console.log(1);\n}Now, the first function really will stop the parent click handlers, and all other click handlers. The console will now print just 1, whereas if we simply used Event.stopPropagation(), it would print 1, 2, and not including either would print 1, 2, 3 .
\n","frontmatter":{"title":"JavaScript Events: Bubbling, Capturing, and Propagation","author":{"id":"Greg Sakai","github":null,"avatar":null},"date":"July 22, 2019","updated_date":null,"tags":["JavaScript","JavaScript Events"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/53a3895e9c38870937a9136813ac9e10/0ce14/bubbles.webp","srcSet":"/static/53a3895e9c38870937a9136813ac9e10/61e93/bubbles.webp 200w,\n/static/53a3895e9c38870937a9136813ac9e10/1f5c5/bubbles.webp 400w,\n/static/53a3895e9c38870937a9136813ac9e10/0ce14/bubbles.webp 772w","sizes":"(max-width: 772px) 100vw, 772px"}}}},"fields":{"authorId":"Greg Sakai","slug":"/engineering/javascript-events-bubbling-capturing-and-propagation/"}}}]},"authorYaml":{"id":"Greg Sakai","bio":"Greg Sakai is a Software Developer at LoginRadius. He is currently studying Computer Science part time, and he loves all things JavaScript. In his spare time, he likes doing homework.","github":null,"stackoverflow":null,"linkedin":null,"medium":null,"twitter":null,"avatar":null}},"pageContext":{"id":"Greg Sakai","__params":{"id":"greg-sakai"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}