Tari Ibaba

1. String replace() Method

To extract a number from a string in JavaScript, call the replace() method on the string with a regex to replace all the non-digit characters in the original string. For example:

const str = 'The number 345 has three digits';

const replaced = str.replace(/\D/g, '');
console.log(replaced); // 345

The String replace() method returns a new string with the matches of a pattern replaced by a replacement. We pass a regular expression that matches all the non-digit characters so that we can replace them with an empty string ('') to remove them.

The \D regex metacharacter matches any non-digit characters in a string.

The g (global) flag specifies that every occurrence of a non-digit character in the string should be matched by the regex.

If we don’t pass the global flag, only the first non-digit character in the input string will be matched and replaced:

const str = 'The number 345 has three digits';

// No 'g' flag in regex
const replaced = str.replace(/\D/, '');

console.log(replaced); // he number 345 has three digits

2. String match() Method

To extract a number from a string, we can also call the match() method on the string, passing a regex that matches a consecutive sequence of digits. For example:

const str = 'The number 345 has three digits';

const matches = str.match(/\d+/);
const numStr = matches[0];

console.log(numStr); // 345

The String match() method matches a string against a regular expression and returns the results. In our case, the matched number is the first item of the array, so we access the 0 property with bracket notation to get it.

The \d metacharacter is used to find a digit in a string. We add the + to \d in order to find a consecutive sequence of digits.

This second method is better when trying to extract each number in the string separately, as it treats a consecutive sequence of digits as a separate match. To extract each number separately, we’ll need to add the g flag:

const str = 'The numbers 345 and 847 have three digits';

const matches = str.match(/\d+/g);
console.log(matches); // [ '345', '847' ]

const str = 'There are no numbers in this string';

const matches = str.match(/\d+/g);
console.log(matches); // null

In this article, we’re going to learn how to easily add number of hours to a Date object in JavaScript.

1. Date setHours() and getHours() methods

To add hours to a Date in JavaScript:

1. Call the getHours() on the Date to get the hours.
2. Add the hours.
3. Pass the sum to the setHours() method.

For example:

function addHours(date, hours) {
  date.setHours(date.getHours() + hours);

  return date;
}

const date = new Date('2022-05-15T12:00:00.000Z');

const newDate = addHours(date, 5);

console.log(newDate); // 2022-05-15T17:00:00.000Z

The Date getHours() method returns a number between 0 and 23 that represents the hours of a particular date.

The Date setHours() method sets the hours of a date to a specified number.

If the hours added would increase the day, month, or year of the Date, setHours() will automatically update the date information to reflect this.

// 11 PM on June 17, 2022
const date = new Date('2022-06-17T23:00:00.000Z');

date.setHours(date.getHours() + 4);

// 3 AM on June 18, 2022 (next day)
console.log(date); // 2022-06-18T03:00:00.000Z

In this example, increasing the hours of the date by 4 moves the day forward to June 18, 2022.

Avoid side effects

The setHours() method mutates the Date object it is called on. This introduces a side effect into our addHours() function. To make a pure function, create a copy of the Date and call setHours() on this copy, instead of the original. For example:

function addHours(date, hours) {
  // 👇 Make copy with "Date" constructor.
  const dateCopy = new Date(date);

  dateCopy.setHours(dateCopy.getHours() + hours);

  return dateCopy;
}

const date = new Date('2022-05-15T12:00:00.000Z');

const newDate = addHours(date, 2);
console.log(newDate); // 2022-05-15T14:00:00.000Z

// 👇 Original not modified
console.log(date); // 2022-05-15T12:00: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 addHours() function

Alternatively, you can use the addHours() function from the date-fns NPM package to quickly add hours to a Date. It works like our pure addHours() function.

import { addHours } from 'date-fns';

const date = new Date('2022-05-15T12:00:00.000Z');

const newDate = addHours(date, 4);
console.log(newDate); // 2022-05-15T16:00:00.000Z

// Original not modified
console.log(date); // 2022-05-15T12:00:00.000Z

To get the last N characters of a string in JavaScript, call the slice() method on the string, passing -N as an argument. For example, str.slice(-3) returns a new string containing the last 3 characters of str.

const str = 'Coding Beauty';

const last3 = str.slice(-3);
console.log(last3); // uty

