JavaScript Event.defaultPrevented

Whether you started with the old on_____ property or addEventListener, you know that events drive user experiences in modern JavaScript. If you’ve worked with events, you know that preventDefault() and stopPropagation() are frequently used to handle events. One thing you probably didn’t know: there’s a defaultPrevented proptery on events! Consider the following block of code: // Specific to a link const link = document.querySelector('#my-link'); link.addEventListener('click', e =e.preventDefault()); // A larger document scope document.addEventListener('click', documentClickHandler); function documentClickHandler(event) { if (event.defaultPrevented) {// Using the property... more →
Posted in: JavaScript

JavaScript String replaceAll

Replacing a substring of text within a larger string has always been misleading in JavaScript. I wrote Replace All Occurrences of a String in JavaScript years ago and it’s still one of my most read articles. The confusion lies in that replace only replaces the first occurrence of a substring, not all occurrences. For example: 'yayayayayaya'.replace('ya', 'na'); // nayayayayaya To replace all instances of a substring, you’ve needed to use a regular expression: 'yayayayayaya'.replace(/ya/g, 'na'); // nananananana Using regular expressions is certainly powerful but let’s be honest — oftentimes we simply want to replace all instances of a simple substring that shouldn’t... more →
Posted in: JavaScript

Immediately Executing setInterval with JavaScript

Employing setInterval for condition polling has really been useful over the years. Whether polling on the client or server sides, being reactive to specific conditions helps to improve user experience. One task I recently needed to complete required that my setInterval immediately execute and then continue executing. The conventional and best way to immediately call a function at the beginning of a setInterval is to actually call the function before the initial setInterval` is called: myFunction(); setInterval(myFunction, 1000); // Every second If you truly want to isolate the function call to the setInterval, you can use this trick of self-executing function that returns itself: // Use... more →
Posted in: JavaScript

Get a Random Array Item with JavaScript

JavaScript Arrays are probably my favorite primitive in JavaScript. You can do all sorts of awesome things with arrays: get unique values, clone them, empty them, etc. What about getting a random value from an array? To get a random item from an array, you can employ Math.random: const arr = [ "one", "two", "three", "four", "tell", "me", "that", "you", "love", "me", "more" ]; const random1 = arr[(Math.floor(Math.random() * (arr.length)))] const random2 = arr[(Math.floor(Math.random() * (arr.length)))] const random3 = arr[(Math.floor(Math.random() * (arr.length)))] const random4 = arr[(Math.floor(Math.random() * (arr.length)))] console.log(random1,... more →
Posted in: JavaScript

Building Table Sorting and Pagination in JavaScript

As part of my job in managing this blog, I check my stats frequently, and I’ve noticed that some of my more basic Vue.js articles have had consistently good traffic for quite some time. As I find myself doing more and more with "regular" JavaScript (sometimes referred to as "Vanilla JavaScript", but I’m not a fan of the term) I thought it would be a good idea to update those old posts for folks who would rather skip using a framework. With that in mind, here is my update to my post from over four years ago, Building Table Sorting and Pagination in Vue.js Raymond Camden… more →
Posted in: JavaScript

JavaScript Class Privates

One of my aspects of JavaScript that drew me to it as a young developers was that its syntax was loose and I could code quickly. As you gain experience as an engineer, you start to realize that some traditional coding structure is a good thing, even if it slows you down. Using Jest or TypeScript to add typing to your JavaScript can save you from maintenance headaches and unexpected errors, for example. While those are pre-compile tools to accomplish structure, we’ve traditionally employed vanilla JavaScript patterns to mock private variables and methods in JavaScript. Did you know, however, that browsers and the JavaScript language support a specific syntax for creating private variables... more →
Posted in: JavaScript
1 2 3 4 5 6 52