javascript

Today I learned that javascript has a handy built-in function called URLSearchParams() that you can use to build a url query string from an object. const petfinderData = { key: "12345", shelterID: "abc00", count: 20, animals: ["dogs", "cats"], }; const query = new URLSearchParams(petfinderData); // returns "key=12345&shelterID=abc00&count=20&animals=dogs%2Ccats" const queryString = query.toString(); Read more: https://gomakethings.com/how-to-build-a-query-string-from-an-object-of-data-with-vanilla-js/ You’ll want to be careful with complex object list arrays since it serializes to a form like animals=dogs,cats, which not be the format the server expects....

Today I learned about console.trace() when I needed to find out where a global function was being overridden: Object.defineProperty(window, 'setErrorMessage', { set(value) { console.trace('Global variable set:', value); } }); This little snippet outputs a stack trace anywhere code was trying to define this global function and let me right to the culprit. See more about .trace()

Today I learned that there are 8 versions of UUID! I was vaguely aware that there were some older versions that aren’t recommended but just this past May the RFC was approved that added versions 6, 7, and 8. Basically, v4 is a good default if you just need a good unguessable random ID. For javascript, this is now built into browsers via crypto.randomUUID() — or in dotnet with Guid.NewGuid()....

Today I learned that you can cancel fetch requests using the AbortController. This used to be a major shortcomming of fetch but apparently it’s been part of the web platform since 2019. This post also explains some additional use cases for the AbortController.

Today I learned that the matchMedia() javascript method lets you match against media queries and respond accordingly with javascript. That could look something like this: const mediaQuery = window.matchMedia('(min-width: 768px)') // Check if the media query is true if (mediaQuery.matches) { // Then trigger an alert alert('Media Query Matched!') } You can also add an event listener to the mediaQuery which you’ll want to do to respond to the user changing the size of the window — see this post for details on how to do that....

Today I learned about numeric separators in javascript. They are a small bit of syntactic sugar to make large numeric literals easier to read by letting you insert underscores anywhere in the number. For example, if you need to specify 10mb in byes, instead of 10485760, you can write it as: const maxUploadSize = 10_485_760; They were added in ECMAScript 2021 and in C# 7.

Today I learned that javascript gained a nullish coalescing operator (??) in ECMAScript 2020. const result = potentialEmpty ?? fallbackValue; It return the right operand if the left operand is null or undefined so for me this is a convenient alternative to using the OR (||) operator if I don’t want the fallbackValue on falsy values like 0 or an empty string.

Today I learned that the isNaN global function in javascript isn’t very useful for validating numbers. The main reason is that it returns false for an empty string since it coerces it to 0. To add to the confusion, Number.isNaN() behaves slightly differently since it just checks for the value NaN. For validation, I found Number.isInteger() to be the most useful.

Today I learned that there’s a new javascript array method that returns a new array with the element at the given index replaced with the given value. Convenient for manipulating array values without mutating the original array. const arr = [1, 2, 3, 4, 5]; console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5] console.log(arr); // [1, 2, 3, 4, 5]

Today I learned that the javascript array method .every() will always return true for an empty array. [].every((x) => x > 1); // true [].every(() => true); // true [].every(() => false); // true For me at least, this was a bit surprising and I realized I’d been thinking about this function works incorrectly. Your first thought might be that this is another one of javascript’s quirks, but this is actually how most languages implement similar functions including Rust, Python, and C#:...