DEV Community: Johnny Simpson

v-show vs v-if: Conditional Rendering in Vue

Johnny Simpson — Mon, 06 Feb 2023 22:01:54 +0000

v-if and v-show are two ways to conditionally render content in Vue. Both are built to conditionally render content in Vue, but in slightly different ways - which can be quite confusing. Let's take a look at how they work, and when you would use each.

v-if vs v-show

v-if in conditional rendering is the one you will want to use most of the time. That's because the way v-if works is to completely eliminate the DOM elements if the condition within it returns false. For example, below we'll try to render an <h1> tag, but only if msg is equal to 5. In the below example, msg isn't equal to 5, so the <h1> will never be rendered:

<script setup>
const msg = 6
</script>

<template>
    <h1 v-if="msg === 5">Hello World!</h1>
</template>

If we made msg reactive, and updated it, we could conditionally render the content based on a button press, like in this code:

<script setup>
  import { reactive } from 'vue'
    const msg = reactive({ setting: true })
  function updateMessage() {
    if(msg.setting) msg.setting = false
    else msg.setting = true
  }
</script>

<template>
    <h1 v-if="msg.setting === true">Hello World!</h1>
  <button @click="updateMessage">
    Update Message
  </button>
</template>

This is fine for most cases. Loading one less DOM element is usually a better idea, and can help with some styling issues you may run into. If you try to look at your code in Inspect Element, you'll see that the <h1> tag we tried to render won't exist if v-if is returning false. Pretty cool, right?

However, there are some situations where you'll want the DOM element to be rendered, though, even if v-if returns false. For example, you may want to apply some Javascript to your DOM element, even if it is supposed to be hidden. For that, you can use v-show:

<script setup>
const msg = 6
</script>

<template>
    <h1 v-show="msg === 5">Hello World!</h1>
</template>

The difference between v-show and v-if is that v-show does not eliminate the DOM element. If the expression in v-show returns false, the element will still be rendered and exist in the document, but it will have display: none applied to it in CSS.

Other differences between v-if and v-show

There are two other key differences between v-if and v-show:

v-if can be used on <template> elements, but v-show cannot.
v-if also supports v-else and v-else-if clauses, whereas v-show does not. Learn more about this here

Conclusion

v-if and v-show both have their uses. While v-if will stop something being rendered if the expression within it returns false, v-show will still render the element - but it will apply display: none to the element.

To learn more about Vue, you can check out my other articles here.

Checking if a value is a number in Javascript with isNaN()

Johnny Simpson — Sun, 05 Feb 2023 21:51:17 +0000

In Javascript, we have numerous ways to check if something is or is not a number. This is a particularly common task in Javascript, where there is dynamic typing, resulting in some unexpected things being classified as numbers. Typescript fixes some of these issues, but in this guide we'll cover how to check if something is a number in Javascript, and the pitfalls you should avoid when trying to do that.

Introducing isNaN

NaN is a special value in Javascript which stands for "Not a Number". If you try to parse a text string in Javascript as an int, you'll get NaN:

let x = parseInt("hello") // Returns NaN

NaN in itself is kind of confusing, and you don't always get results you would expect. NaN, for example, does not equal any other value, including itself. Testing this out will always return false:

5 === NaN // false
NaN === NaN // false
"foo" === NaN // false

You might think this all makes sense, until you try to run typeof NaN - which returns number. So it turns out, that NaN is of type 'number' in Javascript after all:

typeof NaN // 'number'

Ignoring these peculiarities, Javascript comes with a built in function to test if something is "not a number" known as isNaN. This function can easily be used to determine if a something would evaluate to NaN if it was run through something like parseFloat:

isNaN("hello") // true
isNaN(5) // false
isNaN({}) // true
isNaN(() => {}) // true

Since isNaN checks if something is not a number, we can use !isNaN to test if something is a number. For example, !isNaN(5) is an easy way to test if 5 is a number:

!isNaN(5)

isNaN makes sense in most cases, but since it parses numbers, it can cause some unexpected side effects. For example, Number(1n) on BigInt types throws an error, and therefore throws an error on isNaN too:

isNaN(1n) // throws error

To resolve some of these problems, Javascript just made a new method, called Number.isNaN. It's mostly the same, only it won't coerce the type to a number.

