Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
Vue Answers

How to set default values for Vue component props and how to check if a user did not set the prop?

Labrador retriever puppy walking on green grass

Sometimes, we want to set default values for Vue component props and how to check if a user did not set the prop.

In this article, we’ll look at how to set default values for Vue component props and how to check if a user did not set the prop.

How to set default values for Vue component props and how to check if a user did not set the prop?

To set default values for Vue component props and how to check if a user did not set the prop, we can set the default property of the prop.

For instance, we write

export default {
  //...
  props: {
    year: {
      default: 2022,
      type: Number,
    },
  },
  //...
};

to add the year prop to the component.

We set its default value to 2022.

And we set its type to Number.

If year is 2022, then we know the prop isn’t set or it’s set to 2022.

Conclusion

To set default values for Vue component props and how to check if a user did not set the prop, we can set the default property of the prop.

Categories
JavaScript Answers

How to find variable type in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to find variable type in JavaScript.

In this article, we’ll look at how to find variable type in JavaScript.

How to find variable type in JavaScript?

To find variable type in JavaScript, we can use the typeof operator.

For instance, we write

typeof "foo"

to return 'string' since 'foo' is a string.

We can use this with other primitive values like numbers and booleans. It also works with functions.

Conclusion

To find variable type in JavaScript, we can use the typeof operator.

Categories
React Answers

How to detect Esc key press in React and handle it with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to detect Esc key press in React and handle it with JavaScript.

In this article, we’ll look at how to detect Esc key press in React and handle it with JavaScript.

How to detect Esc key press in React and handle it with JavaScript?

To detect Esc key press in React and handle it with JavaScript, we can create our own hook.

For instance, we write

import React, { useEffect } from "react";

const useEscape = (onEscape) => {
  useEffect(() => {
    const handleEsc = (event) => {
      if (event.keyCode === 27) onEscape();
    };
    window.addEventListener("keydown", handleEsc);

    return () => {
      window.removeEventListener("keydown", handleEsc);
    };
  }, []);
};

export default useEscape;

to create the useEscape hook that listens for the esc key press by listening to the keydown event.

In the handleEsc event handler, we listen for keyCode 27, which is the esc key press.

We remove the event handler with removeListener when we unmount the component that uses the hook.

Then we use it in our component by calling useEscape with a callback that does something when esc is pressed like

const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false));

Conclusion

To detect Esc key press in React and handle it with JavaScript, we can create our own hook.

Categories
JavaScript Answers

How to extend an object in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to extend an object in JavaScript.

In this article, we’ll look at how to extend an object in JavaScript.

How to extend an object in JavaScript?

To extend an object in JavaScript, we can use the Object.create method.

For instance, we write

const person = {
  name: "",
  greet() {
    console.log(`Hi, I am ${this.name}.`);
  },
};

const jack = Object.create(person);
jack.name = "Jack";
jack.greet();

to call Object.create with person to create an object that inherits the prototypes of person and the properties in person.

Then we add the name property to the jack object and call greet on it.

The greet method then should log 'Hi, I am Jack.'.

Conclusion

To extend an object in JavaScript, we can use the Object.create method.

Categories
JavaScript Answers

How to count a JavaScript object’s attributes?

Labrador retriever puppy walking on green grass

Sometimes, we want to count a JavaScript object’s attributes.

In this article, we’ll look at how to count a JavaScript object’s attributes.

How to count a JavaScript object’s attributes?

To count a JavaScript object’s attributes, we can use the Object.keys method.

For instance, we write

Object.keys(myObject).length;

to call Object.keys with myObject to get an array of non-inherited property keys in myObject.

Then we use the length property to get the number of properties in myObject.

Conclusion

To count a JavaScript object’s attributes, we can use the Object.keys method.