DEV Community: Tolumide Shopein

Nullish Coalescing and Optional Chaining in Javascript

Tolumide Shopein — Mon, 24 Feb 2020 19:39:27 +0000

Nullish coalescing (??):

You might have encountered scenarios, where you needed to assign a default value to a variable(x) if the expression or variable from which the value of x is to be derived or deducted, is undefined or null but not when it is false, 0, or ''(empty string).
This is almost impossible with the popular || logical operator which you would have used to assign a different value if the boolean evaluation of the prior value (resulting from the expression or variable) is a falsy.

This would be our reference object:

const obj = {
  val: '100',
  test: 30,
  absent: 0,
  exam: 70,
  grades: {
    test: 23,
    exam: 49
  }
}

const removeScoreForAbsence = obj.absent || 0
console.log(removeScoreForAbsence) // 0

const inexistentValue = obj.valueThatDoesNotExist || 10
console.log(inexistentValue) // 10

The problem with using the || logical operator as depicted above is that if we had wanted to assign the value of obj.absent to removeScoreForAbsence regardless of its value unless it is undefined or null, then this would have been impossible since the boolean evaluation of an emptyString, false, and 0 result in falsy.

Hence, nullish coalescing. So what does nullish coalescing bring to the table? Well, it assigns the value to the variable unless it is undefined or null

const checkMe = obj.absent ?? 10
console.log(checkMe) // 0

const checkAgain = false ?? 20
console.log(checkAgain) // false

const checkNull = null ?? 25
console.log(checkNull) //25

const checkUndefined = obj.undefined ?? 35
console.log(checkUndefined) // 35

Optional Chaining (?.)

Let's assume you are a Frontend developer consuming a RESTful API with deeply nested results, where the absence of a key whose value is another object is very possible, you have probably had instances where you had to write an if/else block as dabble down the nested object, or use the && (AND) logical operator in the process of assigning your value.

Let's use a simple example here:

const obj = {
  info: {
    type: 'human',
    firstName: {
      val: 'tolumide',
      firstLetter: 't'
    }
  }
}

If we had wanted to get the value of the firstLetter in obj above, what we would usually do would be to do a sort of type or value checking to confirm the existence of such nested keys in the object before accessing its values and then do a type check before we continue with its value.

const letter = obj && obj.info && obj.info.firstName && obj.info.firstName.firstLetter

console.log(letter) //t

if(letter){doWhatever()}

With optional chaining however, we can write less code

const theLetter = obj?.info?.firstName?.firstLetter
console.log(theLetter) //t

const proveIt = obj?.info?.lastName?.firstLetter ?? 'no name'

console.log(proveIt) //no name

Good luck applying this 😃👍

PS: I love feedback. If you have any please drop one below or reach out to me on.

twitter => @tolumide_ng
gitHub => @tolumide-ng

How to Invalidate JWT tokens on user logout with Redis

Tolumide Shopein — Thu, 02 Jan 2020 17:07:53 +0000

In this article, I will be sharing briefly how to invalidate JWT tokens on user logout (backend implementation) using Redis.

Redis is an in-memory data structure store that can be used as a database, message-broker, or cache. I will be using the sorted set data structure of Redis.

Sorted sets in Redis allows you to save a member and its score in the Redis sorted set.
Think of the sorted set as an object in javascript or dictionary in python, where the key is the score and the value is the member.

For the sake of our goal, I will be assuming the score of each member (in this case the JWT token) of the sorted set as the expiry date or time of such JWT token.

NB: This is not a full code implementation.

Issue Token When the token is issued to the user on login/signup depending on your implementation. Save the token on Redis.

i. Create a token that expires within 24hrs:
Something that looks like this:

  //a. Ensure the user exist and the password is correct
  //b. Issue the token if (a) is okay

    const token = ({userId, email}) => {
      return jwt.sign({
        data: {id, email}
      }, `${process.env.SECRET}` , { expiresIn: '24h' });
    }
    //c. Add the token to redis using the userId as the token key
    const tokenKey = new Date(Date.now() + (1000*60*60*24));
    await redis.zadd(`${userId}-tokens`, `${tokenKey}`, token);

    //d. Send the token to the user