Number.isNaN vs isNaN

They are commonly thought to be the same, but isNaN and Number.isNaN work differently. isNaN essentially parses the input, and tries to make a number out of it. That's why you see problems when you try to do isNaN(1n), since Number(1n) throws an error. Instead, you can use Number.isNaN()

The difference between isNaN and Number.isNaN is that Number.isNaN does not try to coerce the input into a number. Unlike isNaN, it simply takes the input and confirms if it is equal to NaN or not. That makes

So all of the following will return false, since none of them are exactly equal to NaN:

Number.isNaN({}) // false
Number.isNaN("hello") // false
Number.isNaN(() => {}) // false
Number.isNaN("5") // false

while the following will return true, since they do return NaN:

Number.isNaN(5 / "5") // true
Number.isNaN(parseFloat("hello")) // true

Either Number.isNaN or isNaN will solve most of your number checking needs, but there is one additional way to check if something is a number in Javascript

Using isInteger and isSafeInteger to check a number in Javascript

As well as isNaN and Number.isNaN, the methods Number.isInteger and Number.isSafeInteger can help you determine if something is simply an integer, with no decimal points. Just like Number.isNaN, both of these methods do not try to evaluate the contents as a number. That means passing in a string will always return false, while a normal integer will pass the test:

Number.isInteger("5") // false
Number.isInteger(5) // true
Number.isSafeInteger("5") // false
Number.isSafeInteger(5) // true

isSafeInteger differs from isInteger by checking that the number falls outside the bigint range - i.e. within -2^53 and 2^53 - so for most use cases isInteger will do the job.

Using typeof to check if something is a number in Javascript

The final way to check if something is a number is to use typeof - again, this may fit your needs better for some cases, since typeof Math.sqrt(-1) returns number, rather than NaN - however things like 1n will still show a type of bigint:

typeof Math.sqrt(-1) // 'number'
typeof parseFloat("35") // 'number'
typeof 35 // 'number'
typeof 1n // 'bigint'

However, be careful since it is quite unreliable. Since typeof NaN returns number, you can run into some unexpected situations which you will generally want to avoid. As such, Number.isNaN remains probably the best way to check if something is or isn't a number.

Here are a few unexpected typeof situations you'll generally want to avoid:

typeof parseFloat("hello") // 'number' - since NaN is a number
typeof 5 / "5" // 'NaN' - since this evaluates typeof 5, and then divides by "5"
typeof (5 / "5") // 'number' - since this evaluates as NaN, which is a number
typeof NaN // 'number' - since NaN is of type number
typeof "5" // 'string'

Conclusion

Checking if something is or is not a number in Javascript has some complexities, but it's generally straight forward. The key points are:

isNaN is commonly used, but will evaluate its input as a number, which may cause some inputs are incorrectly judged to be NaN or throw an error.
Number.isNaN is a robust version of isNaN, which checks if something is exactly equal to NaN. It does not evaluate its contents as a number
typeof can tell you if something is a number or not, but it may lead to some unexpected situations, since NaN is also of type number.

I hope you've enjoyed this guide on checking if something is a number in Javascript. You can also check out more of my Javascript content here.

Javascript Arrays - How to Remove Duplicate Elements

Johnny Simpson — Sat, 04 Feb 2023 23:21:20 +0000

Javascript arrays can contain duplicates - which is fine most of the time, but can sometimes cause some issues. For example, if an array is supposed to only contain unique user IDs, but is taken from a data source which may contain duplicates:

let userIds = [ '123-123', '123-123', '234-234', '345-345' ]

In these cases, it can seem quite difficult to get only unique values. Is the best way to check every value against every other value in an array? That seems like a lot of work which should be simple. Fortunately, there is an easy way to make a unique array, and that is to use javascript sets.

A set can only contain unique values, so passing your array into a new Set() constructor will produce one set with unique values:

let userIds = [ '123-123', '123-123', '234-234', '345-345' ]
let uniqueUserIds = new Set(userIds)
console.log(uniqueUserIds) // Set(3) {'123-123', '234-234', '345-345'}

While sets have their own methods and these are described in my set guide here, sometimes arrays can be both more familiar and have more useful methods.

