Category: JavaScript

Categories
JavaScript Answers

How to get the position of a div or span tag with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get the position of a div or span tag with JavaScript.

In this article, we’ll look at how to get the position of a div or span tag with JavaScript.

How to get the position of a div or span tag with JavaScript?

To get the position of a div or span tag with JavaScript, we can use the getBoundingClientRect method.

For instance, we write

const offsets = document.getElementById("foo").getBoundingClientRect();
const { top, left } = offsets;

to call getElementById to select the element we want to get the position for.

Then we call getBoundingClientRect on it to get an object with the position values.

And then we can get the top and left position offset with the top and left properties.

Conclusion

To get the position of a div or span tag with JavaScript, we can use the getBoundingClientRect method.

Categories
JavaScript Answers

How to check multiple arguments on multiple calls for Jest spies with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to check multiple arguments on multiple calls for Jest spies with JavaScript.

In this article, we’ll look at how to check multiple arguments on multiple calls for Jest spies with JavaScript.

How to check multiple arguments on multiple calls for Jest spies with JavaScript?

To check multiple arguments on multiple calls for Jest spies with JavaScript, we can use the mockFn.mock.calls property.

For instance, we write

expect(mockFn.mock.calls).toEqual([
  [arg1, arg2],
  [arg1, arg2],
]);

to call expect with mockFn.mock.calls to get the arguments that mockFn is called with.

Then we call toEqual with a nested array that has the array of arguments for each call of mockFn to check if they match what we expect.

Conclusion

To check multiple arguments on multiple calls for Jest spies with JavaScript, we can use the mockFn.mock.calls property.

Categories
JavaScript Answers

How to write asynchronous functions for Node.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to write asynchronous functions for Node.js.

In this article, we’ll look at how to write asynchronous functions for Node.js.

How to write asynchronous functions for Node.js?

To write asynchronous functions for Node.js, we can use promises.

For instance, we write

const ace = async () => {
  const r = await new Promise((resolve, reject) => {
    resolve(true);
  });

  console.log(r);
};

to create the ace async function that invokes a promise.

We create the promise with the Promise constructor called with a callback that calls resolve with the resolve value of the promise.

We get the promise’s resolve value with await.

Conclusion

To write asynchronous functions for Node.js, we can use promises.

Categories
JavaScript Answers

How to call getElementById based on a partial string with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to call getElementById based on a partial string with JavaScript.

In this article, we’ll look at how to call getElementById based on a partial string with JavaScript.

How to call getElementById based on a partial string with JavaScript?

To call getElementById based on a partial string with JavaScript, we call querySelector instead of getElementById.

For instance, we write

const id = document.querySelector('[id^="poll-"]').id;

to call querySelector with '[id^="poll-"]' to match the first element where its ID starts with poll-.

Conclusion

To call getElementById based on a partial string with JavaScript, we call querySelector instead of getElementById.

Categories
TypeScript Answers

How to extend two classes with TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to extend two classes with TypeScript.

In this article, we’ll look at how to extend two classes with TypeScript.

How to extend two classes with TypeScript?

To extend two classes with TypeScript, we merge all the properties in each class’ prototype into the class that we want to inherit from the two classes.

For instance, we write

class CanEat {
  public eat() {
    alert("eat.");
  }
}

class CanSleep {
  sleep() {
    alert("sleep.");
  }
}

const applyMixins = (derivedCtor: any, baseCtors: any[]) => {
  baseCtors.forEach((baseCtor) => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
      if (name !== "constructor") {
        derivedCtor.prototype[name] = baseCtor.prototype[name];
      }
    });
  });
};

class Being implements CanEat, CanSleep {
  eat: () => void;
  sleep: () => void;
}
applyMixins(Being, [CanEat, CanSleep]);

to define the applyMixins function.

In it, we loop through each class in baseCtors with forEach.

In the forEach callback, we get the property names of each class’ prototype with Object.getOwnPropertyNames.

And then we loop through each property name string with forEach.

If its name isn’t 'constructor'.

Then we assign baseCtor.prototype[name] to derivedCtor.prototype[name].

Next, we create the Being class that implements the CanEat and CanSleep classes.

And we call applyMixins to incorporate the property properties from the CanEat and CanSleep classes into the Being class’ prototype.

Conclusion

To extend two classes with TypeScript, we merge all the properties in each class’ prototype into the class that we want to inherit from the two classes.