Category: JavaScript Answers

Replacing all occurrences of a string is something that we often have to do in a JavaScript app.

In this article, we’ll look at how to replace all occurrences of a string in a JavaScript app.

String.prototype.replaceAll

The replaceAll method is a new method that’s available as part of JavaScript strings since ES2021.

It’s supported by many recent browsers like Chrome, Edge, or Firefox.

To use it, we write:

const result = "1 abc 2 abc 3".replaceAll("abc", "def");

The first argument is the string we want to replace.

And the 2nd argument is the string we want to replace it with.

Therefore, result is '1 def 2 def 3' .

Split and Join

We can also split a string by the string that we want to replace and call join with the string that we want to replace the original string with,

For instance, we can write:

const result = "1 abc 2 abc 3".split("abc").join("def");

to split a string with 'abc' as the separator and call join with 'def' .

And we get the same result returned.

Regex Replace

We can replace a string with the given pattern with a new string.

For instance, we can write:

const result = "1 abc 2 abc 3".replace(/abc/g, 'def');

to replace all instances 'abc' with 'def' .

The g flag means we look for all instances with the given pattern.

We can also use the RegExp constructor to create our regex object:

const result = "1 abc 2 abc 3".replace(new RegExp('abc', 'g'), 'def');

While Loop and Includes

We can use the includes method to check if a string has a given substring.

So if it has a given substring, includes will return true .

Therefore, we can use it with the while loop to replace all instances of a substring with a new one by using includes in the condition.

For instance, we can write:

let str = "1 abc 2 abc 3";  
while (str.includes("abc")) {  
  str = str.replace("abc", "def");  
}

We use let so that we can reassign the value.

The only downside is that we have to mutate the str variable.

Conclusion

There are many ways to replace all instances of a substring with another one in JavaScript.

The newest and easier way to replace all substrings is to use the replaceAll method, which comes with ES2021 and is available with most recent browsers.

Checking if an array includes a value is something that we’ve to do often in a JavaScript app.

In this article, we’ll look at how to check if an array includes a given value in JavaScript.

Array.prototype.includes

The includes method is a method that’s included with the array instance.

It takes a value and compares it with === to check if an element is included.

For instance, we can write:

console.log(['apple', 'orange', 'grape'].includes('orange'));

If it’s included, then it returns true .

Otherwise, it returns false .

Array.prototype.indexOf

We can also use the indexOf method of an array instance to check if it includes a given element.

It also uses === for comparison.

And it returns the index of the first instance of an item if it exists.

Otherwise, it returns -1.

To use it, we write:

console.log(['apple', 'orange', 'grape'].indexOf('orange') >= 0);

Write Our Own

We can write our own function to search for a value.

For instance, we can write:

function contains(a, obj) {
  let i = a.length;
  while (i--) {
    if (a[i] === obj) {
      return true;
    }
  }
  return false;
}

console.log(contains(['apple', 'orange', 'grape'] , 'orange'));

We create the contains function that uses a while loop to search for an item.

If a[i] has the same value as obj then we return true .

If we loop through the whole a array and didn’t find anything that matches, then we return false .

Array.prototype.some

The some method is another array instance method that comes with JavaScript arrays.

It lets us pass in a callback to check if any items match the given condition.

For instance, we can write:

const items = [{
  a: '1'
}, {
  a: '2'
}, {
  a: '3'
}]

console.log(items.some(item => item.a === '3'))

We have an items array that has a bunch of objects.

And we call items.some with a callback to check if any items entry with a property equal to 3 exists.

some returns true if an item that matches the given condition exists and false otherwise.

Conclusion

There’re many ways to find if an array item exists in JavaScript.

A UNIX timestamp is the number of seconds since January 1, 1970 midnight UTC.

It’s often used so that we can do calculations with time easily.

In this article, we’ll look at how to get the UNIX timestamp from a date object in JavaScript.

The + Operator

We can use the + operator to convert the date object right to a UNIX timestamp.

For instance, we can write:

+new Date()

The + operator before the date object triggers the valueOf method in the Date object to return the timestamp as a number.

The getTime Method

We can call getTime to do the same thing.

