Category: JavaScript

Sometimes, we want to access a JavaScript object which has spaces in the object’s key.

In this article, we’ll look at how to access a JavaScript object which has spaces in the object’s key.

How to access a JavaScript object which has spaces in the object’s key?

To access a JavaScript object which has spaces in the object’s key, we use square brackets.

For instance, we write

myTextOptions["character names"].kid;

to get the "character names" property from myTextOptions.

Then we get the kid property from the returned object.

Conclusion

To access a JavaScript object which has spaces in the object’s key, we use square brackets.

Sometimes, we want to compress an image via JavaScript in the browser.

In this article, we’ll look at how to compress an image via JavaScript in the browser.

How to compress an image via JavaScript in the browser?

To compress an image via JavaScript in the browser, we can use the compressorjs library.

To install it, we run

npm i compressorjs

Then we write

import axios from "axios";
import Compressor from "compressorjs";

document.getElementById("file").addEventListener("change", (e) => {
  const file = e.target.files[0];

  if (!file) {
    return;
  }

  new Compressor(file, {
    quality: 0.6,
    async success(result) {
      const formData = new FormData();
      formData.append("file", result, result.name);
      await axios.post("/path/to/upload", formData);
      console.log("Upload success");
    },
    error(err) {
      console.log(err.message);
    },
  });
});

to select the file input with getElementById.

Then we call addEventListener to listen to the change event.

In the event listener, we get the first selected file with

const file = e.target.files[0];

Then we create a Compressor object with the selected file and then get the compressed file from the success method.

In success, we upload the result with axios.post.

Conclusion

To compress an image via JavaScript in the browser, we can use the compressorjs library.

Sometimes, we want to clear text selection with JavaScript.

In this article, we’ll look at how to clear text selection with JavaScript.

How to clear text selection with JavaScript?

To clear text selection with JavaScript, we can use the empty method.

For instance, we write

window.getSelection().empty();

to call getSelection to get the select text in an object.

Then we call empty to clear the selection.

Conclusion

To clear text selection with JavaScript, we can use the empty method.

Sometimes, we want to fix JavaScript map function return undefined.

In this article, we’ll look at how to fix JavaScript map function return undefined.

How to fix JavaScript map function return undefined?

To fix JavaScript map function return undefined, we use filter instead of map for filtering.

For instance, we write

const arr = ["a", "b", 1];
const results = arr.filter((item) => {
  return typeof item === "string";
});

to call arr.filter with a callback that returns if the item in arr has type 'string'.

If it is, we add it to the returned array.

Otherwise, we skip it.

Conclusion

To fix JavaScript map function return undefined, we use filter instead of map for filtering.

Sometimes, we want to detect if input is focused with JavaScript

In this article, we’ll look at how to detect if input is focused with JavaScript

How to detect if input is focused with JavaScript?

To detect if input is focused with JavaScript, we can check is document.activeElement is the input.

For instance, we write

e.target === document.activeElement

in an event handler to check if the element that triggered the event, which is e.target is the same as document.activeElement.

document.activeElement is the element that has focus on the page.

Conclusion

To detect if input is focused with JavaScript, we can check is document.activeElement is the input.