To convert your set back to an array, use the Array.from() method:

let userIds = [ '123-123', '123-123', '234-234', '345-345' ]
let uniqueUserIds = new Set(userIds)
let arrayUserIds = Array.from(uniqueUserIds)
console.log(arrayUserIds) // [ '123-123', '234-234', '345-345' ]

Now you have a perfectly unique set of array items - and you won't have to worry about processing times, or inaccuracy.

Javascript Arrays

Johnny Simpson — Sat, 04 Feb 2023 23:16:00 +0000

Arrays in Javascript are a simple, one dimensional way to store simple sets of data. Arrays are non unique, which means they can store duplicates (unlike sets). They also follow typical prototype inheritance, as with other Javascript types. That just means that all arrays inherit a certain set of specific methods, like length, some(), every(), concat(), any many more.

Making a Javascript Array

The most straight forward way to create an array is by putting items in square brackets. Each comma separated item is an array element, and the square brackets dictate where the array begins and ends:

let myArray = [ 1, 2, 3, 4, 5, 6 ]

Although this is a common way to define an array, you can also use new Array():

let myArray = new Array(1, 2, 3, 4, 5, 6)

Above we have defined a simple array of 6 items, those being all the numbers from 1 to 6. We have now stored our data in the array format. Similarly we can also store strings, or other standard Javascript types;

let myArray = [ 'hello', 'world' ]
let mySecondArray = [ (hi) => { console.log(hi) }, { some: "Object" }, 1, 2, 3, new Set([1, 2, 3, 4, 4]) ]

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]

Getting the length of an array

As mentiond before, all arrays have a standard set of methods which work on them. The most commonly used is perhaps lngth, which we can use to get the size of an array:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getArrayLength = myArray.length; // Returns 5, since there are 5 items.

Accessing properties in an array

Arrays are basically objects in Javascript, where every element is indexed by a number. As such, we can access array elements using the obj[key] method as we do in objects, where key will always be a number.

As with other languages, we usually start counting at 0, so the first item has an index of 0, and as such the second item has an index of 1. To access the second item, we may do this:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getOrange = myArray[1] // Returns 🍊

Getting the last element of an array

Since we know the length of an array, we can use that information to get the last element in an array. That looks a bit like this

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getArrayLength = myArray.length // Returns 5, since there are 5 items.
let getOrange = myArray[getArrayLength-1] // Returns 🍠

Another easy way to do this is to just use the at method:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getOrange = myArray.at(-1) // Returns 🍠

Iterating over an array

Another important feature of arrays is they are iterable. That means they work with any function expecting an iterable, or within for loops. Using for loops are an easy way to iterate over every item in an array. In the below example, we will console log every array item:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
for(let i = 0; i < myArray.length; ++i) {
    // Since i changes +1 every time, the below line will be run for every array item
    // Thus every array item will be console logged for us.
    console.log(myArray[i])
}

You may also see this written like this, which turns i into the array element itself:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
for(let i of myArray) {
    console.log(i)
}

One more loop which you might find useful is in the form let i in myArray, which instead of returning the array element returns the key for that array element:

let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
for(let i in myArray) {
    console.log(myArray[i])
}

Turning strings into arrays

If we have a string separated by a specific character, we can split it into an array. Imagine we have all of our fruit and vegetables in a string separated by '-'. If we apply the splitfunction to that string, we will get an array:

let myString = "🍅-🍊-🥬-🍓-🍠";

// Returns [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let myArray = myString.split('-');

Manipulating existing arrays

Since arrays can be modified after they are created, we have a number of methods and oprators available to modify them. For example, using the three dots operator we can easily merge two arrays:

let array1 = [ '🍅', '🍊' ]
let array2 = [ '🍅', '🍊' ]
let array3 = [ ...array1, ...array2 ] // [ '🍅', '🍊', '🍅', '🍊' ]

To add or remove elements from each end of an array, we have 4 methods - push, pop, shift and unshift.

push

We can also add new items to an array using the push method, which adds one item at the end of an array:

let array = [ '🍅', '🍊' ]
array.push('🥬')
console.log(array) [ '🍅', '🍊', '🥬' ]

pop

If we wanted to instead remove the last element of an array, we can use pop():