const last6 = str.slice(-6);
console.log(last6); // Beauty

const last10 = str.slice(-10);
console.log(last10); // ing Beauty

The String() slice() method returns the portion of a string between the start and end indexes, which are specified by the first and second arguments respectively. When we only specify a start index, it returns the entire portion of the string after this start index.

When we pass a negative number as an argument, slice() counts backward from the last string character to find the equivalent index. So passing -N to slice() specifies a start index of str.length - N.

const str = 'Coding Beauty';

const last6 = str.slice(-6);
console.log(last6); // Beauty

const last6Again = str.slice(str.length - 6);
console.log(last6Again); // Beauty

const str = 'Coding Beauty';

const last50 = str.slice(-50);
console.log(last50); // Coding Beauty

const str = 'Coding Beauty';

const last3 = str.substring(str.length - 3);
console.log(last3); // uty

const str = 'Coding Beauty';

// -3 is negative, uses 0 instead
const notLast3 = str.substring(-3);

console.log(notLast3); // Coding Beauty

To get the last two characters of a string in JavaScript, call the slice() method on the string, passing -2 as an argument. For example, str.slice(-2) returns a new string containing the last two characters of str.

const str = 'Coding Beauty';

const last2 = str.slice(-2);
console.log(last2); // ty

The String() slice() method returns the portion of a string between the start and end indexes, which are specified by the first and second arguments respectively. When only a start index is specified, it returns the entire portion of the string after this start index.

When we pass a negative number as an argument, slice() counts backward from the last string character to find the equivalent index. So passing -2 to slice() specifies a start index of str.length - 2.

const str = 'Coding Beauty';

const last2 = str.slice(-2);
console.log(last2); // ty

const last2Again = str.slice(str.length - 2);
console.log(last2Again); // ty

const str = 'Coding Beauty';

const last50 = str.slice(-50);
console.log(last50); // Coding Beauty

const str = 'Coding Beauty';

const last3 = str.substring(str.length - 3);
console.log(last3); // uty

const str = 'Coding Beauty';

// -2 is negative, uses 0 instead
const notLast2 = str.substring(-2);

console.log(notLast2); // Coding Beauty

1. String slice() Method

To get the first N characters of a string in JavaScript, call the slice() method on the string, passing 0 as the first argument and N as the second. For example, str.slice(0, 2) returns a new string containing the first 2 characters of str.

const str = 'Coding Beauty';

const first2 = str.slice(0, 2);
console.log(first2); // Co

const first6 = str.slice(0, 6);
console.log(first6); // Coding

const first8 = str.slice(0, 8);
console.log(first8); // Coding B

The String slice() method extracts the part of a string between the start and end indexes, which are specified by the first and second arguments respectively. The substring between the indexes 0 and N is a substring containing only the first N string characters.

const str = 'Coding Beauty';

const first2 = str.slice(0, 2);
console.log(first2); // Co

// Original not modified
console.log(str); // Coding Beauty

2. String substring() Method

To get the first N characters of a string, we can also call the substring() method on the string, passing 0 and N as the first and second arguments respectively. For example, str.substring(0, 3) returns a new string containing the first 3 characters of str.

const str = 'Coding Beauty';

const first3 = str.substring(0, 3);
console.log(first3); // Cod

const first5 = str.substring(0, 5);
console.log(first5); // Codin

const first11 = str.substring(0, 11);
console.log(first11); // Coding Beau

Like slice(), substring() returns the part of a string between the start and end indexes, which are specified by the first and second arguments respectively.

const str = 'Coding Beauty';

const first3 = str.substring(0, 3);
console.log(first3); // Cod

// Original not modified
console.log(str); // Coding Beauty

const str = 'Coding Beauty';

const substr1 = str.substring(2, 0);
const substr2 = str.slice(2, 0);

// Equivalent to str.substring(0, 2)
console.log(substr1); // Co

console.log(substr2); // '' (empty string)

1. String slice() Method

To get the first two characters of a string in JavaScript, call the slice() method on the string, passing 0 and 2 as the first and second arguments respectively. For example, str.slice(0, 2) returns a new string containing the first two characters of str.

const str = 'Coding Beauty';

const firstTwoChars = str.slice(0, 2);
console.log(firstTwoChars); // Co