ii. Check and remove invalid tokens on user login (you could use a cron
job for this instead):
Get expired tokens for this user on Redis and remove them

    const expiredTokens = await redis.zrangebyscore(`${user.id}-tokens`, 
      `-inf`, Date.now());

      // Remove expired tokens on user login/use a cronjob
     expiredTokens.length >= 1 && expiredTokens.forEach(async token => {
       await redis.zrem(`${user.id}-tokens`, token)
    });

Remove specific token on user logout: So what I want is to not log out all devices the user might be connected with (you might do this if you have a feature to logout all devices feature), we want to logout the specific device that has this token, and ensures the token can never be used again even if it has not expired yet.

    // Get the token sent from the frontend
    const {token} = args;
    const isTokenValid = await verifyToken(token)
    if(isTokenValid){
      const {userId} = isTokenValid.data
      const allTokens = await 
      redis.zrangebyscore(`${userId}-tokens`, `-inf`, 
        `+inf`);
         if (allTokens.includes(token)){
           await redis.zrem(`${validateToken.data.id}-tokens`, token);
           return Response({status: 'Success'})
         }
     }
    return Response({status: 'Failure'})

What this means: On every user request for content that might need authentication, you should ensure that such token is in the user's Redis store i.e ${userId}-tokens. If the token is not in the Redis store, then it is not a valid token anymore.

I do understand that this might not be a perfect implementation, I am therefore open to any constructive feedback.

Credits:

Can't Reset Gmail Password on a new device?

Tolumide Shopein — Sun, 17 Nov 2019 08:42:06 +0000

There is possibility that you have multiple email address, for different reasons, there is also possibility that your main devices through which you access all those accounts gets stolen, lost, bad or something else.
Well, you might remember one of the passwords (perhaps the main account) so what happens to the other accounts?
Well, this brief tutorial would help you access them since the new google security measures makes it almost impossible to use the forgot password option from a new device.
Here are the steps I took which might help you.

Login to you main gmail account (The one that serves as the account recovery email for the other accounts)
Click the Menu (Harmburger-like) option on the top-right-hand side of your screen and click Account
On the new page rendered click the security option that appears on the left hand side
Scroll through your options on the new page and click Password Managerin the signing in to other accounts options
On the new page, search for google to find your associated google accounts
Click on the result (you might have to sign in again with your current gmail password at this point for verification) and woooaaaahhhh, you have your gmail accounts with the passwords that you can use to login there.

Javascript DataTypes: Array Methods with Practical Examples (forEach and map)

Tolumide Shopein — Fri, 15 Nov 2019 06:29:58 +0000

In this short tutorial, I would be introducing (for lack of a better word) you to the Javascript forEach and map methods of arrays.

forEach Method

Code 1.1.

array.forEach(function(item, index, arr), thisArg)

The forEach method accepts two arguments, a callback function and a
second argument that specifies the value of this for each item in the array. If the thisArg value isn’t specified, then its value would be undefined.

However, you would commonly find the forEach method of an array called only with the first argument (the callback function,thus assigning an undefined value to the second argument by default) as in 1.2 and 1.3 below and that is what I would explain:

Code 1.2.

array.forEach((item, index, arr) => {})

Or as:

Code 1.3

array.forEach((item) => {})

The forEach method allows you loop through each item of an array while performing a function on such item. I think it’s okay to call the forEach method an iterative array method and important to note that this method does not return any result.

Basically, the forEach method accepts one argument (the callback function, used here as an arrow function) which accepts three arguments.

The first argument is the current item in the array (during the iteration) (required),
The second argument refers to the position (index) of the current item in the array (optional),
The third argument is the array itself (optional).

Basic Example:

