CODEWITHSUNDEEP
javascript
The Tag Manager
The Tag Manager

Reputation: 35

shortening multiple if conditions in javascript

var pageTypeArray = [];
var win = window.location.href;
if (win.match(".*product.*")) {
  pageTypeArray.push("productDetail");
}
if (win.match(".*login.*")) {
  pageTypeArray.push("login");
}
if (win.match(".*loan. *")) {
  page TypeArray.push("loanDetail");
}
if (win.match(". *reward.*")) {
  pageTypeArray.push("reward");
}
if (win.match("^(?!.* (product|login|loan reward)). *$")) {
  pageTypeArray.push("uncategorized");
}

If I were to add many more conditions how can I improve (shorten) this code?

Upvotes: 0

Views: 52

Answers (3)

segandiaye
segandiaye

Reputation: 123

I propose you this approach :

const win = window.location.href;
const SCHEMA = [
  {
    reg: ".*product.*",
    action: "productDetail",
  },
  {
    reg: ".*login.*",
    action: "login",
  },
  {
    reg: ".*loan. *",
    action: "loanDetail",
  },
  {
    reg: ". *reward.*",
    action: "reward",
  },
  {
    reg: "^(?!.* (product|login|loan reward)). *$",
    action: "uncategorized",
  }
];

const elmts = SCHEMA.filter((elm) => {
  return win.match(elm.reg);
});

const pageTypeArray = elmts.map((val) => {
  return val.action;
});

Upvotes: 0

Nick
Nick

Reputation: 16606

You could maintain an array of types and matches and then filter/map that array to create the pageTypeArray.

const win = window.location.href;

const matchArr = [
  { type: "productDetail", match: ".*product.*" },
  { type: "login", match: ".*login.*" },
  { type: "loanDetail", match: ".*loan. *" },
  { type: "reward", match: ". *reward.*" },
  { type: "uncategorized", match: "^(?!.* (product|login|loan reward)). *$" }
];

const pageTypeArray = matchArr
  .filter(({ match }) => win.match(match))
  .map(({ type }) => type);

Upvotes: 2

CertainPerformance
CertainPerformance

Reputation: 371203

Use an array of regular expressions instead - and use actual regular expressions if you want to perform regex tests, not strings.

Also, I'm pretty that

".*loan. *"

and

". *reward.*"

are typos - if you just wanted to match any string with loan and reward in them, just use the regular expression /loan/ or /reward/.. (Your first loan will match loan followed by any character, followed by zero or more spaces. Your reward will match any character, followed by zero or more spaces, followed by reward. That doesn't sound like what you need.

const patterns = [
    [/product/, 'productDetail'],
    [/login/, 'login'],
    [/loan/, 'loanDetail'],
    [/^(?!.* (product|login|loan reward)). *$/, 'uncategorized'],
];
const pageTypeArray = [];
const { href } = window.location;
for (const pattern of patterns) {
    if (pattern[0].test(href)) {
        pageTypeArray.push(pattern[1]);
    }
}

loan reward in your original code may be a typo too - did you mean to put a | between those? If so - if uncategorized is meant to exist when nothing else matches - then ditch the regular expressions entirely and just use String#includes:

const patterns = [
    ['product', 'productDetail'],
    ['login', 'login'],
    ['loan', 'loanDetail'],
];
const pageTypeArray = [];
const { href } = window.location;
for (const pattern of patterns) {
    if (href.includes(pattern[0])) {
        pageTypeArray.push(pattern[1]);
    }
}
if (pageTypeArray.length === 0) {
    pageTypeArray.push('uncategorized');
}

Upvotes: 0

Related Questions