1. await - promise.all

❌

const user = await getUser();
const product = await getProducts();

✅

Up to twice as faster

const [user, products] = await Promise.all([getUser(), getProducts()]);

---

2. Double Negation (!!)

const greeting = "Hello there! ";
console.log(!!greeting); // returns true

const noGreeting = "";
console.log(!!noGreeting); // returns false

---

3. use Object.entries to access both key and value

❌

Object.keys(obj).forEach((key) => {
  const value = obj[key];
  // log out "key" and "value"
  console.log(key, value);
});

✅

Object.entries(obj).forEach(([key, value]) => {
  // log out "key" and "value"
  console.log(key, value);
});

---

4. Don't use optional function call

❌

function calIfCallable(callback){
  callback?.()
}
});

✅

function calIfCallable(callback){
 if(typeof callback === "function" ){
  callback();
 }
}
});

---

5. Enums in javascript

const Days = object.freeze({
  MONDAY: 0,
  TUESDAY: 1,
  WEDNESDAY: 2,
  THURESDAY: 3,
  FRIDAY: 4,
  SATURDAY: 5,
  SUNDAY: 6,
});

---

6. Map on array of objects using ARRAY.FROM

const avengers = [
  { name: "Ironman", power: "Armor", id: 1 },
  { name: "Thor", power: "Hammer", id: 2 },
  { name: "Hulk", power: "Strength", id: 3 },
];

Array.from(avengers, ({ name }) => name);
//["Ironman" ,"Thor" , "Hulk" ]

---

7. Add to clipboard

❌ no need to copy from the dom anymore

document.execcommand("example of text ");

✅ supported by all major browsers

navigator.clipboard.writeText("example of text ");

---

8. Number truncation in javascript

const number = 80.6;
// old ways
number < 0 ? Math.ceil(number) : Math.floor(number);
//80

const es6 = Math.trunc(number);
//80

---

9. shorthand

// old ways
const cat = "Milo";
const dog = "Coco";
const someObject = {
  cat: cat,
  dog: dog,
};

// es6
const cat = "Milo";
const dog = "Coco";
const someObject = {
  cat,
  dog,
};

---

10. async await VS then catch

// old ways

const greeting = new Promise((resolve, reject) => {
  resolve("Hello!");
});

greeting
  .then((value) => {
    console.log("The Promise is resolved!", value);
  })
  .catch((error) => {
    console.error("The Promise is rejected!", error);
  })
  .finally(() => {
    console.log("The Promise is settled, meaning it has been resolved or rejected.");
  });

// new ways
// in async function you need to wrap your function in a try catch block
// never work in async function without this