let array = [ '🍅', '🍊' ]
array.push('🥬')
array.pop()
console.log(array) // [ '🍅', '🍊', '🥬' ]

unshift

Similarly, we can add items to the start of an array using unshift. This is slower than push, since it requires moving everything to one side as well as inserting an item.

let array = [ '🍅', '🍊' ]
array.unshift('🥬')
console.log(array) [ '🥬', '🍅', '🍊' ]

shift

If unshift is to push, then pop is to shift - we can use shift to remove the first element of an array:

let array = [ '🍅', '🍊' ]
array.shift()
console.log(array) [ '🍊' ]

Conclusion

Arrays are really important in Javascript. Understanding how they work is crucial in understanding Javascript. Although they can seem daunting, the important things to remember are:

Javascript arrays can be defined with square brackets [] or new Array()
Arrays can contain any standard Javascript types, for example - functions, objects, or sets.
Arrays are essentially objects - each array element is given a numbered index allowing us to access it with obj[key] notation
Arrays are iterable, meaning they can be iterated on in for loops.
Arrays have a number of standard methods and properties, for example - split(), concat(), some(), pop(), shift() and length.

Javascript toLowerCase() - Convert Strings to Lowercase

Johnny Simpson — Sat, 04 Feb 2023 23:11:12 +0000

a String is a type of data in Javascript, and as with any other type of data, Strings have prototypes and therefore inherit standard methods. One of these methods is toLowerCase(), which you'll often see written as String.prototype.toLowercase(). This method turns any string from any case to just lowercase instead.

Here is a quick example:

let myString = 'HELLO WORLD'
console.log(myString.toLowerCase()) // hello world

This will work on anything which is of string type - so trying to initiate a new String() and use this method also works:

let myString = new String('HELLO!')
console.log(myString.toLowerCase()) // hello!

How to Check if Object is Empty in JavaScript

Johnny Simpson — Sat, 04 Feb 2023 23:07:09 +0000

Defining a new object in Javascript is pretty easy - but what if you want to find out if it's empty? For example, {} is an empty object, but how do we actually test that this is the case?

let myObject = {}

The easiest (and best) way to do this, is to use Object.keys(). This method turns all the keys in an object to an array, which we can then test the length of:

let myObject = {}

console.log(Object.keys(myObject).length) // Returns 0!

But wait... Javascript is well known for how it handles types strangely - and new constructors return an object with length 0:

let myFunction = function() {
    console.log("hello")
}
console.log(Object.keys(new myFunction()).length)

Fortunately, we can check if something is an object by checking its constructor property:

console.log(function myFunction() {}.constructor) // Function
console.log({}.constructor) // Object

Therefore, we can check if an object is empty if its constructor is an Object, and it has an Object.keys() value of 0:

let empty = {}
let isObjEmpty = (obj) => {
    return Object.keys(obj).length === 0 && obj.constructor === Object
}

console.log(isObjEmpty(empty)); // Returns true, Object is empty!

This will not work if some keys are non-enumerable, though. Depending on your use case, this might be fine - but let's look at how to check for non-enumerable properties next.

Including Non-Enumerable keys

It is possible to define keys on an Object which are non-enumerable. That means they won't show up in for loops or in Object.keys.

Fortunately, we can use Object.getOwnPropertyNames to get all non-enumerable and enumerable keys on an object. Therefore, to check if an object is empty and check for both enumerable and non-enumerable keys, we only have to change Object.keys to Object.getOwnPropertyNames:

let empty = {}

// Example: Add a non-enumerable property to our object using defineProperty. All properties added with defineProperty are non-enumerable by default.

Object.defineProperty(obj, 'someProp', {
  value: "non-enumerable property",
  writable: true
})

let isObjEmpty = (obj) => {
    return Object.getOwnPropertyNames(obj).length === 0 && obj.constructor === Object
}

console.log(isObjEmpty(empty)); // Returns false

Now we have a function which can tell you if any object is empty, and accounts for both numerable and non-numerable properties.

Javascript Promise.all() - Everything you need to know

Johnny Simpson — Sat, 04 Feb 2023 23:02:58 +0000

