Category: JavaScript Answers

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 .

One way to add or update an attribute is to use the setAttribute method.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.setAttribute('style', 'color: red')

to set the text color of the div to red.

We call setAttribute with 'style' and 'color: red' to add the style attribute with the value in the 2nd argument.

Use Set the Property of the Element

We can also set the property with the attribute name to add an attribute.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.style = 'color: red'

Then we set the style attribute with the ‘color: red’ string.

We can set the style.top and style.left properties to position a div in a specific coordinate with JavaScript.

For instance, we can write:

<div>  
  hello world  
</div>

Then we can set the position of the div by writing:

const d = document.querySelector('div');  
d.style.position = "absolute";  
d.style.left = '10px';  
d.style.top = '20px';

We get the div with document.querySelector .

Then we set its position CSS property to 'absolute' with:

d.style.position = "absolute";

Then we set the left and top CSS properties with:

d.style.left = '10px';  
d.style.top = '20px';

The unit must be specified for left and top.