Categories
JavaScript Answers

How to use a case and switch statement with two variables with JavaScript?

Sometimes, we want to use a case and switch statement with two variables with JavaScript.

In this article, we’ll look at how to use a case and switch statement with two variables with JavaScript.

How to use a case and switch statement with two variables with JavaScript?

To use a case and switch statement with two variables with JavaScript, we use switch with true.

For instance, we write

switch (true) {
  case var1 === true && var2 === true:
    //...
    break;
  case var1 === false && var2 === false:
    //...
    break;

  default:
}

to use switch with true.

Then the case statements can check for any boolean expression.

Conclusion

To use a case and switch statement with two variables with JavaScript, we use switch with true.

Categories
JavaScript Answers

How to add a scroll event listener with JavaScript?

Sometimes, we want to add a scroll event listener with JavaScript.

In this article, we’ll look at how to add a scroll event listener with JavaScript.

How to add a scroll event listener with JavaScript?

To add a scroll event listener with JavaScript, we call addEventListener.

For instance, we write

const runOnScroll = (element) => {
  console.log(element);
};

const elements = [...document.querySelectorAll(`...`)];

elements.forEach((element) => {
  window.addEventListener("scroll", () => runOnScroll(element), {
    passive: true,
  });
});

to call querySelectorAll to select all the elements we want to add a scroll listener to.

Then we use the spread operator to spread the entries into an array.

Next, we call elements.forEach with a callback that calls addEventListener to add a scroll listener to each element in elements.

Conclusion

To add a scroll event listener with JavaScript, we call addEventListener.

Categories
JavaScript Answers

How to get element of JavaScript object with an index?

Sometimes, we want to get element of JavaScript object with an index.

In this article, we’ll look at how to get element of JavaScript object with an index.

How to get element of JavaScript object with an index?

To get element of JavaScript object with an index, we use the Object.keys method to get an array of keys from the object and sort it.

For instance, we write

const myObj = { A: ["Abe"], B: ["Bob"] };
const sortedKeys = Object.keys(myObj).sort();
const first = myObj[sortedKeys[0]];

to get the keys in myObj as an array of strings with Object.keys.

Then we call sort to sort the key strings in alphabetical order.

Next, we get the first key in sortedKeys with sortedKeys[0].

And then we get the value of the property with myObj[sortedKeys[0]].

Conclusion

To get element of JavaScript object with an index, we use the Object.keys method to get an array of keys from the object and sort it.

Categories
Vue Answers

How to import functions from different JavaScript file in a Vue Webpack project?

Sometimes, we want to import functions from different JavaScript file in a Vue Webpack project.

In this article, we’ll look at how to import functions from different JavaScript file in a Vue Webpack project.

How to import functions from different JavaScript file in a Vue Webpack project?

To import functions from different JavaScript file in a Vue Webpack project, we use import.

For instance, we write

<script>
import test from "@/mylib";

console.log(test.foo());
//...
</script>

to import the mylib module’s default export as test.

Then we call the test.foo method.

@ is the alias for the src folder in the Vue project.

Conclusion

To import functions from different JavaScript file in a Vue Webpack project, we use import.

Categories
JavaScript Answers

How to send flash messages in Express and JavaScript?

Sometimes, we want to send flash messages in Express and JavaScript.

In this article, we’ll look at how to send flash messages in Express and JavaScript.

How to send flash messages in Express and JavaScript?

To send flash messages in Express and JavaScript, we use the connect-flash package.

To install it, we run

npm i connect-flash

Then we use it by writing

const express = require("express");
const flash = require("connect-flash");

const app = express();

app.use(flash());

//...

app.all("/", (req, res) => {
  req.flash("test", "it worked");
  res.redirect("/test");
});

We add the flash middleware with app.use.

Then we send our flash message with req.flash.

Conclusion

To send flash messages in Express and JavaScript, we use the connect-flash package.