DEV Community: Steve Cruz

TIL: Destructuring from Object | Undefined

Steve Cruz — Tue, 05 Jan 2021 11:45:08 +0000

Destructure from a value that can be undefined

Problem

The updateUserProfile function allows me to retrieve the user by making a query to the database with the provided user_id, then use another database query to guarantee that the provided email does not belong to another user and finally update the user in the database sending a query with the provided name and email.

The problem was that when checking if we already had a user with the provided email in the database the result could be a User object or undefined, depending on if we found the user or not.

The User object contains many properties (id, name, email, avatar, password, created_at, updated_at), but I only needed the id property to compare with the provided user_id to guarantee that the email did not belong to any user.

I was not able to use destructuring to unpack only the id from the result nor rename it to findEmailOwner because the result could be a User object or undefined, so I got the following TypeScript error message: "Property 'id' does not exist on type 'User | undefined'.

TLDR: I need to obtain id by destructuring a value that can be an object or undefined.

function updateUserProfile ({ user_id, name, email }) {
  const user = await usersRepository.findById(user_id);

  if (!user) {
    throw new AppError(`The user was not found.`, 401);
  }

  const { id: findEmailOwner } = await usersRepository.findByEmail(email); // error message: "Property 'id' does not exist on type 'User | undefined'.

  if (typeof findEmailOwner !== 'undefined' && findEmailOwner !== user_id) {
    throw new AppError(`This email cannot be used.`, 401);
  }

  user.name = name;  
  user.email = email;

  return usersRepository.save(user);
}

Answer

We can use short circuit evaluation to supply a default if user is a falsy value (undefined, null, 0, -0, 0n, "" or NaN).

NOTE 1: I can use this approach in my application because the id property that I want to retrieve with destructuring cannot be assigned to any falsy value in my database.

NOTE 2: BUT if I was retrieving the avatar property that can be assigned to null in the database, this approach would not work.

```tsx
// Case 1 - id (cannot contain falsy values)

// user does not exist
const user = undefined
const { id } = user || {}
console.log(id) // undefined (what we expect)

// user exists
const user = {
    id: 'aaaa-aaaa-aaaa-aaaa',
};
const { id } = user || {}
console.log(id) // 'aaaa-aaaa-aaaa-aaaa' (what we expect)

// Result: SUCCESS

//-----------------------------------------

// Case 2 - avatar (can contain null a falsy values)

const user = undefined
const { avatar } = user || {}
console.log(avatar) // undefined (what we expect)

const user = {
    avatar: 'photo.jpg',
};
const { avatar } = user || {}
console.log(avatar) // 'photo.jpg' (what we expect)

const user = {
    avatar: null,
};
const { avatar } = user || {}
console.log(avatar) // undefined (not good, we needed this to be null)

// Result: FAILURE
```

Another approach is to spread the user into an object before destructuring it, because null and undefined values are ignored.

NOTE 1: I would use this approach if was retrieving the avatar property that can be assigned to a falsy value (null) in the database since the first approach would not work.

NOTE 2: This approach is less idiomatic, so I would not use it for cases where the first approach works.

NOTE 3: This approach would also work for id.

//Case - avatar (can contain null a falsy values)

const user = undefined
const { avatar } = { ...user }
console.log(avatar) //undefined (what we expect)

const user = {
  avatar: 'picture.jpg',
}
const { avatar } = { ...user }
console.log(avatar) // 'picture.jpg' (what we expect)

const user = {
  avatar: null,
}
const { avatar } = { ...user }
console.log(avatar) // null (what we expect)

// Result: SUCCESS

Applying the short circuit evaluation approach to our code:

function updateUserProfile ({ user_id, name, email }) {
  const user = await usersRepository.findById(user_id);
  if (!user) {
    throw new AppError(`The user was not found.`, 401);
  }
  const { id: findEmailOwner } = (await usersRepository.findByEmail(email)) || {}; // 1st approach
  if (typeof findEmailOwner !== 'undefined' && findEmailOwner !== user_id) {
    throw new AppError(`This email cannot be used.`, 401);
  }
  user.name = name;
  user.email = email;
  return usersRepository.save(user);
}

TLDR

Retrieving a property (that cannot be falsy) with destructuring from a value that can be an object or undefined - use short circuit evaluation.
Retrieving a property (that can be falsy) with destructuring from a value that can be an object or undefined - use the spread operator on the value that can be an object or undefined.

Additional Links

JS/ES6: Destructuring of undefined on Stack Overflow

Keep in touch

Contact me through my social media. Let's talk about DDD, TDD, good practices and the new Wonder Woman 1982 movie, be it on LinkedIn or GitHub.