const arr = 1, 2, 3, 4, 5, 6]
    arr.forEach((item, index, arr) => {
    console.log(`${item} on index ${index} in ${arr}`)
});

NB: Most of the time you would only need and commonly see the array method implemented with the first argument (item) of the callback function.
NB: Copy out all examples and try them out on your browser's console

Practical Example:

Assume we are expecting data from an API(Application Programming Interface) which contains the username, data and other details but not in the format we need to render it to our user. Perhaps we need to format some elements in such data first?, show only some of the data? or perhaps add extra information to such array before it is rendered to the user without editing the original array because you still need it for something elsewhere. Well, this is a beautiful situation where you might need the forEach method.

const apiResponse = [{
  user: {firstname: 'tolumide', lastname: 'mic'},
  birthday: 'Sun Oct 15 2017 01:00:00 GMT+0100 (West Africa Standard Time)',
  phone: 070237461283
  },
  {
  user: {firstname: 'adeotun', lastname: 'ade'},
  birthday: 'Fri Mar 15 2013 01:00:00 GMT+0100 (West Africa Standard Time)',
  phone: 08111111111
}]

const modifiedResponse = [];
const assignValue = apiResponse.forEach(item => {
  const newObj = {
    fullname: `${item.user.firstname} ${item.user.lastname}`,
  phone: item.phone
 }
  modifiedResponse.push(newObj)
})

If we print the value of assignValue we would get undefined, however if we console the value of modifiedResponse we should get:

[{fullname: 'tolumide mic', birthday: '10/15/2017', phone: 070237461283}, {...}]

What did we do here?
We can’t display an object containing first name and last name where we ought to display them together as full name or display display an unformatted date to the user. So what do we do? We loop through each content, making a new item containing the formatted information as we need to display it and then push it into a new array (modifiedResponse ) which we would use for display to the user.

forEach method does not return a value:

const names = ['tolumide', 'ibukunoluwa', 'adebowale', 'oluwaseyi']
const capNames = names.forEach(names => {
  return name.toUpperCase();
})

capNames above would return undefined becase the forEachmethod does not return a result.

===> undefined

Map Method

Code 2.1

array.map(function(item, index, arr), thisArg)

The map method accepts two arguments, a callback function and a second parameter that would be used as to assign the value of this for each invocation of the callback function(first argument). If the second parameter (i.e the value of this) is not provided, then its value would be undefined.

Common representation:

Code 2.2

array.map((item, index, arr) => {})

Code 2.3

array.map((item) => {})

The map method like the forEach method loops through each item in the array. However, unlike the forEach method, the map method returns a new array containing the results of the function on each item of the original array.

It does this by calling the callback function presented to it on each item in the array, and returning a result on completion. Like the forEach method of arrays, the callback function in the map method accepts three arguments (item, index, and array).

Item: The current item in the array during iteration (required)
Index: The position of the current element during iteration in the array (optional)
Array: The array been transformed (optional)

Practical Example:
Using the map method to create a new array where we capitalise the first letter of each item in the array.

Loop through all elements in the array, running the assigned function and provide a new array.

const apiResponse = [{
  user: {firstname: 'tolumide', lastname: 'mic'},
  birthday: 'Sun Oct 15 2017 01:00:00 GMT+0100 (West Africa Standard Time)',
  phone: 070237461283
  },
  {
  user: {firstname: 'adeotun', lastname: 'ade'},
  birthday: 'Fri Mar 15 2013 01:00:00 GMT+0100 (West Africa Standard Time)',
  phone: 08111111111
}]

const modifiedResponse = apiResponse.map(item => ({
  fullname: `${item.user.firstname} ${item.user.lastname}`,
  lastname: item.phone
}))

You should get a response like this when you print the value of modifiedResponse with console.log()

[{fullname: 'tolumide mic', birthday: '10/15/2017', phone: 070237461283}, {...}]

A good look at the example above shows that mapmethod returns a value which is assignable to a variable.