tutorial

To check if a string contains uppercase letters in JavaScript, call the test() method on this regular expression /[A-Z]/, i.e., /A-Z/.test(str). test() will return true if the string contains any uppercase letters. Otherwise, it will return false.

For example:

function containsUppercase(str) {
  return /[A-Z]/.test(str);
}

console.log(containsUppercase('javascript')); // false
console.log(containsUppercase('PHP')); // true
console.log(containsUppercase('Coding')); // true

The RegExp test() method searches a string for matches with a specified regular expression and returns true if any are found. Otherwise, it returns false.

The forward slashes (/ /) indicate the start and end of the regular expression.

The square brackets ([ ]) match any one of a given set of characters. The A-Z pattern specifies that these characters be all the letters from A to Z in uppercase. So the complete regular expression matches any capital letter in the string.

Check if string contains only uppercase letters

To check if a string contains only uppercase letters, we’ll need to use a slightly different regex: /^[A-Z]+$/.

function containsUppercase(str) {
  return /^[A-Z]+$/.test(str);
}

console.log(containsUppercase('javascript')); // false
console.log(containsUppercase('PHP')); // true
console.log(containsUppercase('Coding')); // false

Let’s look into the differences in this new regex:

The ^ character specifies that the pattern must be at the start of the string. Conversely, the $ character indicates that the pattern must be at the end.

The + character matches one or more consecutive occurrences of the preceding pattern in the string.

So matches for the regex will only be found in a string that contains a group of consecutive uppercase letters from the start to the end of the string – a string with only uppercase letters.

Check out this cheat sheet from the MDN docs for a comprehensive guide to regular expression syntax.

String match() method

An alternative to RegExp test() is the String match() method. Instead of calling test() on the regex, we call match() on the string with the regex as an argument.

function containsUppercase(str) {
  return Boolean(str.match(/[A-Z]/));
}

console.log(containsUppercase('javascript')); // false
console.log(containsUppercase('PHP')); // true
console.log(containsUppercase('Coding')); // true

The String match() method returns an array of all the matches of a regular expression in a string. If there are no matches, it returns null.

const str1 = 'javascript';
const str2 = 'Beauty';

console.log(str1?.match(/[A-Z]/)); // null
console.log(str2?.match(/[A-Z]/)); // [ 'B', ... ] (single-item array)

We pass the result of match() to the Boolean() constructor to convert it to a Boolean. Boolean converts truthy values to true, and falsy values to false.

In JavaScript, there are six falsy values: undefined, null, NaN, 0, '' (empty string), and false. Every other value is truthy.

console.log(Boolean(undefined)); // false
console.log(Boolean(['letters'])); // true
console.log(Boolean(null)); // false
console.log(Boolean(5)); // true

We used the optional chaining operator (?.) on the string variable. If the variable is undefined or null, this operator will prevent the method call and return undefined instead of throwing an error.

const str = null;

console.log(str?.match(/[A-Z]/)); // undefined

To split a string every N characters in JavaScript, call the match() method on the string, passing as an argument this regular expression: /.{1, N}g/. The match() method will return an array containing substrings that each has N characters.

For example:

const str = 'codingbeauty';

const result = str.match(/.{1,4}/g) ?? [];

console.log(result); // [ 'codi', 'ngbe', 'auty' ];

The String match() method matches a string against a regular expression and returns an array of all the matches.

The forward slashes / / indicate the start and end of the regular expression.

The . (dot) metacharacter matches any single character in the string.

The braces in the form {min, max} match at least min characters and at most max characters of the pattern preceding it. In our case, that pattern is the . character, min is 1, and max is 4, meaning that .{1, 4} matches between 1 and 4 characters in the string.

We use the g (global) flag to make every occurrence of the pattern in the string get matched. It makes the regex keep splitting the string by the N characters until it gets to the end.

Without the g flag, only the first instance of the pattern will be matched.

const str = 'codingbeauty';

// "g" flag not specified
const result = str.match(/.{1,4}/) ?? [];

// [ 'codi' ... ] (single-item array)
console.log(result);

For a comprehensive guide to regular expression syntax, check out this cheat sheet from the MDN docs.

If there are no matches for the regex in the string, match() returns null. This is why we use the null coalescing operator (??) to return an empty array ([]) in such a case.

const str = '';

const result = str.match(/.{1,4}/g) || [];

console.log(result); // []

The ?? operator returns the value to its left if it is null or undefined. Otherwise, it returns the value to its right.

console.log(null ?? 5); // 5

console.log(2 ?? 5); // 2

console.log(undefined ?? 10); // 10

console.log('' ?? 10); // '' (empty string)

If the string’s length is not a multiple of N, the last element in the array will be less than N.

const str = 'codingbeautydev';

const result = str.match(/.{1,4}/g) ?? [];

// 👇 Last item is less than 4 characters long
console.log(result); // [ 'codi', 'ngbe', 'auty', 'dev' ];

Split string every N characters with for loop

Alternatively, we can use a for loop to split a string every N characters.

function splitString(str, N) {
  const arr = [];

  for (let i = 0; i < str.length; i += N) {
    arr.push(str.substring(i, i + N));
  }

  return arr;
}

// [ 'codi', 'ngbe', 'auty' ]
console.log(splitString('codingbeauty', 4));

// [ 'codi', 'ngbe', 'auty', 'dev' ]
console.log(splitString('codingbeautydev', 4));

Our splitString() function takes the string and the length each substring should have as arguments.

We use the for loop to iterate over the string in increments of N. On each iteration, we call the String substring() method to get a substring between index i and index i + N exclusive in the string, and add the substring to the resulting array.

