Thread by @TheAnkurTyagi

Top JavaScript developer stuff to blow YOUR mind.

JavaScript has grown way beyond the browser since Node.js enabled JavaScript to be run on the server.

Let’s take a look at some of my favourite JavaScript tips, tricks.

#100DaysOfCode

Thread 🧵

1. Write tomorrow's JavaScript today with Babel

Babel allows developers to write code using the latest version of JavaScript without sacrificing compatibility with older browsers

This transforms ES2015 code into a normal ES5 JavaScript code that browsers are able to interpret.

2. Cool new ways of declaring variables

In ES2015, JavaScript introduced two new ways of declaring variables: let and const.

>let is used when a variable will be reassigned

>const keeps a variable from being reassigned.

IMP Note:

const does not freeze arrays and objects.

let and const are scoped to their closest block, allowing developers to declare variables within if, while, for, and even switch blocks, without worrying about the variable scope leaking outside of that context.

JavaScript, the most commonly used language by StackOverflow 2020

3. Use arrow functions to keep 'this' intact

These have ability to keep "this" context intact,

especially when using it within callbacks that might get called from somewhere else (i.e. adding an event listener with jQuery).

arrow functions replace the need to add .bind(this)

There are two main ways of writing arrow functions:

one-liners and multiple-liners.

For e.g.

// let doubleShort = (num) => num * 2;

let doubleLong = (num) => {
let doubleNum = num * 2;
return doubleNum;
}

4. Use promises to avoid a callback can of worms

Promises solve this problem by helping you execute code in a concise manner, while keeping operations asynchronous.

you tell the code to do something, then something else,

& you’re even able to catch errors along the way.

5. Replace 'for' loops with 'map' to keep things simple

Let’s pretend we have an array of numbers and we’d like

to produce another array by doubling all of the numbers

from the first array.

One way to do this is to declare an empty array 👇

write a for loop, and set a number in the 2nd array by looking up the index on the first array and doubling it.

Or we could use a more concise solution by mapping an array to another array:

[1, 2, 3].map((num) => num * 2); // [2, 4, 6]

6. Replace 'for' loops with 'filter'

This time, let’s pretend we have an array of numbers and we’d like to produce another array containing only the even numbers from the first array.

Again, one way of doing this would be to declare an empty array, write a for loop, 👇

and write an if statement to check if the number at the index is even.

Or, we could use the filter method available for arrays:

[4, 7, 2, 3].filter((num) => num % 2 === 0); // [4, 2]

7. Use 'reduce' instead of 'for' loops

For this exercise,

let’s calculate the sum of all of the numbers in an array.

One way to do this would be to declare a variable that has zero as its initial value.

Then, we would write a for loop and traverse our array,

Or we could use the reduce method:

[7, 2, 4].reduce((a, b) => a + b); // 13

Can use all 3 concepts by multiplying all the nums by 7 & adding all the numbers that are smaller than 20

[3, 2, 1, 6]
.map(num => num * 7)
.filter(num => num < 20)
.reduce((a, b) => a + b); // 21

8. Take advantage of immutability

Data immutability is a common concept in functional languages

by default, objects and arrays are not immutable in JavaScript,

there is a library to help accomplish this, called Immutable.js and it was developed at Facebook.

9. Node.js: Avoid switching language context

Node.js is what allows JS to be used on the server-side.

interesting side effects, like making dev crazy-productive because you don’t have to change the language context when switching back and forth between client and server code.

10. NPM: largest package manager

npm (the node package manager) has become the biggest package manager in the world,

containing more packages than Java’s Maven Central Repository, PHP’s Packagist, and even .NET’s nuget.

It contains over 300 thousand packages.

11. Go beyond 'console.log'

Using console.log() to display data in the console while writing JavaScript apps is pretty common,

but did you know you can use other console methods – such as dir() and table() – to help you visualize data while developing?

That’s right;

for a more interactive way of visualizing objects in the console,

use console.dir(object).

If you have an array of objects you’d like to visualize,

you can use console.table(array) to create a beautifully formatted table displaying all your data.

Hope this helps 💙🙏