For instance, we can write:

new Date().getTime()

to return the UNIX timestamp of a date.

Date.now Method

Date.now is a static method of the Date constructor that lets us get the current date-times timestamp.

For instance, we can write:

Date.now()

The timestamp is returned in milliseconds, so we have to divide it by 1000 and round it to get the timestamp in seconds.

To do that, we write:

Math.floor(Date.now() / 1000)

Math.floor rounds the number down to the nearest integer.

We can also round it with Math.round by writing:

Math.round(new Date().getTime() / 1000);

Number Function

The Number function is a global function that lets us convert a non-number object or primitive value to a number.

And we can use it to convert a date to a timestamp.

To do that, we write:

Number(new Date())

Then we get the timestamp in seconds returned since it triggers the valueOf method of the Date instance like the + operator.

Lodash _.now Method

Lodash also has a now method that returns the current timestamp.

To use it, we write:

_.now();

It’ll also return the current date’s timestamp.

Conclusion

There’re many ways to get the timestamp of the current date and time or the date-time that we want with JavaScript.

Using Sets

Removing duplicate entries from an array is a problem that we often have to solve there’re a few ways to do it. With ES6 or later, one of the easiest ways to do it is to convert it to a Set and then convert it back to an array.

We can convert an array to a Set by using the Set constructor. The constructor takes one argument, which is any iterable object. This means we can pass in an array, or other array-like objects like the arguments object, strings, NodeLists, TypedArrays like Uinit8Array, Map, other Sets and any other object that have a Symbol.iterator method.

We can also pass in null , which makes an empty set. Then we convert the set back to an array with the spread operator. For example, if we have an array, we can write the following code to convert it to a Set and back to an array to remove duplicate entries:

let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = [...new Set(arr)];
console.log(arr);

In the code above, we started off with arr having duplicate entries and at the end, we should have the following logged:

[1, 2, 3, 4, 5, 6]

Note that we use let in our declaration of our array. We need to use let so that we can assign the new array in the second back to our arr variable. The first occurrence of each entry is kept and the other repeat occurrences are discarded.

We can also use the Array.from method to convert a Set to an array. The first argument of the Array.from method is an array-like object, like the arguments object, strings, NodeLists, TypedArrays like Uinit8Array, Map, other Sets and any other object that has a Symbol.iterator method. This means that we can use it as an alternative to the spread operator inside an array-like in the following code:

let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = Array.from(new Set(arr));
console.log(arr);

With the code above, we should get the same output as in the first example.

Using Array.filter Method

Another alternative way to remove duplicates from an array is to use an array’s filter method. The filter method lets us filter out array entries that already exists. It takes a callback function that has 2 parameters, the first one is an array entry and the second one is the index of the array that’s being iterated to by the filter method.

The filter method filter let us defined what we want to keep and return a new array with the entries kept. We can use it along with the indexOf method, which returns the first occurrence of an array entry.

The indexOf method takes in any object that we want to look up the index to. We can use it to filter out duplicate occurrences of array entries like in the following code:

let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = arr.filter((entry, index) => arr.indexOf(entry) === index);
console.log(arr);

The callback function in the filter returns the condition of the array items that we want to keep. In the code above, we want to return arr.indexOf(entry) === index since we want to return the first occurrence of each entry only. arr.indexOf(entry) returns the index of the first occurrence of an entry and the index is the array entry that we want to check against as the filter method is iterating through it.

The first iteration of the filter method should have entry being 1 and index being 0, so we get:

arr.indexOf(1) === 0

which evaluates to true since indexOf gets the index of the first entry so it returns 0, so the filter method will keep it. In the next iteration, we have entry being 1 again and index being 1, so we get:

arr.indexOf(1) === 1

We already know that arr.indexOf(1) is 0 but the right side is 1. This means the expression will be evaluated to false , so the filter method will discard it. For the third entry, we have entry having the value 2, and index being 2. Then we get:

arr.indexOf(2) === 2

arr.indexOf(2) will return 2 since the first occurrence of 2 is 2, and we have 2 on the right side since index is 2, so the expression evaluates to true , so it’ll be kept in the returned array. This goes on until all the entries are iterated through and checked. Therefore, we should get the same entries as the other examples above.