Tell me what you learned today.

JavaScript - Leetcode: Check If N and Its Double Exist

Steve Cruz — Sun, 30 Aug 2020 11:54:06 +0000

I have been solving LeetCode problems to practice my knowledge of algorithms and data structures for job interviews and decided to share my JavaScript solutions for them.
NOTE: You can also read this in LeetCode.

The problem

Problem: Check if N and Its Double Exist
Difficulty: Easy

Given an array arr of integers, check if there exists two integers N and M such that N is the double of M ( i.e. N = 2 * M).

More formally check if there exists two indices i and j such that :

i != j
0 <= i, j < arr.length
arr[i] == 2 * arr[j]

Inputs

Example 1:

Input: arr = [10,2,5,3]
Output: true
Explanation: N = 10 is the double of M = 5,that is, 10 = 2 * 5.

Example 2:

Input: arr = [7,1,14,11]
Output: true
Explanation: N = 14 is the double of M = 7,that is, 14 = 2 * 7.

Example 3:

Input: arr = [3,1,7,11]
Output: false
Explanation: In this case does not exist N and M, such that N = 2 * M.

Constraints

2 <= arr.length <= 500
-10^3 <= arr[i] <= 10^3

Naive solution

We could use a for loop nested in a for loop to check for each element if there is a corresponding number that is its double.

But even though we would have a constant space complexity of O(1), we would have a quadratic time complexity of O(n²) which is not good and should be avoided if possible.

//JavaScript
var checkIfExist = function(arr) {
    for(let i = 0; i < arr.length; i ++) {
      const currentValue = arr[i];
      for(let j = 0; j < arr.length; j ++) {
        const possibleValue = arr[j];
        if(possibleValue === 2 * currentValue && i !== j) {
          return true;
        }
      }
    }
  return false;
};

Solution 1: Hash Table

Another possible solution is to use the Hash Table data structure that in JavaScript can be represented as an object. Its main advantage is that we can assume that it takes constant time of O(1) to retrieve each stored element, so it is fast.

It also allows us to solve this problem by traversing the array only once:

In each iteration of a for statement we check if the current value already exists as a key in our object.

If so, a number and its double exist in the array, we must return true.
If not, store key/value pairs where one pair has the current element divided by 2 as a key and the other pair has the current element multiplied by 2 as a key. Notice that the values we store with each key do not matter, since we only check the keys.

If the for loop ends without finding a match, it means that the array does not contain a number and its double, we must return false.

Since we created a Hash Table with a size that scales linearly according to the size of our input array, it has a linear space complexity of O(n).

This time we only traverse the array once, so it has a linear time complexity of O(n).

//JavaScript
var checkIfExist = function(arr) {
    const hashTable = {};

    for(let i = 0; i < arr.length; i ++) {
      const currValue = arr[i];

      if(hashTable[currValue] !== undefined) {
        return true
      }
      hashTable[currValue / 2] = currValue;
      hashTable[currValue * 2] = currValue;
    }

  return false;
};

Map

This Hash Table approach could also be implemented by using the JavaScript built in Map data collection.

The main difference in our use case would be that instead of storing each key in the Hash Table as a string, we would store each key in a Map as a number. An Object only supports string and symbol as a key, but a Map supports objects and any primitive type as keys.

Solution 2: Set

The problem with using a Hash Table (object) or Map is that when we insert a key/value pair, the key is required but its value is not.

When we need a Hash Table data structure's properties to solve the problem, but we only need keys instead of key/value pairs it makes sense to use a Set data collection.
NOTE: Keep in mind that a JavaScript built in Set only stores unique values.

Similar to an object and a Map, we can assume that we can retrieve a value from a Set with a constant time complexity of O(1).

We created a Set with a size that scales linearly according to the size of our input array, it has a linear space complexity of O(n).

Just like our previous solution we only traverse the array once, so it has a linear time complexity of O(n).

//JavaScript
var checkIfExist = function(arr) {
    const set = new Set();

    for(let i = 0; i < arr.length; i ++) {
      const currValue = arr[i];

      if(set.has(currValue)) {
        return true
      }
      set.add(currValue / 2);
      set.add(currValue * 2);
    }

  return false;
};

Keep in touch

Contact me through my social media. Let's talk about algorithms, data structures and LeetCode problems, be it on LinkedIn or GitHub.

Share with us your solutions for this problem.

Stop Guessing: What is a JWT?

Steve Cruz — Sun, 23 Aug 2020 20:41:50 +0000

Stop Guessing: What is a JWT?

JSON Web Token (JWT)

