PART 1: 15 Useful stuff I gathered during my development career

Hello 👋… I am a Frontend React developer. Since the start of my professional career back in 2018 i used to note down things like tricks, shorthands and good one liner logics and whatnot, today i thought to share with you all so that it can benefit you as well.

Lets get started

KISS principle: keep it simple, stupid

YAGNI — Ya Ain’t Gonna Need It

SOLID — This is a mnemonic for “Single responsibility,‌‌Open–closed, Liskov substitution, Interface segregation, Dependency inversion”

substr- takes parameters as (from, length).

substring-takes parameters as (from, to).

ARRAYS : The Set object type was introduced in ES6, and along with …, the ‘spread’ operator, we can use it to create a new array with only the unique values.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

Var foo = null || var foo
return (foo || []).length;

In both cases, if the variable foo has a length property, it will be returned. Otherwise, the length of the empty array will be returned: 0 .

A tilde, known as the ‘bitwise NOT operator’, is an operator equivalent to-n — 1 . So, for example, ~15 is equal to -16 .

Using two tildes in a row effectively negates the operation, because — ( — n — 1) — 1 = n + 1–1 = n . In other words, ~ — 16 equals 15 const int = ~~”15"

console.log(int); // Result: 15

console.log(typeof int); //Result: “number”

Though I can’t think of many use-cases, the bitwise NOT operator can also be used on booleans: ~true = -2 and ~false = -1

Power: (2 ** 3) =2 << (3–1)= Math.pow(2, 3) = two to the power three = 8

Quick Rounding:

console.log(23.9 | 0); // Result: 23

console.log(-23.9 | 0); // Result: -23

If n is positive, n | 0 rounds down. If n is negative, it rounds up

Remove Final Digits:

console.log(1553 / 10) // Result: 155.3
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1

const arrow1 = () => { // this is a block}
const arrow2 = () => ({ // this is an object})

Boolean is an object wrapper. This gets used behind the scenes in JavaScript all the time. Basically, you pass it a value and it returns true (a boolean primitive) if it’s a truthy value and false if it’s falsey.(Falsy values in JavaScript are false, null, 0, “”, undefined, and NaN)

Boolean(7); //returns true
Boolean(“ate”); //returns true
Boolean(“”); //returns false

.filter(Boolean)It’s simply a shorthand approach for removing falsey entries from an array

Looping using for…in will return a list of keys being iterated.

for (let i in heardFrom) {
console.log(i); // “0”, “1”, “2”,
}

Looping using for…of will return a list of values being iterated.

for (let i of heardFrom) {
console.log(i); // “Search Engine”, “Friend”, “Other”
}

const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

“Destructuring” feature: convertion to array:

let str = “12345”;
let strArr = […str]; // strArr = [“1”, “2”, “3”, “4”, “5”]

Longhand:

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}

Shorthand:

const variable2 = variable1 || ‘new’;

Don’t believe me? Test it yourself (paste the following code in es6console):

let variable1;
let variable2 = variable1  || 'bar';
console.log(variable2 === 'bar'); // prints true
variable1 = 'foo';
variable2 = variable1  || 'bar';
console.log(variable2); // prints foo

Do note that if you set variable1 to false or 0, the value bar will be assigned

for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;