Using Array.reduce Method

A third way to remove duplicate entries from an array is to use the reduce method. The method combines the entries of an array into one entity according to what we specify in the callback function that we pass in and returns the combined entity.

The reduce method takes in a function that has 2 parameters, the first parameter has array that entries that have the entries that were combined so far by the reduce method, and the second parameter has the entry that is to be combined into the first value in the first parameter.

The second argument is the initial value that the first parameter of the callback function will take on. For example, we can use it to filter out duplicate arrays like in the following code:

let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = arr.reduce((noDupArr, entry) => {
  if (noDupArr.includes(entry)) {
    return noDupArr;
  } else {
    return [...noDupArr, entry];
  }
}, [])
console.log(arr);

In the code above, we pass in a callback function that checks if the noDupArr , which is an array without any duplicate values, includes the entry in the second parameter by using the includes method that comes with arrays. The includes method takes in any object and lets us check if it’s already inside noDupArr . Therefore, if noDupArr.includes(entry) is true , then we return whatever has been combined so far. Otherwise, if the value hasn’t been included in the array already, then we can append the entry , by using the spread operator to spread the existing entries of noDupArr into a new array, then we add entry as the last entry of the array.

With this logic, the subsequent occurrences of values after the first value won’t be included in the newly combined array. Therefore, we won’t have duplicate entries included in the array. Initially, noDupArr will be an entry as specified by the second argument of the reduce method.

Empty an Array

There are a few ways to empty an array. We can either set it to an empty array or set the array’s length to 0. For example, we can set it to an empty array like in the following code:

let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = [];
console.log(arr);

The code above is the most obvious way to do it. A less known way to empty an array is to set its length to 0, as we do below:

let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr.length = 0;
console.log(arr);

Then we should also get an empty array for arr .

With ES6 or later, we can fill arrays with an array with new data with the fill method. The fill method takes up to 3 arguments. The first is the value we want to add to the array.

The second optional argument is the start index of which we want to start filling data.

The default value of the second argument is 0. The third argument is an optional one that lets us specify the end index of to fill the array entry up to.

The default value for the third argument is the length of the array. Note that the end index itself is excluded from the filling so it won’t overflow when we call the fill method.

The fill the method returns a new array with the new values filled in. All existing values that were filled will replace any existing values that were in the original array.

For example, we can use it in the following way:

let arr = [1, 2, 3, 4, 5, 6];
arr = arr.fill(8)
console.log(arr);

Then we get the following output from the console.log :

[8, 8, 8, 8, 8, 8]

We can also change the index of the fill method to specify the fill boundary. For example, we can write:

let arr = [1, 2, 3, 4, 5, 6];
arr = arr.fill(8, 3, 5)
console.log(arr);

Then we get:

[1, 2, 3, 8, 8, 6]

from the console.log . If we specify an end index that’s over the length of the original array, then it’ll replace the values up to the original array up to the last position of the original array. For example, if we have:

let arr = [1, 2, 3, 4, 5, 6];
arr = arr.fill(8, 3, 10)
console.log(arr);

Then we get:

[1, 2, 3, 8, 8, 8]

We can also use negative indexes to specify the fill boundary with the fill method. The last position of the array would be -1, the second last would be -2, and so on. So we can call fill with negative indexes like the following:

let arr = [1, 2, 3, 4, 5, 6];
arr = arr.fill(8, -4, -1)
console.log(arr);

Then we get:

[1, 2, 8, 8, 8, 6]

since the third argument doesn’t include the last index. If we want to fill the last element as well with the new value, then we just omit the last argument like in the following code:

let arr = [1, 2, 3, 4, 5, 6];
arr = arr.fill(8, -4)
console.log(arr);

We get [1, 2, 8, 8, 8, 8] when we run the code above. If the second argument’s value is bigger than the third argument, then no fill operation will take place and the original array is returned. For example, if we have:

let arr = [1, 2, 3, 4, 5, 6];
arr = arr.fill(8, 4, 1)
console.log(arr);

Then we get back [1, 2, 3, 4, 5, 6] which is the original array.