// bad
if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") {
  //logic
}

// better
if (["abc", "def", "ghi", "jkl"].includes(x)) {
  //logic
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

// bad
let test: boolean;
if (x > 100) {
  test = true;
} else {
  test = false;
}

// better
let test = x > 10 ? true : false;
//or 
let test = x > 10;

console.log(test);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

// bad
if (test1 !== null || test1 !== undefined || test1 !== "") {
  let test2 = test1;
}

// better
let test2 = test1 || "";

// bad
if (test1 === true) or if (test1 !== "") or if (test1 !== null)

// better
if (test1){
  // do some
}else{
  // do other
}


//Note: If test1 has a value, the logic after if will be executed. 
//This operator is mainly used for null, undefined, and empty string checks.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

//null checking and default assignmentlet test1 = null;let test2 = test1 ?? "";
console.log("null check", test2); // output empty string ""

//undefined checking and default assignmentconst test = undefined ?? "default";console.log(test);// expected output: "default"
1.
2.
3.
4.

let array = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(array.slice(-1)) >>> [7];

console.log(array.slice(-2)) >>> [6, 7];

console.log(array.slice(-3)) >>> [5, 6, 7];

function lastItem(list) {
  if (Array.isArray(list)) {
    return list.slice(-1)[0];
  }

  if (list instanceof Set) {
    return Array.from(list).slice(-1)[0];
  }

  if (list instanceof Map) {
    return Array.from(list.values()).slice(-1)[0];
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

// bad
let test;
function checkReturn() {
  if (!(test === undefined)) {
    return test;
  } else {
    return callMe("test");
  }
}

// better
function checkReturn() {
  return test ?? callMe("test");
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

const travelPlans = {
        destination: "DC",
        monday: {
            location: "National Mall",
            budget: 200,
        },
    };

    // bad
    const res = travelPlans && travelPlans.tuesday && travelPlans.tuesday.location && travelPlans.tuesday.location.href;
    console.log(res);  // Result: undefined

    // better
    const res1 = travelPlans?.tuesday?.location?.href;
    console.log(res1);  // Result: undefined
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

// bad
if (test) {
  callMethod();
}

// better
test && callMethod();
1.
2.
3.
4.
5.
6.
7.
8.

<div> {this.state.isLoading && <Loading />} </div>
1.

// bad
switch (data) {
  case 1:
    test1();
    break;
  case 2:
    test2();
    break;
  case 3:
    test();
    break;
    // And so on...
}

// better
var data = {
  1: test1,
  2: test2,
  3: test,
};

// If type exists in data, execute the corresponding function
data[type] && data[type]();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

// bad
function add(test1, test2) {
  if (test1 === undefined) test1 = 1;
  if (test2 === undefined) test2 = 2;
  return test1 + test2;
}

// better
add = (test1 = 1, test2 = 2) => test1 + test2;
add(); //output: 3
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

// bad
if (type === "test1") {
  test1();
} else if (type === "test2") {
  test2();
} else if (type === "test3") {
  test3();
} else if (type === "test4") {
  test4();
} else {
  throw new Error("Invalid value " + type);
}

// better
var types = {
  test1,
  test2,
  test3,
  test4,
};
types[type] && types[type]();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

let test1 = "a";
let test2 = "b";

// bad
let obj = { test1: test1, test2: test2 };

// better
let obj = { test1, test2 };
1.
2.
3.
4.
5.
6.
7.
8.

// bad
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;

// better
const { test1, test2, test3 } = this.data;
1.
2.
3.
4.
5.
6.
7.
8.

// bad
const welcome = "Hi " + test1 + " " + test2 + ".";

// better
const welcome = `Hi ${test1} ${test2}`;
1.
2.
3.
4.
5.
6.

// bad
    const data =
        "hello maxwell this is a test\n\t" + "test test,test test test test\n\t";
  
   // better
    const data = `hello maxwell this is a test
                    test test,test test test test`;
1.
2.
3.
4.
5.
6.
7.

// bad
if (arr.indexOf(item) > -1) {
  // item found
}
if (arr.indexOf(item) === -1) {
  // item not found
}

// better
if (~arr.indexOf(item)) {
  // item found
}
if (!~arr.indexOf(item)) {
  // item not found
}


//The bitwise (~) operator will return true (except for -1), 
//the reverse operation only requires !~. Alternatively, the includes() function can be used.

if (arr.includes(item)) {
  // true if the item found
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

// bad
let total = parseInt("583");
let average = parseFloat("32.5");

// better
let total = +"583";
let average = +"32.5";
1.
2.
3.
4.
5.
6.
7.
8.

async function getData() {
        const promises = [fetch("url1"), fetch("url2"), fetch("url3"), fetch("url4")];
        for (const item of promises) {
            // Print out the promise
            console.log(item);
        }

        // better
        for await (const item of promises) {
            // Print out the results of the request
            console.log(item);
        }
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

const promises = [fetch("index.html"), fetch("https://does-not-exist/")];

const results = await Promise.allSettled(promises);

// Filter out successful requests
const successfulPromises = results.filter((p) => p.status === "fulfilled");

// Filter out failed requests and output the reason
const errors = results
.filter((p) => p.status === "rejected")
.map((p) => p.reason);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

// bad
const swapWay = (arr, i, j) => {
  const newArr = [...arr];

  let temp = newArr[i];

  newArr[i] = list[j];
  newArr[j] = temp;

  return newArr;
};


//Since ES6, swapping values from different locations in an array has become much easier

// better
const swapWay = (arr, i, j) => {
  const newArr = [...arr];

  const [newArr[j],newArr[i]] = [newArr[i],newArr[j]];

  return newArr;
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

function randomNumber(max = 1, min = 0) {
  if (min >= max) {
    return max;
  }

  return Math.floor(Math.random() * (max - min) + min);
}
1.
2.
3.
4.
5.
6.
7.

function getRandomColor() {
  const colorAngle = Math.floor(Math.random() * 360);
  return `hsla(${colorAngle},100%,50%,1)`;
}
1.
2.
3.
4.