Chunk Function (Lodash)

Seth Lachman — Sat, 29 Feb 2020 20:21:24 +0000

(This post first appeared on my personal blog)

Recently, I decided it would be a good idea to recreate some of the functions used in the popular JavaScript utility library Lodash to test my understanding of JavaScript and also practice writing unit tests in Jest.
For anyone unfamiliar with Lodash, it is a library that allows you to drop in various helper functions for performing common transformations.
In most instances, it is better to use a library like Lodash over rolling your own implementations for these methods because the functions included
in these libraries are extremely performant and have been tested in many different browsers and use cases. However, for educational purposes, I think it is a good idea to solve these problems since a library as popular as Lodash wouldn't be created to solve these problems otherwise.

I decided to start with the array methods and work my way down the list. Here is the description of the chunk utility function from the documentation:

Creates an array of elements split into groups the length of size. If array can't be split evenly, the final chunk will be the remaining elements.

Let's restate the problem to be sure that we understand it. The chunk function will return an array of elements or 'groups'; these groups will be arrays and each group will contain as many elements as determined by the size argument passed into the function. In the event of leftover elements, the leftover elements will be placed into the final array. The documentation also states that if a size value is not provided, a default value of 1 will be applied for the size. Below is an example of what we wish to accomplish.

chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

We know that we will need an array to store the groups, so let's create a function expression chunk and declare a variable chunkedValues and assign it to an empty array.


const chunk = (array, size = 1) => {
  let chunkedValues = [];
}

Notice the use of the default parameter.
Next, let's think about how we might group values before pushing them into an array. If we loop through the given array, and instead of incrementing by one each time, we incremented by the size argument, we would effectively start at the beginning of each group. Considering the example above, if we loop through the array and increment each time by 2 (the size), on the first loop we would start at the virst value, on the second loop, the index would point to value 'c', which is the start of the next and final group. To collect the groups, we can use the slice method which returns a copy of the array
from the index given up to an end index (the end index is not included in the array). In other words, at the first item in the array (index 0), we would slice from 0 to 2 (0 + 2), which would return the array ['a', 'b'] since the slice doesn't include index 2 in the final result. Below is the final code for reference.

const chunk = (array, size = 1) => {
  let chunkedValues = [];

  for (let i = 0; i < array.length; i += size) {
    chunkedValues.push(array.slice(i, i + size));
  }
  return chunkedValues;
};

If the slice method isn't clicking at the moment, let's consider what the slice method is doing in this function by recreating it. By using the slice method, we are (in effect) creating a new array within the initial
for loop at each iteration (denoted by group in the code below) and then using an inner for loop to collect and push each of the values for this particular group. When the inner for loop terminates, we push group array into the chunkedValues array. I've provided some example code below to illustrate this concept:

const chunk = (array, size = 1) => {
  let chunkedValues = [];
  for (let i = 0; i < array.length; i += size) {
    let group = [];
    // prevents the loop from adding undefined values in the group array
    let length = i + size > array.length ? array.length : i + size;
    for (let j = i; j < length; j++) {
      group.push(array[j]);
    }
    chunkedValues.push(group);
  }
  return chunkedValues;
};

One thing to notice in the implementation above is the length variable. When using the slice method, if the end value provided to the method is greater than the length of the array, the method only takes the values up to and including the last item in the array. The logic in the length variable handles this case since it checks if the index plus the size argument is greater than the length of the array. If it is greater than the length of the array, then we assign it the value of the length of the array, otherwise we assign it to the index + the size argument.

I hope this article encourages you to look into Lodash and implement some of the functions yourself (and remember, this is only one implementation of this function, and certainly not the best or most performant solution). If you want to take a look at my github repo with the test cases, you can check it out here. If you have any comments, questions, or suggestions, please let me know!

Form Validation

Seth Lachman — Tue, 25 Feb 2020 16:22:38 +0000

(This post first appeared on my personal blog)

Forms facilitate communication and transactions between users around the globe, from a contact form on a blog to the transfer of money
through your online bank or your favorite e-commerce platform, forms are a necessary part of every user's experience of the web.
It should go without saying then that a great, accessible form can make a world of difference in providing a pleasant user experience. I'm sure most people have experienced the frustration around trying to fill out a form with obscure error messages that prevent you from completing your task. As developers, it is our responsibility to provide an accessible experience that allows a user to complete their task without any friction.

If you are using a JavaScript framework to build and manage forms, you are probably aware that many libraries exist within the JavaScript ecosystem to help solve some of the problems associated with forms (some notable examples include: formik and react hook forms). However, you might not always need a JavaScript framework to solve this problem (especially if your form isn't very complex), so it is important to understand the best practices around creating a form.

Let's begin this journey with an essential part of every form: validation. The simplest way to add validation to an input field is by adding the required attribute to the field. If a user attempts to submit a form without filling out a required field, a message provided by the browser will notify the user to fill out the field. If the input doesn't have a value, the :invalid psuedo-class will be assigned to that input which can then be styled. Click on the submit button in the example below to see the default error message applied by the browser.

One of the things I was surprised to learn about when researching form validation is the number of attributes provided by HTML to aid in the validation process. A prime example of such an attribute is the pattern attribute. The pattern attribute allows you to define a regular expression to validate the given input against. So for example, if you create a form with a beverage field and you wanted to restrict the answer to coffee, you could write the following regex pattern coffee to prevent the user from submitting the form unless that regex pattern is satisfied.

Although the pattern above would mostly serve the purpose of frustrating a user, it is not too difficult to think of a better use case for the pattern attribute,for example validating a phone number. Another helpful tip I picked up in my research into the pattern attribute: if the input type is email,then that field is validated against an email address pattern without any extra configuration! Don't believe me? Go back to the first codepen example, enter a value that isn't an email address and report back on the results. Other validation attributes exist, such as minlength and maxlength (useful for specifying a minimum length for a password) but I will leave it as an exercise for the reader to explore some of these other validation attributes.

A great resource for discovering other validation attributes is MDN, specifically this article on Client-side form validation. Let me know if you have any questions or wish to point out anything that I failed to mention in this brief overview. In my next post, I will look into adding some more custom error messages using JavaScript.

DEV Community: Seth Lachman

Chunk Function (Lodash)

Form Validation