async function doSomethingAsynchronous() {
  try {
    const value = await greeting;
    console.log("The Promise is resolved!", value);
  } catch((error) {
    console.error("The Promise is rejected!", error);
  } finally {
    console.log(
      "The Promise is settled, meaning it has been resolved or rejected."
    );
  }
}

// when returning a Promise inside an async function,
// you don’t need to use await
async function getGreeting() {
  return greeting;
}
// you do need to write return await if you’re looking to handle
// the Promise being rejected in a try...catch block.
async function getGreeting() {
  try {
    return await greeting;
  } catch (e) {
    console.error(e);
  }
}

---

11. using if

❌

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

✅

const condition = [1, 2, 3, 4];
if (condition.includes(type)) {
  //...
}

---

12. using find instead of filter (optomization)

❌

const a = [1, 2, 3, 4, 5];
const result = a.filter((item) => {
  return item === 3;
});

✅

const a = [1, 2, 3, 4, 5];
const result = a.find((item) => item === 3);

---

13. non-empty judgment

❌

if (value !== null && value !== undefined && value !== "") {
  //...
}

✅

if ((value ?? "") !== "") {
  //...
}

---

14. Conditionally add properties in a JavaScript Object

const isValid = false;
const age = 18;
// we can use spread operator (...) to add properties in object
const person = {
  id: "adc",
  name: "mina",
  ...(isValid && { isActive: true }),
  ...(age >= 18 && { cart: 0 }),
};
// output { id: "adc", name: "mina", cart: 0}

---

15. logical assignment operators p1

// nullish coalescing asignment operator it will check whether
// or not a value is falsey and if it is , it will assign an other value to it
const stats = { speed: 50 };
stats.speed ??= 100;
console.log(stats.speed);
//output 50

stats.color ??= "white";
console.log(stats.color);
// output white

---

16. logical assignment operators p2

// OR & Equals (||=)
// old way
if (!user.id) {
  user.id = 1;
}
user.id = user.id || 1;

// new way
user.id ||= 1;

// and & Equals (&&=)
// The logical AND assignment (x &&= y) operator only assigns if x is truthy.
// x &&= y is equivalent to x && (x = y);
let a = 1;
let b = 0;

a &&= 2;
console.log(a);
// expected output: 2

b &&= 2;
console.log(b);
// expected output: 0

---

17. using Guard Clauses instead of if-else

❌

function getInsuranceDeductible(insurance) {
  if (insurance.covered) {
    if (insurance.majorRepair) {
      return 500;
    } else if (insurance.mediumRepair) {
      return 300;
    } else {
      return 100;
    }
  } else {
    return 0;
  }
}

✅

function getInsuranceDeductible(insurance) {
  if (!insurance.covered) return 0;
  if (insurance.majorRepair) return 500;
  if (insurance.mediumRepair) return 300;

  return 100;
}

---

18. destructuring is slow

❌

const numbers = [10, 20, 30, 40, 50];

numbers.reduce((arr, v) => [...arr, v * 100], []);

✅

numbers.reduce((arr, v) => {
  arr.push(v * 100);
  return arr;
}, []);

❌

const people = [
  { id: 1, name: "Jack" },
  { id: 2, name: "Sally" },
  { id: 3, name: "Joe" },
];

people.reduce(
  (lookup, person) => ({
    ...lookup,
    [person.id]: person,
  }),
  {}
);
// javascript is actually going and creating a new object using Object.assign
// every single pass throught this reduce - o(n)cubed
// it will be in  es2015 (check it with TSplayground ):
people.reduce(
  (lookup, person) => Object.assign(Object.assign({}, lookup), { [person.id]: person }),
  {}
);

✅

people.reduce((lookup, person) => {
  lookup[person.id] = person;
  return lookup;
}, {});

---

19. bitwise operators with .splice method

❌

let list = [1, 2, 3, 4, 5];
// `indexOf` here will return -1, and therefore the `.splice` method remove the last item that is `5`
list.splice(list.indexOf(6), 1); // [1, 2, 3, 4]

✅

let list = [1, 2, 3, 4, 5];
/*
  `indexOf` here will return -1 again, but in this time `>>>` ( Unsigned Right Shift Operator ) will convert `-1` to `4294967295` by shifting its bits
  and therefore the `.splice` method will try to remove the number in the index `4294967295` that is not exist :sunglasses:.
*/
list.splice(list.indexOf(6) >>> 0, 1);

---

20. using .at() method

❌

const list = [1, 2, 3, 4, 5];
list[list.length - 1]; // 5
list[list.length - 2]; // 4

✅

const list = [1, 2, 3, 4, 5];
list.at(-1); // 5
list.at(-2); // 4

21. JavaScript URL API

const url = new URL(
  "https://user:[email protected]:3000/folder/page?param=xyz&new=true#title2"
);

const { origin, pathname, search, hostname } = url;

//hostname :"daily-dev-tips.com"
// origin :'https://daily-dev-tips.com:3000'
// pathname : '/folder/page'
// search : '?param=xyz&new=true's

url.hash = "title4";
url.pathname = "register";

console.log(url.searchParams.get("param"));
// xyz

console.log(url.searchParams.get("new"));
// true

console.log(url.searchParams.getAll("param"));
// ["xyz"]

console.log(url.searchParams.has("param"));
// true

const keys = url.searchParams.keys();

const values = url.searchParams.values();
for (let value of values) {
  console.log(value);
}
// xyz
// true

url.searchParams.append("search", "JavaScript");
// search: "?param=xyz&new=true&search=JavaScript"

// try : set - remove - sort

---