Web Developers cool tips/tricks

1. Search for files on GitHub repository

Press t in the repo to enter search mode for the project’s file structure

2. Highlight/Reply shortcut in Github

• When in an issue, Highlight the line which needs a reply.
• Then press r to reply to that from the comment

3. Shortcut to use Lodash

• Go to the Lodash homepage
• Open devtools
• Lodash library is available for use from _ variable

4. Nullish coalescing operator

const height = 0;
console.log(height || 100); // 100
console.log(height ?? 100); // 0

Nullish coalescing operator (??) returns the right-hand side value only if the left-hand side value is undefined or null

5. Convert a number from decimal to binary

toString() can be used to convert numbers to different bases. It takes a param, which specifies the base to convert to.
To convert a number to binary, the base would be 2.

const decimal = 5;
const binary = decimal.toString(2);
console.log(binary); // 101

6. Add Properties to functions

function greetings() {
  console.log("hello world");
  greetings.counter++;
}
greetings.counter = 0;

greetings();
greetings();

console.log(`Called ${greetings.counter} times`); // Called 2 times

7. Change array size using the length property

const arr = [1, 2, 3, 4, 5];
arr.length = 2;
console.log(arr); // [1, 2]

8. Prevent an object’s properties value from updating

const obj = {name: 'Codedrops'};
console.log(obj.name); // Codedrops

/* Set the 'writable' descriptor to false for the 'name' key  */
Object.defineProperty(obj, 'name', {
        writable: false
});

obj.name = 'ABC';
console.log(obj.name); // Codedrops

9. Maps can store any type of key

const myMap = new Map([]);

const numberKey = 1;
const stringKey = "str";
const arrayKey = [1, 2, 3];
const objectKey = { name: "abc" };

myMap.set(numberKey, "Number Key");
myMap.set(stringKey, "String Key");
myMap.set(arrayKey, "Array Key");
myMap.set(objectKey, "Object Key");

myMap.forEach((value, key) => console.log(`${key} : ${value}`));

/*
Output:
1 : Number Key
str : String Key
1,2,3 : Array Key
[object Object] : Object Key
*/

10. null vs undefined

null is a value, whereas undefined is not.null is like an empty box, and undefined is no box at all.
ex.,

const fn = (x = 'default value') => console.log(x);

fn(undefined); // default value
fn(); // default value

fn(null); // null

When null is passed, the default value is not taken, whereas when undefined or nothing is passed the default value is taken.

Follow me on Instagram

  That’s it for now. 

If you liked this article, then please subscribe to my YouTube Channel for video tutorials.

You can also find me on Twitter and Facebook.