The Promise.all() method in Javascript is a function which accepts many promises, and then does something only after they have all been settled. From all the promises you enter into it, it creates a new promise which then waits for each promise to finish, before continuing. That ultimately means you can wait for multiple things to finish before you fire something else.

This method is particularly useful for UI development - for example, if you want a loading symbol to show on the screen until multiple promises conclude, then Promise.all() provides an easy way to do that. Let's look at how it works.

The Javascript Promise.all() method

Promise.all() accepts an iterable of promises. All that means is it can accept anything that could be iterated over - like an array. You can't put objects or single promises in it. Let's look at a simple example which utilises timeouts:

let myPromise = () => {
    return new Promise((resolve) => {
        setTimeout(function() {
            resolve('firstPromise')
        }, 500)
    })
}

let mySecondPromise = () => {
    return new Promise((resolve) => {
        setTimeout(function() {
            resolve('secondPromise')
        }, 800)
    })
}

Here we have two timeouts, the longest of which takes 800ms. We want the console log the values of each after both are finished. The easiest way to do this is with Promise.all():

Promise.all([ myPromise(), mySecondPromise() ]).then((data) => {
    console.log(data) // Console logs [ 'firstPromise', 'secondPromise' ]
})

As you can see, Promise.all() is thennable, and the data returned is an array of the result from each promise. So since we passed in myPromise, mySecondPromise, we get the data of each in an array, in the same order.

While it might be tempting to use await like so:

let myPromiseFinish = await myPromise()
let mySecondPromiseFinish = await mySecondPromise()
console.log([ myPromiseFinish, mySecondPromiseFinish ])

This is actually less efficient. await causes both functions to run one after another. That means that by using await, the total time taken to finish both promises will be 1300ms. Promise.all() lets you run both promises concurrently, meaning that the total operation can take around 800ms - this is quite useful to know if you are looking to optimise your code.

Expanding promise results using Promise.all()

Since Promise.all() will return an array of results, and also creates a new promise, we can use await with Promise.all(), and capture its output like so:

let [ myPromiseResult, mySecondPromiseResult ] = await Promise.all([ myPromise(), mySecondPromise() ])

Now both of the results of our promises are available once Promise.all() finishes processing both. Pretty cool, right?

Promise Rejection

It's important to note that if your promise fires reject instead of resolve, Promise.all() will immediately reject too. If you are unfamiliar with promise rejections, its when you use the reject function instead of the resolve function. Below, the promise will always reject and throw an error Uncaught firstPromise:

let myPromise = () => {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            reject('firstPromise')
        }, 500)
    })
}

So, if a promise in your Promise.all() set rejects, be sure to anticipate that Promise.all() will also reject.

Conclusion

Promise.all() is a really useful way to simplify your code, and also speed it up in some instances - by letting you do promises concurrently. If you're new to Javascript, learning about how promises and async functions work in Javascript is tricky, so I wrote another guide on that - you can learn more about promises here.

Javascript innerHTML

Johnny Simpson — Sat, 04 Feb 2023 22:55:16 +0000

In Javascript, we have lots of different ways to manipulate DOM elements. DOM elements are the HTML elements we define when we write our scripts. Once we are targetting a particular DOM element, it's often useful to set its contents with new HTML content, or to retrieve its HTML content for use somewhere else.

To do this, we use innerHTML. All Javascript DOM-type elements have an innerHTML property attached. Selecting HTML elements with Javascript can be learned about in a lot of depth here, however the simplest way is to use a method like getElementById:

let getElement = document.getElementById('my-element')

Here, Javascript will look for an element with the id, #my-element in the HTML content of your page. If it exists, it will return a HTMLElement, which will contain an innerHTML property:

let getElement = document.getElementById('my-element')

console.log(getElement.innerHTML)

Now we can easily get the HTML contents, including text, of #my-element. Note: if you use querySelectorAll to select your HTML elements, this will return multiple HTMLElements - so make sure you are only selecting one.

Setting an HTML elements innerHTML

As well as getting innerHTML from an element, we can also redefine it as we see fit. For example, below we can set our elements contents to be just an <h1> tag:

let getElement = document.getElementById('my-element')
getElement.innerHTML = '<h1>Hello World</h1>'

The contents we pass to innerHTML will be parsed as HTML, and rendered to the user. There are two things you should consider when doing this:

