JavaScript Important topics before learning React JS
In this blog, we will learn javascript important topics before learning to react js. Every front-end developer or web designer should learn these topics before moving to learn to react js. React JS uses newly added syntax or features of JavaScript.
Here are some important topics that every web designer or front end developer should learn, which are the following:
- Let, const
- Arrow function
- Map()
- Class
- Object
- Inheritance
- Array destructuring
- Backticks(``)
- Spread operator(...)
1. Let and Const: Let is an improved version of var. Let keyword introduced in ES6, it is used for variable declaration, it resolved the problem of hoisting that occurs when we used var keyword.
In var keyword, there is a problem, in var keyword we can access the value of a variable without declaration, but in let we cant.
Example: by using var keyword
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
x = 5;
elem = document.getElementById("demo");
elem.innerHTML = x;
var x;
</script>
</body>
</html>
This example will give an output = 5
Example: by using let keyword
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
x = 5;
elem = document.getElementById("demo");
elem.innerHTML = x;
let x;
</script>
</body>
</html>
This example will throw an error.
So the conclusion is that we should use the let keyword in our project instead of var because in let keyword there are minimal chances of mistakes in our code.
2. Arrow function: Arrow function is nothing it is a modern version of function it is written by an arrow that’s why it is called an arrow function. It is a modern syntax of the function.
Example:
myfunction()=>{
console.log(“arrow function”);
}
3. Map(): map() method is used to modify each element of an array.
Example:
<script>
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
</script>
4. class: classes are templates for creating objects. The class contains methods, constructors, to access class data we must create an object first.
Example:
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>
5. object: objects are like an array that contains many values in a single variable. Objects are a little bit different from an array, an array stores data in the indexed format while objects store data in key-value pairs. The object is more simple as compared to the array.
Example:
<p id="demo"></p>
<script>
let person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>
6. inheritance: is a concept of object-oriented programming that is used to inherit all methods and properties of the parent class. extends keyword is used for inheritance in JavaScript.
Example:
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>
7. Array Destructuring: Array Destructuring means breaking down complex arrays into simpler parts. It can be used for assignments and declaration of a variable.
Example:
<script>
const foo = ['red', 'yellow', 'green'];
const [a, b, c] = foo;
console.log(a); // "red"
console.log(b); // "yellow"
console.log(c); // "green"
</script>
8. Backticks(``): It is a modern version to concatenate strings.
Example:
<script>
const name = 'Rakesh';
const surname = 'kumar';
const telephone = '7838370333';
// "Old syntax"
const userInfo = 'User info: ' + name + ' ' + surname + ' ' + telephone;
// "New syntax"
const userInfo = `User info: ${name} ${surname} ${telephone}`;
</script>
9. Spread Operator(…): It was introduced in ES6. It looks like a Rest Parameter but it works opposite of that. The spread operator is used to copy,concat or expand an array.
Example: Copying an array
let fruits = ['Apple','Orange','Banana'];
let newFruitArray = [...fruits];
console.log(newFruitArray); // ['Apple','Orange','Banana']
Example: Concatenating array
let arr1 = ['A', 'B', 'C'];
let arr2 = ['X', 'Y', 'Z'];
let result = [...arr1, ...arr2];
console.log(result); // ['A', 'B', 'C', 'X', 'Y', 'Z']
Categories: web designing javascript react front end developer
 and setTimeout()-01.svg)