A JWT Is an open standard that defines a compact and self-contained way for performing Authentication in REST APIs where information is securely transmitted between both parties as a JSON object.

This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with HMAC algorithm) or a public/private key pair using RSA.

NOTE 1: We consider it compact because of its size, it is possible to send it through an URL, POST parameter, or inside an HTTP header. Also due to its size its transmission is fast.
NOTE 2: We consider it self-contained because we do not need to query the database more than once, the payload contains all the necessary information about the user.

When to use JWT?

Authentication: After the user is signed in, each subsequent request includes the JWT. This allows the user to access routes, services, and resources that require that token.

Information Exchange: JWTs are a secure way of transmitting information between parties, because you can be sure that the sender is who they say they are, since they can be signed (possibly by using a public/private key pair). You can also verify that the content has not changed, since the signature is created using the header and the payload.

JWT Structure

A JWT is formed by three parts separated by dots (.): a Header, a Payload, and a Signature. These parts follow this structure: xxxxx.yyyyy.zzzzz.

Header

Contains some information that usually include the token type (which is JWT) and the hashing algorithm (such as HMAC, SHA256 or RSA).

Afterwards the JSON containing that Header is Base64Url encoded to form the first part of the JWT.

//Example of a Header
{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

Contains the claims that are statements about an entity (usually the user) and additional metadata.

NOTE: Can not contain sensible information about a user like password, but it is ok to include user id, name or email.

Example of claims: iss (issuer), exp (expiration time), sub (subject), aud (audience), among others.
Afterwards the JSON containing the payload is then Base64Url encoded to form the second part of the JWT.

//Example of a Payload
{
  "sub": "0987654321",
  "name": "Jane Doe",
  "admin": true 
}

Signature

Is used to verify that the sender of the JWT is who they claim to be and to ensure that the message was not changed while it was being transmitted.

To create the signature take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign it.

//Example of a Signature using the HMAC SHA256 algorithm
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

NOTE: A simple way to generate a secret is using http://www.md5.cz/ to generate a MD5 hash of a string.

Uniting the three parts

The output is three Base64 strings separated by dots: an encoded header, an encoded payload and it is signed with a secret. They can be passed in HTML and HTTP environments.

NOTE: Go to jwt.io, a website that allows you to decode, verify and generate JWT.

How does a JWT work?

1 - When the user is authenticated by successfully signing in using their credentials, a JWT will be returned.

NOTE: Keep in mind that tokens are credentials, so you must prevent security issues: do not keep tokens longer than required.

2 - Whenever the user wants to access a protected route, its request should send the JWT, usually in the Authorization header using the Bearer schema: Authorization: Bearer .

NOTE: This authentication mechanism is stateless, because the user state is not saved in the server memory. Instead, the server's protected routes check for a valid JWT in the Authorization header, and only allows the user if this condition is fulfilled. As a result it is not necessary to query the database multiple times as JWTs are self-contained, so it already has all the necessary information.

Why Should You Use JWT?

They are stateless: Since tokens are self-contained they have all the information that is needed for authentication. This is good for scalability as your server does not have to store session state.
They can be generated from anywhere: Token generation and token verification are decoupled. This allows you to handle the signing of tokens on a separate server.
They allow access control: Within the payload it is possible to specify user roles and permissions. You can also define the resources that the user can access.

Best Practices

Let tokens expire: When a token is signed it will never expire unless you change the signing key or explicitly set an expiration. This could pose potential issues so it is necessary to have a strategy for expiring and/or revoking tokens.
Do not store sensitive data in the payload: Tokens can be easily decoded, their goal is to protect against manipulation with their signature. So only add the necessary number of claims to the payload to have the best possible performance and security.
Be a good magician, do not reveal your secret: Only reveal the signing key to services that really need it. It should be treated like any other credentials.
Utilize HTTPS: On non-HTTPS connections the requests can be intercepted and tokens compromised more easily.

Keep in touch

Contact me through my social media. Let's talk about security, authentication and programming in general, be it on LinkedIn or GitHub.

Share with us what JWT good practices you advocate for.

Awesome Jest Tip: Coverage Report

Steve Cruz — Mon, 17 Aug 2020 19:56:49 +0000

How much testing is enough?

Sometimes we create some unit tests for our application to test our services, but we do not know the answers to these questions: Did we create enough unit tests? Did we create too many tests?

Jest: Coverage Report

Popular JavaScript frameworks can use Facebook’s Jest to perform unit tests.

Jest has the Coverage Report feature that allows us to check if our code covers all lines of the files we choose by generating an HTML file that we can open.

In my case I chose to cover services that are in the services folder. These services are related to Users and Appointments, such as AuthenticateUser, UpdateUserAvatar and CreateAppointment.

Our HTML file shows us that we almost have enough unit tests for our services related to Users and that we do not have any unit tests for our services related to Appointments.

If we click in appointments/services we will see more in depth information showing coverage statistics on each service related to Appointments.

Branches represent if statements which conditions have been fulfilled at least once during the unit tests.
Functions represent functions that have been called at least once during the unit tests.
Lines represent code lines that have executed at least once during the unit tests.
Statements represent instructions that have been executed at least once during the unit tests. For example, we can have a line that contains two statements: var age= 18; console.log(age) this contains a variable declaration statement and a statement that executes the log function that belongs to the console object.

If we click on CreateAppointmentService.ts we are able to see every line of code contained in that file.

Lines highlighted in pink are statements that are not covered by the unit test. This helps us create tests for parts that are missing them.

If we return to the initial screen and click on users/services we will see more in depth information showing coverage statistics on each service related to Users. It is possible to see that some are completely covered and others are partially covered.

If we analyze the lines of code in the CreateAppointmentService.ts file we can see 1x at the left hand side, it means that we executed that part of the code one time during our unit tests. This happens because I only tested one of the functional requirements on my unit tests: “Should not allow unauthenticated users to change their avatar”.

Notice there is an E symbol at line 31. It means that we have not entered it during our unit tests (else path not taken).

Also notice that there is a part of line 42 that is highlighted in yellow. It means that the possible branch is not covered.

If we analyze the lines of code in the CreateUserService.ts file we can see 3x and 4x in different places at the left hand side, it means that we executed some parts of the code differently during our unit tests. This happens because I tested multiple different functional requirements on my unit tests. Examples of my requirements:

“Should be able to create a new appointment”.
“Should not be able to create two appointments at the same time”.

Keep in touch

Contact me through my social media. Let's talk about unit tests and programming in general, be it on LinkedIn or GitHub.

Share with us what tools you use to improve your tests.

4 Tips to help people with Visual Impairments (a11y)

Steve Cruz — Thu, 23 Jul 2020 22:55:16 +0000

26.9 million American Adults age 18 and older reported experiencing vision loss according to a 2017 study from the American Foundation for Blind.

Here are 5 things we can do to help promote web accessibility:

1. Be careful with Alert Boxes, Error Messages, and Pop-up Windows

Do not use JavaScript or other client-side scripting to hide warnings, disclaimers, or error messages.

When HTML elements are removed from the DOM the screen reader does not have access to them anymore.

Important messages should be available to all site visitors.

In this case I hid the tooltip using the CSS property opacity: 0. Had I used JavaScript to remove the tooltip from the DOM or the CSS property display: none most screen readers would not be able to read the tooltip without the visually impaired user hovering it because it was removed from the DOM.
NOTE: visibility: hidden does not remove the element from the DOM, remove them from the accessibility tree so screen readers cannot read it too.

Another possible solution to this problem is to develop a server-side solution that rebuilds and serves a modified page with the error message embedded in it.

2. Do not use Color as the only way to convey information

Color can be used for denoting required fields on a form or any input errors. However, some users may be color blind and have a hard time perceiving color, colors are also a problem to those who are blind so, when color is used, do not use it as the only means of conveying information.

It is common to use red as a color to convey error and green to convey success, but some websites only use a red border around the input to convey an input error without any additional cues.

Twitter solves this by also displaying text instead of just using the red color to convey that an error has occurred, this approach is good for people with visual impairments.

3. Provide adequate Contrast

There must be enough contrast between text and its background. This allows people with reduced vision to read and navigate the website site.

The minimum contrast ratio between most text and its background must be 4.5:1. Exceptions include text that is larger and/or bold, they may have a contrast ratio of 3:1.
NOTE: Large can be defined as 18-point text, bold is a 14-point bold text.

Image: https://www.brandeis.edu/web-accessibility/understanding/color.html

Free tools to check contrast

4. Visible Focus

Focus emphasizes the element that is currently selected. It allows users to know that they are about to activate a link, button, form control, etc.

This helps people who have reduced vision or other print-related disabilities have a clear indicator of where they are on a web page.

NOTE: If a border is used to indicate focus on an element, it must have sufficient contrast so it can be clearly noticed.

How to check if your page's elements have visible focus?

Use the tab key to cycle through all the page's elements. As each element receives focus, there must be a clearly visible change to the element.

Keep in touch

Contact me through my social media. Let's talk about accessibility and programming in general, be it on LinkedIn or GitHub.

Share with us what you do to improve accessibility for those with visual impairments.