If, for example, you are doing this via API, and someone can submit contents to appear on the page - you can run into some security problems. Therefore, you need to be careful how you use this, so that you don't end up with someone hacking and sending random content or malicious code to many users.
This will replace all contents within the HTML element - which may not be what you want.

Security concerns with using innerHTML

Regarding security concerns, if you are worried about using this method to set HTML, you can use the setHTML() which will sanatize input and remove any invalid HTML (unlike innerHTML). It also removes code it deems unsafe. Alternatively, you can use textContent - however this will not let you add HTML or scripts to a tag.

For basic manipulations where you are in complete control of what is being done, innerHTML can be used with relatively few concerns. So finally, you want to add content inside your HTML element in addition to what is already there, instead of replacing it while using innerHTML, you can do something like this:

let getElement = document.getElementById('my-element')
getElement.innerHTML = '<h1>Hello World</h1>' + getElement.innerHTML

The above code will add a <h1> tag above the rest of your content - while still keeping your existing content.

Conclusion

innerHTML is a common tool for manipulating or getting HTML content from an element. It's widely used, and good to understand. Although some security concerns exist regarding HTML insertion, in many cases it is a valid method to do this. To learn more about Javascript, you can check out my guide here.

Centering Elements in CSS with Tailwind

Johnny Simpson — Sat, 04 Feb 2023 22:45:51 +0000

Tailwind is an increasingly popular and widely used framework, which makes it easier in some cases to build and ship features and products. In this guide, we'll be covering how you can vertically and horizontally center an element or text with tailwind.

In another article, I've already covered how to center an HTML element both horizontally and vertically using CSS. If you want to learn about that, click here.

Horizontally and Vertically center an element with Tailwind

Horizontally and vertically centering something with Tailwind is easy with flexbox. All we have to do is three things:

use h-screen to make the element the height of the screen
use flex to make the element a flexbox
use items-center to vertically center it
use justify-center to center it horizontally

Our code then looks like this:

<div class="h-screen flex items-center justify-center">
    Horizontally and Vertically Centered Element
</div>

Which produces a result like this:

Vertically centering an element with Tailwind

The easiest way to vertically center something is to do what we did before, and use flexbox. This time, though, we'll remove justify-center. The item will then be centered only along the vertical axis.

<div class="h-screen flex items-center">
    Vertically Centered Element
</div>

You can see an example of this in the codepen below:

Horizontally centering an element with Tailwind

In the same way that we vertically centered the div above, we can also horizontally center using our previous approach. The code for that looks like this:

<div class="flex justify-center items-center">
    Horizontally Centered Element
</div>

This is the same code we used for horizontally and vertically centering, just without h-screen. Here's the result:

Conclusion

Centering elements with flexbox is easy in Tailwind. In this guide, we've learned how to vertically and horizontally center elements including HTML elements and text - which is infinitely useful in web development.

To learn more about CSS in general, you can find my other content here.

Getting Started with Redis and Node.JS

Johnny Simpson — Sun, 29 Jan 2023 12:45:49 +0000

Redis is a powerful tool for caching data and having it available in memory. Redis requires RAM to use, and every piece of data you use in Redis is loaded into the RAM. That means it can be accessed really quickly, which allows us to cache and provide data to users super fast.

Redis has lots of uses, including caching web pages and as a normal database for quicker access. It also can be used out of the box with Node.JS. In this guide, I'll show you through how to get started with Redis and Node.JS.

Using Redis with Node.JS

Before you start, make sure you install Redis first. Then start up a new Node.JS project/folder, and initiate npm using npm init in the folder:

npm init

This will guide you through the npm setup. You can then install the npm redis package using:

npm i redis

After that, you're free to use redis in your code in whatever way you like. The Node.JS redis package gives you an interface to store data in a Redis database, just like you would if you were using Redis from the command line. To get started with it, you can import redis into your code like so:

import { createClient } from 'redis';

const client = createClient();
client.on('error', (err) => console.log('Redis Client Error', err));
await client.connect();

createClient is the function we use to connect to redis - after which we initiate our redis connection by using the connect() method on that function. After that, we can interact with redis using our client variable.

Let's look at some examples. To set a key, we can now use client.set:

