Author: John Au-Yeung

We can use the Object.entries to get an object’s keys and values in an array of key-value pairs.

And we can use Object.fromEntries to convert an array of key-value pairs to an object.

Therefore, we can use them to swap the keys and values of an object.

For instance, we can write:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
const swapped = Object.fromEntries(Object.entries(obj).map(a => a.reverse()))
console.log(swapped)

We have the obj opbject that we want to swap the keys and values for.

To do that, we call Object.entries with obj .

Then we call map to call reverse on each entry to do the swap.

And then we call Object.fromEntries on the array returned by map to convert it back to an object.

And we get:

{1: "a", 2: "b", 3: "c"}

as the value of swapped .

We can do the same swap by using destructuring:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
const swapped = Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]))
console.log(swapped)

We destructure the parameter of the map callback and return the 2 items swapped.

One way to check if 2 JavaScript arrays have the same items in them is to sort them and then convert them to a string.

This works if all the array items are primitive values.

For instance, we can write:

const array1 = [10, 6, 19, 16, 14, 15, 2, 9, 5, 3, 4, 13, 8, 7, 1, 12, 18, 11, 20, 17];
const array2 = [12, 18, 20, 11, 19, 14, 6, 7, 8, 16, 9, 3, 1, 13, 5, 4, 15, 10, 2, 17];

if (array1.sort().join(',') === array2.sort().join(',')) {
  console.log('same');
}

We call sort on array1 and array2 .

Then we call join on both to join all the items in each array into one string separated by commas.

If they’re the same in string form, then 'same' is logged.

Use the Lodash isEmpty and xor Methods

The Lodash isEmpty method lets us check if an array is empty.

xor lets us create an array that has items that’s either in one array or the other.

Therefore, we can use it to check if 2 arrays are the same.

For instance, we can write:

const array1 = [10, 6, 19, 16, 14, 15, 2, 9, 5, 3, 4, 13, 8, 7, 1, 12, 18, 11, 20, 17];
const array2 = [12, 18, 20, 11, 19, 14, 6, 7, 8, 16, 9, 3, 1, 13, 5, 4, 15, 10, 2, 17];

if (_.isEmpty(_.xor(array1, array2))) {
  console.log('same');
}

We call xor with array1 and array2 to returns an array with items that are only in array1 or array2 .

And we call isEmpty with the returned array to check if it’s empty.

Since it’s empty, there are no items from each array that is exclusive to only that array.

Therefore, 'same' is logged.

We can use the regex test method to check if the inputted string is alphanumeric.

For instance, if we have the following input:

<input>

We can check if what we typed in is alphanumeric by writing:

const input = document.querySelector('input');
input.addEventListener('change', (e) => {
  if (/^[a-z0-9]+$/i.test(e.target.value)) {
    console.log('is alphanumeric')
  }
})

We get the input element with document.querySelector .

Then we listen to the change event by calling addEventListener .

And in the event handler callback, we get the inputted value with e.target.value .

We call test on the /^[a-z0–9]+$/i , which is the pattern to check if a string is alphanumeric.

If it’s alphanumeric, then ‘is alphanumeric’ is logged.

We can get the file’s name with the name property.

For instance, if we have the following HTML:

<input type='file'>

Then we can listen for file selection and get the name of the selected file by writing:

const input = document.querySelector('input');
input.addEventListener('change', (e) => {
  const [file] = e.target.files;
  console.log(file.name)
})

We get the file input with document.querySelector .

Then we call addEventListener on it to listen to the change event.

In the event handler function, we get the first file selected from e.target.files and assign it to the file variable.

And then we get the name of the selected file with file.name .