Split string every N characters with reduce() method

Every time you see a for loop used to process input to get output, it’s a sign that the code can be refactored to be made more functional and declarative, using one or more Array methods.

Check out this method to split a string every N characters, where we use the reduce() method to create some nice functional magic:

const splitString = (str, N) =>
  [...str]
    .reduce(
      (substrings, ch) =>
        (substrings.at(-1)?.length ?? N) < N
          ? [...substrings.slice(0, -1), substrings.at(-1) + ch]
          : [...substrings, ch],
      []
    );

// [ 'codi', 'ngbe', 'auty' ]
console.log(splitString('codingbeauty', 4));

// [ 'codi', 'ngbe', 'auty', 'dev' ]
console.log(splitString('codingbeautydev', 4));

I don’t recommend this though; as far as performance is concerned, it’s significantly (over 30 times) slower than the previous method, and might be harder to understand. I included it because it’s an elegant one-liner solution that works.

Remove empty strings from array with filter() method

To remove empty strings from an array in JavaScript, call the filter() method on the array, passing a callback that returns true for every element in the array that is not an empty string. The filter() method will return a new array excluding the empty strings.

For example:

const arr = ['c', '', 'o', '', '', 'd', '', 'e'];

const noEmptyStrings = arr.filter((str) => str !== '');

console.log(noEmptyStrings); // [ 'c', 'o', 'd', 'e' ]

The Array filter() method creates a new array filled with elements that pass a test specified by a callback function. It doesn’t modify the original array.

const arr = [1, 2, 3, 4];

const filtered = arr.filter((num) => num > 2);
console.log(filtered); // [ 3, 4 ]

In our example, each element in the array will only pass the test if it is not an empty string (''). So no empty strings are included in the resulting array.

Remove empty strings from array with loop

Here’s an alternative way to remove empty strings from an array in JavaScript.

const arr = ['c', '', 'o', '', '', 'd', '', 'e'];

const noEmptyStrings = [];

for (const item of arr) {
  if (item !== '') {
    noEmptyStrings.push(item);
  }
}

console.log(noEmptyStrings); // [ 'c', 'o', 'd', 'e' ]

We create an array variable (noEmptyStrings) that will store the elements in the original array that are not empty strings. Then we use a for..of loop to iterate over the array. For each element, we check if it is a non-empty string, using an if statement. If it is, we add it to the array variable. At the end of the loop, we’ll have an array containing no empty strings.

Either method is okay, the main difference between them is that the first is declarative and functional. It’s a short one-liner that uses a pure function and is focused on the result. But the second method is imperative, as it emphasizes the steps taken to get that result.

Let’s learn how to easily subtract any number of minutes from a Date object in JavaScript.

1. Date getMinutes() and setMinutes() methods

To subtract minutes from a Date:

1. Call the getMinutes() method on the Date to get the minutes.
2. Subtract the minutes.
3. Pass the difference to the setMinutes() method.

For example:

function subtractMinutes(date, minutes) {
  date.setMinutes(date.getMinutes() - minutes);

  return date;
}

// 2:20 pm on May 18, 2022
const date = new Date('2022-05-18T14:20:00.000Z');

const newDate = subtractMinutes(date, 10);

// 2:10 pm on May 18, 2022
console.log(newDate); // 2022-05-18T14:10:00.000Z

Our subtractMinutes() function takes a Date object and the number of minutes to subtract as arguments. It returns the same Date object with the minutes subtracted.

The Date getMinutes() method returns a number between 0 and 59 that represent the minutes of a particular Date.

The Date setMinutes() method set the minutes of a Date to a specified number.

If the minutes subtracted decrease the hour, day, month, or year of the Date object, setMinutes() will automatically update the information in the Date to reflect this.

// 10:10 am on March 13, 2022
const date = new Date('2022-03-13T10:10:00.000Z');

date.setMinutes(date.getMinutes() - 30);

// 9:40 am on March 13, 2022
console.log(date); // 2022-05-18T14:10:00.000Z

In this example, decreasing the minutes of the Date by 30 rolls the hour back by 1.

Avoiding side effects

The setMinutes() method mutates the Date object it is called on. This introduces a side effect into our subtractMinutes() function. To avoid modifying the passed Date and create a pure function, make a copy of the Date and call setMinutes() on this copy, instead of the original.

function subtractMinutes(date, minutes) {
  // 👇 make copy with "Date" constructor
  const dateCopy = new Date(date);

  dateCopy.setMinutes(date.getMinutes() - minutes);

  return dateCopy;
}

const date = new Date('2022-02-20T11:25:00.000Z');

const newDate = subtractMinutes(date, 5);

// 11:20 am on Feb 20, 2022
console.log(newDate); // 2022-02-20T11:20:00.000Z

// 👇 Original not modified
console.log(date); // 2022-02-20T11:25:00.000Z

Tip: Functions that don’t modify external state (i.e., pure functions) tend to be more predictable and easier to reason about, as they always give the same output for a particular input. This makes it a good practice to limit the number of side effects in your code.

2. date-fns subMinutes() function

Alternatively, we can use the subMinutes() function from the date-fns NPM package to quickly subtract minutes from a Date in JavaScript. It works like our pure subtractMinutes() function.

import { subMinutes } from 'date-fns';

const date = new Date('2022-10-03T20:50:00.000Z');

const newDate = subMinutes(date, 25);

// 8:25 pm on October 3, 2022
console.log(newDate); // 2019-02-20T11:20:00.000Z

// Original not modified
console.log(date); // 2022-02-20T11:25:00.000Z