Javascript Basic Concepts that Every Frontend Developer Should Know about

 Hi There,

     I am Roshan and in this post, we are gonna see some of the basic concepts in Javascript and probably next-generation Javascript that help a lot while writing code in any of the Javascript frameworks like React, Angular, and a lot more.

let & const

let and const basically, replace var.
Earlier we were using var to declare variables in Javascript. We can use let instead of var as let is block scoped and var is function scoped. var can allow redeclaration of variables but let don't.
 
const - we can use const when we plan on never re-assigning this variable.

let number =10;

const PI= 3.14;

ES6 Arrow Functions

Arrow functions are a different way of creating functions in JavaScript. 

Arrow function syntax may look strange but it's actually simple.

which you could also write as:

function display(name) {

console.log(name);

}

becomes: 

const display = (name) => {

console.log(name);

}

Important: 

When having no arguments, you have to use empty parentheses in the function declaration:

const display = () => {

console.log('Roshan!');

}

When having exactly one argument, you may omit the parentheses:

const double = no => no*2;

When just returning a value, you can use the following shortcut:

const returnMe = name => name

That's equal to:

const returnMe = name => {

return name;

}

___________________________________________________________________________________

Spread & Rest Operator

The spread and rest operators actually use the same syntax: ... 

Yes, that is the operator - just three dots. It's usage determines whether you're using it as the spread or rest operator.

Using the Spread Operator:

The spread operator used to pull elements out of an array (=> split the array into a list of its elements) or pull the properties out of an object. Here are two examples:

const oldArray = [1, 2, 3];

const newArray = [...oldArray, 4, 5]; // newArray will be [1, 2, 3, 4, 5];

Here's the spread operator used on an object:

const oldObject = {

name: 'Roshan'

};

const newObject = {

...oldObject,

age: 22

};

newObject  would then be

{

name: 'Roshan',

age: 22

}

The spread operator is extremely useful for cloning arrays and objects. Since both are reference types (and not primitives), copying them safely (i.e. preventing future mutation of the copied original) can be tricky. With the spread operator you have an easy way of creating a (shallow!) clone of the object or array. 

__________________________________________________________________________________

Destructuring

Destructuring allows you to easily access the values of arrays or objects and assign them to variables.

Here's an example for an array:

const array = [1, 2, 3];

const [a, b] = array;

console.log(a); // prints 1

console.log(b); // prints 2

console.log(array); // prints [1, 2, 3]

And here is an example for an object:

const myObj = {

name: 'Roshan',

age: 22

}

const {name} = myObj;

console.log(name); // prints 'Roshan'

console.log(age); // prints undefined

console.log(myObj); // prints {name: 'Roshan', age: 22}

Destructuring is very useful when working with function arguments. Consider this example:

const printName = (personObj) => {

console.log(personObj.name);

}

printName({name: 'Roshan', age: 22}); // prints 'Roshan'

Here, we only want to print the name in the function but we pass a complete person object to the function. Of course this is no issue but it forces us to call personObj.name inside of our function. We can condense this code with destructuring:

const printName = ({name}) => {

console.log(name);

}

printName({name: 'Roshan', age: 22}); // prints 'Roshan')

We get the same result as above but we save some code. By destructuring, we simply pull out the name  property and store it in a variable/ argument named name  which we then can use in the function body.