Author: John Au-Yeung

Sometimes, we want to merge 2 arrays of objects with JavaScript.

In this article, we’ll look at how to merge 2 arrays of objects with JavaScript.

How to merge 2 arrays of objects with JavaScript?

To merge 2 arrays of objects with JavaScript, we can use the spread operator.

For instance, we write

const arr1 = new Array(
  { name: "lang", value: "German" },
  { name: "age", value: "33" }
);
const arr2 = new Array(
  { name: "childs", value: "5" },
  { name: "lang", value: "French" }
);
const arr3 = [...arr1, ...arr2];

to merge arr1 and arr2 into one array by spreading the entries of arr1 and arr2 into a new array.

And then we assign that to arr3.

Conclusion

To merge 2 arrays of objects with JavaScript, we can use the spread operator.

Sometimes, we want to auto-submit an upload form when a file is selected with JavaScript.

In this article, we’ll look at how to auto-submit an upload form when a file is selected with JavaScript.

How to auto-submit an upload form when a file is selected with JavaScript?

To auto-submit an upload form when a file is selected with JavaScript, we can listen for the change event triggered by the file input.

And we call the form’s submit method when the change event of the file input is emitted.

For instance, we write

<form action="http://example.com">
  <input type="file" />
</form>

to add the form with the file input.

Then we write

const form = document.querySelector("form");
const input = document.querySelector("input");
input.onchange = () => {
  form.submit();
};

to select the form and input with querySelector.

And we set the input.onchange property to a function that calls form.submit to submit the form when the file selection is changed.

Conclusion

To auto-submit an upload form when a file is selected with JavaScript, we can listen for the change event triggered by the file input.

And we call the form’s submit method when the change event of the file input is emitted.

Sometimes, we want to scroll back to the top of scrollable div with JavaScript.

In this article, we’ll look at how to scroll back to the top of scrollable div with JavaScript.

How to scroll back to the top of scrollable div with JavaScript?

To scroll back to the top of scrollable div with JavaScript, we can set the scrollTop property of the scrollable div to 0.

For instance, we write

const myDiv = document.getElementById("containerDiv");
//...
myDiv.scrollTop = 0;

to get the div with getElementById.

Then we set the scrollTop property of myDiv to 0 to scroll to the top of the scrollable div.

Conclusion

To scroll back to the top of scrollable div with JavaScript, we can set the scrollTop property of the scrollable div to 0.

Sometimes, we want to get child node index with JavaScript.

In this article, we’ll look at how to get child node index with JavaScript.

How to get child node index with JavaScript?

To get child node index with JavaScript, we can use the Array.from method.

For instance, we write

const index = Array.from(element.parentNode.children).indexOf(element);

to get the child nodes of element with element.parentNode.children.

Then we convert it to an array with Array.from.

Next, we call indexOf with element to get the index of element in the array.

Conclusion

To get child node index with JavaScript, we can use the Array.from method.

Sometimes, we want to create a simple, non-secure hash function for JavaScript.

In this article, we’ll look at how to create a simple, non-secure hash function for JavaScript.

How to create a simple, non-secure hash function for JavaScript?

To create a simple, non-secure hash function for JavaScript, we can create our own function.

For instance, we write

const hashCode = (str) => {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = (hash << 5) - hash + char;
    hash = hash & hash;
  }
  return hash;
};

to create the hashCode function that takes the str string and creates a hash.

In it, we loop through the characters in str.

And we update the hash by doing a left shift by 5 bits.

Then we subtract the hash and add the character code of the character at i to it.

And the we convert hash to a 32 bit integer with hash & hash.

Conclusion

To create a simple, non-secure hash function for JavaScript, we can create our own function.