await client.set('myKey', 'someValue');

Since it takes a bit of time to set the data in RAM, each of these functions are async - meaning they return promises. So make sure you use them in conjunction with await or then. You can learn more about promises here.

Similarly, we can retrieve a key using get:

await client.get('myKey')

Redis is much faster than other databases, since it's available right in memory - so expect a high level of performance using these functions. You can also use any other typical redis function, like Hashes:

await client.hSet('user', '1', 'someValue');
await client.hGetAll('user');

You can also use sendCommand if you'd rather send a specific command of any kind to Redis. This is useful if you find something which Redis for Node.JS does not support:

await client.sendCommand(['HGETALL', 'someKey']);

Conclusion

Redis is super fast and I used it quite extensively to build fjolt. I hope you've enjoyed this quick guide on getting started with Redis in Node.JS

Javascript Array Some Method

Johnny Simpson — Sat, 28 Jan 2023 13:13:30 +0000

I've already covered in another article the Javascript every method. It's useful for when checking if every element matches a certain criteria. The some method differs in that it checks if only 'some' elements pass a criteria. If some do, then the expression will return true overall. For this function, some means anything more than 1 - so if even one element matches the criteria you define, the expression will return true.

Let's look at an example:

let myArray = [ 5, 10, 15, 20, 25, 30 ]
let checkArray = myArray.some((x) => (x / 5) > 3)
// Returns true, since some elements, when divided by 5, return a number greater than 3
console.log(checkArray)

The some method takes one callback function, which can have 3 different arguments:

element - the element being iterated over. In the example above, I've named it x.
index - the index of array element we are iterating over currently.
array - the entire original array.

some works like a loop - it loops over every element and checks if the callback function you gave returns true for any of them. element and index let us check each element individually in our function, while array gives us easy access to the original array. Here is an example with all three:

let myArray = [ 5, 10, 15, 20, 25, 30 ]
let checkArray = myArray.some((el, index, array) => {
    if(el / 5 > 3 && index > 4 && array.length === 6) {
        return true
    }
})
// Returns true since all checks are true for "some" elements
console.log(checkArray)

If one element in some passes the test, then the function will stop - meaning it is quite an efficient way of testing if some array elements pass certain tests.

One Line statements with some

Earlier, you might have noticed we did this:

let myArray = [ 5, 10, 15, 20, 25, 30 ]
let checkArray = myArray.some((x) => (x / 5) > 3)
// Returns true, since some elements, when divided by 5, return a number greater than 3
console.log(checkArray)

... and even though we did not return true, the statement is still true. That is because one line functions when defined without curly brackets will return the result of a statement automatically. In this case, (x / 5) > 3 is returned by default, resulting in true.

Javascript: Check if an Array is a Subset of Another Array

Johnny Simpson — Sun, 13 Nov 2022 18:34:41 +0000

There are many use cases where knowing if an array is a subset of another can be quite useful - and although usually immediately obvious to the human eye, it can be difficult to evaluate in code.

In the code below, arr2 is a subset of arr1, but arr3 is not.

let arr1 = [ 'a', 'b', 'c' ];
let arr2 = [ 'b', 'c' ];
let arr3 = [ 'c', 'd' ];

If we want to find out if an array is a subset of another array, the best way to evaluate this is by using the array every method. This method iterates through each element in an array and performs a test on it. If every element in the array passes that test, then the overall every method will return true.

For each evaluation, we have a "parent" array, and a "subset" array - where we want to check if the "subset" array is fully contained within the "parent" array.

To evaluate if one array is a subset of another, we can run every on the each element on the "subset" array. Within the every function, we can test if the "parent" array contains each element in the "subset" array. If it does, then every will return true. Otherwise, it'll return false.

This can be accomplished easily with a function like the one shown below - checkSubset will return true should the subsetArray be fully contained within the parentArray:

let arr1 = [ 'a', 'b', 'c' ];
let arr2 = [ 'b', 'c' ];
let arr3 = [ 'c', 'd' ];

let checkSubset = (parentArray, subsetArray) => {
    return subsetArray.every((el) => {
        return parentArray.includes(el)
    })
}

checkSubset(arr1, arr2); // returns true
checkSubset(arr1, arr3); // returns false