The String slice() method extracts the part of the string between the start and end indexes, which are specified by the first and second arguments respectively. The substring between the indexes 0 and 2 is a substring containing only the first two string characters.

const str = 'Coding Beauty';

const first2 = str.slice(0, 2);
console.log(first2); // Co

// Original not modified
console.log(str); // Coding Beauty

2. String substring() Method

Alternatively, to get the first two characters of a string, we can call the substring() method on the string, passing 0 and 2 as the first and second arguments respectively. For example, str.substring(0, 2) returns a new string containing the first two characters of str.

const str = 'Coding Beauty';

const firstTwoChars = str.substring(0, 2);
console.log(firstTwoChars); // Co

Like slice(), the substring() method returns the part of a string between the start and end indexes, which are specified by the first and second arguments respectively.

const str = 'Coding Beauty';

const first2 = str.substring(0, 2);
console.log(first2); // Co

// Original not modified
console.log(str); // Coding Beauty

const str = 'Coding Beauty';

const subStr1 = str.substring(2, 0);
const subStr2 = str.slice(2, 0);

// Equivalent to str.substring(0, 2)
console.log(subStr1); // Co

console.log(subStr2); // '' (empty string)

In this article, we’ll be looking at multiple ways to easily get the first character of a string in JavaScript.

1. String charAt() method

To get the first character of a string, we can call charAt() on the string, passing 0 as an argument. For example, str.charAt(0) returns the first character of str.

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str.charAt(0);
console.log(firstChar); // C

The String charAt() method returns the character of a string at the specified index. The index of the first character is 0.

2. Bracket ([]) notation property access

Alternatively, to get the first character of a string, we can access the 0 property of the string using the bracket notation ([]):

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str['0'];
console.log(firstChar); // C

Bracket notation property access is a useful alternative to dot notation when the property name is an invalid JavaScript identifier. For example, attempting to access the 0 property with dot notation will result in a syntax error, as 0 is not a valid identifier:

JavaScriptCopied!

const str = 'Coding Beauty';

// SyntaxError: Unexpected number
const firstChar = str.0;

console.log(firstChar);

Since 0 is a whole number, we don’t need to wrap it in quotes to access it. We can pass a number directly, just like we do with arrays.

JavaScriptCopied!

const str = 'Coding Beauty';

// Quotes are not needed to pass 0
const firstChar = str[0];

console.log(firstChar); // C

Accessing a property that doesn’t exist returns undefined in JavaScript. So this method is unlike charAt(), which returns an empty string (''):

JavaScriptCopied!

const str = 'Coding Beauty';

const char1 = str[20];
const char2 = str.charAt(20);

console.log(char1); // undefined
console.log(char2); // '' (empty string)

3. String substring() method

With this method, we call substring() on the string, passing 0 as the first argument and 1 as the second.

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str.substring(0, 1);
console.log(firstChar); // C

The String substring() method returns the part of a string between the start and end indexes, which are specified by the first and second arguments respectively. The substring between the indexes 0 and 1 is a substring containing only the first string character.

4. String slice() method

With this method, we call slice() on the string, passing 0 as the first argument and 1 as the second.

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str.slice(0, 1);
console.log(firstChar); // C

The String slice() method extracts the part of string between the start and end indexes, which are specified by the first and second arguments respectively. The substring between the indexes 0 and 1 is a substring containing only the first string character.

Note

The slice() and substring() method work similarly for our use case, but this isn’t always so. One of the differences between them is that while substring() swaps its arguments if the first is greater than the second, slice() returns an empty string:

JavaScriptCopied!

const str = 'Coding Beauty';

const subStr1 = str.substring(6, 0);
const subStr2 = str.slice(6, 0);

// Equivalent to str.substring(0, 6)
console.log(subStr1); // Coding

console.log(subStr2); // '' (empty string)


5. String at() method

Another way to get the first character of a string is with the String at() method, newly added in ES2022. We call at() on the string, passing 0 as an argument.

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str.at(0);
console.log(firstChar); // C

The String at() method returns the character of a string at the specified index.

When negative integers are passed to at(), it counts back from the last string character. This is unlike charAt(), which returns an empty string:

JavaScriptCopied!

const str = 'Coding Beauty';

