Categories
JavaScript Answers

How to Compute the Intersection of Two Arrays in JavaScript?

Sometimes, we want to compute the intersection of two arrays in JavaScript.

In this article, we’ll look at how to compute the intersection of two arrays in JavaScript.

Compute the Intersection of Two Arrays in JavaScript

To compute the intersection of two arrays in JavaScript, we can use the array filter method with the includes method to get the elements that are in both arrays and return them in an array.

For instance, we can write:

const arr1 = ["mike", "sue", "tom", "kathy", "henry"];
const arr2 = ["howey", "jim", "sue", "jennifer", "kathy", "hank", "alex"];

const result = arr1.filter((n) => {
  return arr2.includes(n);
});
console.log(result)

to get all the name strings that are in both arr1 and arr2 by calling arr1.filter with a callback that returns the condition that the items are also included with arr2 with arr2.includes(n) .

Then we assign the returned result to result .

Therefore, result is [“sue”, “kathy”] .

Conclusion

To compute the intersection of two arrays in JavaScript, we can use the array filter method with the includes method to get the elements that are in both arrays and return them in an array.

Categories
JavaScript Answers

How to Find All the Days in a Month with the JavaScript Date Object?

yellow labrador puppies in green plastic container

Sometimes, we want to find all the days in a month with the JavaScript Date object.

In this article, we’ll look at how to find all the days in a month with the JavaScript Date object.

Find All the Days in a Month with the JavaScript Date Object

To find all the days in a month with the JavaScript Date object, we can create an array with the all dates of the month in it.

To do this, we write:

const getDaysInMonth = (month, year) => {
  return new Array(31)
    .fill('')
    .map((v, i) => new Date(year, month - 1, i + 1))
    .filter(v => v.getMonth() === month - 1)
}

console.log(getDaysInMonth(2, 2020))

We create an array with 31 entries initally with new Array(31) .

Then we call fill to fill the empty slots with empty strings.

Next, w call map to map each index, with the dates of the month with new Date(year, month — 1, i + 1) .

JavaScript date months starts with 0 for January to 11 for December, so we’ve to subtract month by 1.

And we’ve to add 1 to 1 to get all the days of the month.

If the day of the month exceeds, the max, the month will be incremented by 1.

So we can just call filter to filter out all the dates with the month that’s 1 more than month — 1 to get the right dates for month .

Therefore, the console log should have 29 days in it since February 2020 has 29 days.

Conclusion

To find all the days in a month with the JavaScript Date object, we can create an array with the all dates of the month in it.

Categories
React Answers

How to add external JavaScript files with script tags in React Next.js?

Labrador retriever puppy walking on green grass

To add external JavaScript files with script tags in React Next.js, we add the script tags into the Head component.

For instance, we write

import Head from "next/head";

const Layout = (props) => (
  <div>
    <Head>
      <script type="text/javascript" src="..."></script>
      <script type="text/javascript" src="/js/myscript.js"></script>
    </Head>
    <p id="demo"></p>
  </div>
);

export default Layout;

to add the script tags into the Next.js Head component.

Categories
React Answers

How to focus a React Material UI TextField on button click?

Labrador retriever puppy walking on green grass

To focus a React Material UI TextField on button click, we assign a ref to the TextField by assign a ref to the inputRef orop of the TextField.

Then we can call focus on the element we get from the ref.

For instance, we write

import React, { useState, useRef } from "react";

const Comp = (props) => {
  const textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            textInput.current.focus();
          }, 100);
        }}
      >
        Focus TextField
      </Button>
      <TextField
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
      />
    </div>
  );
};

to call the useRef to create the textInput ref.

Then we assign textInput as the value of the inputRef prop.

And then we call textInput.current.focus( to focus the element in the button’s click handler.

Categories
React Answers

How to simulate keydown on document with Jest?

Labrador retriever puppy walking on green grass

To simulate keydown on document with Jest, we create a new KeyboardEvent instance.

For instance, we write

const event = new KeyboardEvent("keydown", { keyCode: 37 });
document.dispatchEvent(event);

to create a new KeyboardEvent instance with the 'keydown' event.

And we set the event object to { keyCode: 37 }.

Then we call document.dispatchEvent with the event object to dispatch the keydown event with key code 37.