Author: John Au-Yeung

Sometimes, we want to extract base URL from a string in JavaScript.

In this article, we’ll look at how to extract base URL from a string in JavaScript.

How to extract base URL from a string in JavaScript?

To extract base URL from a string in JavaScript, we can use the URL constructor.

For instance, we write

const url = new URL("https://example.com/foo/bar");
console.log(url.origin);

to create a URL with the URL string that we want to get the base URL from.

Then we get the base URL with the url.origin property.

Conclusion

To extract base URL from a string in JavaScript, we can use the URL constructor.

Sometimes, we want to mock the JavaScript window object using Jest.

In this article, we’ll look at how to mock the JavaScript window object using Jest.

How to mock the JavaScript window object using Jest?

To mock the JavaScript window object using Jest, we can call the jest.spyOn method.

For instance, we write

let windowSpy;

beforeEach(() => {
  windowSpy = jest.spyOn(window, "window", "get");
});

afterEach(() => {
  windowSpy.mockRestore();
});

it("should return https://example.com", () => {
  windowSpy.mockImplementation(() => ({
    location: {
      origin: "https://example.com",
    },
  }));

  expect(window.location.origin).toEqual("https://example.com");
});

it("should be undefined.", () => {
  windowSpy.mockImplementation(() => undefined);

  expect(window).toBeUndefined();
});

to create the windowSpy with jest.spyOn.

And then we call windowSpy.mockImplementation with a function that returns a mocked window object.

Then we call expect to check the value of the mocked window.location.origin property in the test.

Likewise, we call mockImplementation with a callback that returned undefined in the 2nd test.

Then window would be undefined in the 2nd test.

We call windowSpy.mockRestore after each test to restore it to the original value.

Conclusion

To mock the JavaScript window object using Jest, we can call the jest.spyOn method.

Sometimes, we want to zip two arrays in JavaScript.

In this article, we’ll look at how to zip two arrays in JavaScript.

How to zip two arrays in JavaScript?

To zip two arrays in JavaScript, we call the array map method.

For instance, we write

const zip = (a, b) => a.map((k, i) => [k, b[i]]);

console.log(zip([1, 2, 3], ["a", "b", "c"]));

to create the zip function that calls a.map with a callback that returns an array with the entry k in a and entry b[i] in b.

And then we call zip with 2 equal sized arrays to zip them together.

The returned array will have arrays that have the values in [1, 2, 3] and ["a", "b", "c"] at the same index.

Conclusion

To zip two arrays in JavaScript, we call the array map method.

Sometimes, we want to loop through a JSON array with JavaScript.

In this article, we’ll look at how to loop through a JSON array with JavaScript.

How to loop through a JSON array with JavaScript?

To loop through a JSON array with JavaScript, we can use a for of loop.

For instance, we write

const json = [
  {
    id: "1",
    msg: "hi",
    tid: "2022-05-05 23:35",
    fromWho: "hello1@email.cpm",
  },
  {
    id: "2",
    msg: "there",
    tid: "2022-05-05 23:45",
    fromWho: "hello2@email.cpm",
  },
];

for (const obj of json) {
  console.log(obj.id);
}

to loop through the json array with a for of loop.

We assign the entry being looped through to obj.

Then we get the value of the id property of the object in the loop and log it.

Conclusion

To loop through a JSON array with JavaScript, we can use a for of loop.