const char1 = str.at(-3);
const char2 = str.charAt(-3);

console.log(char1); // u
console.log(char2); // '' (empty string)

1. String replaceAll() Method

To remove all spaces from a string in JavaScript, call the replaceAll() method on the string, passing a string containing a space as the first argument and an empty string ('') as the second. For example, str.replaceAll(' ', '') removes all the spaces from str.

const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');

console.log(allSpacesRemoved); // ABC

The String replaceAll() method returns a new string with all matches of a pattern replaced by a replacement. The first argument is the pattern to match, and the second argument is the replacement. So, passing the empty string as the second argument replaces all the spaces with nothing, which removes them.

const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');

console.log(allSpacesRemoved); // ABC

// Original not modified
console.log(str); // A B C

2. String replace() Method with Regex

Alternatively, we can remove all spaces from a string by calling the replace() method on the string, passing a regular expression matching any space as the first argument, and an empty string ('') as the second.

const str = 'A B C';
const allSpacesRemoved = str.replace(/ /g, '');

console.log(allSpacesRemoved); // ABC

We use the g regex flag to specify that all spaces in the string should be matched. Without this flag, only the first space will be matched and replaced:

const str = 'A B C';

// No 'g' flag in regex
const spacesRemoved = str.replace(/ /, '');

// Only first space removed
console.log(spacesRemoved); // AB C

The String replace() method returns a new string with all the matches replaced with the second argument passed to it. We pass an empty string as the second argument to replace all the spaces with nothing, which removes them.

const str = 'A B C';
const spacesRemoved = str.replace(/ /g, '');

console.log(spacesRemoved); // ABC

// Original not modified
console.log(str); // A B C

const str = 'A B C \t D \n E';
const whitespaceRemoved = str.replace(/\s/g, '');

console.log(whitespaceRemoved); // ABC

To remove all whitespace from a string in JavaScript, call the replace() method on the string, passing a regular expression that matches any whitespace character, and an empty string as a replacement. For example, str.replace(/\s/g, '') returns a new string with all whitespace removed from str.

const str = '1 2 3';

const whitespaceRemoved = str.replace(/\s/g, '');
console.log(whitespaceRemoved); // 123

The \s regex metacharacter matches whitespace characters, such as spaces, tabs, and newlines.

We use the g regex flag to specify that all whitespace characters in the string should be matched. Without this flag, only the first whitespace will be matched and replaced:

const str = '1 2 3';

// No 'g' flag in regex
const whitespaceRemoved = str.replace(/\s/, '');

// Only first whitespace removed
console.log(whitespaceRemoved); // 12 3

The replace() method returns a new string with all the matches replaced with the second argument passed to it. We pass an empty string ('') as the second argument to replace all the whitespace with nothing, which effectively removes them.

const str = '1 2 3';
const whitespaceRemoved = str.replace(/\s/g, '');

console.log(whitespaceRemoved); // 123

// Not modified
console.log(str); // 1 2 3

In this article, we’ll be looking at different ways to find the odd numbers in an array using JavaScript.

1. Array filter() Method

To find the odd numbers in an array, we can call the Array filter() method, passing a callback that returns true when the number is odd, and false otherwise.

const numbers = [8, 19, 5, 6, 14, 9, 13];

const odds = numbers.filter((num) => num % 2 === 1);
console.log(odds); // [19, 5 , 9, 13]

The filter() method creates a new array with all the elements that pass the test specified in the testing callback function. So, filter() returns an array of all the odd numbers in the original array.

2. Array forEach() Method

Another way to find the odd numbers in a JavaScript array is with the Array forEach() method. We call forEach() on the array, and in the callback, we only add an element to the resulting array if it is odd. For example:

const numbers = [8, 19, 5, 6, 14, 9, 13];

const odds = [];
numbers.forEach((num) => {
  if (num % 2 === 1) {
    odds.push(num);
  }
});

console.log(odds); // [19, 5, 9, 13]

3. for…of Loop

We can use the for...of loop in place of forEach() to iterate through the array:

const numbers = [8, 19, 5, 6, 14, 9, 13];

const odds = [];
for (const num of numbers) {
  if (num % 2 === 1) {
    odds.push(num);
  }
}
console.log(odds); // [19, 5, 9, 13]