JavaScript concepts
Functions, Classes, Spread Operator, DeStructuring, Rest Operator, Arrays, var and let, Map, Filter
Advance Javascript Concepts: Object.Freeze(), Prototype, Event Bubbling.
Functions:
React JS functions are normal JavaScript functions, we can also create arrow
functions.
Example:
// Normal function
//normal function
function printName(name){
return name;
}
console.log(printName("abc"));
Output:
// Arrow Function
//arrow function
const printName= (name) =>{
return name;
}
console.log(printName("abc"));
Output:
Arrow function does not require return
statement
Classes:
In object oriented programming class is collection of methods, variables.
Below is the example of ES6 class with extends.
What is extends? Using parent class members or methods in child class.
In other words extending the parent class members/methods with child class.
Example:
// ES6 Class
class parentClass {
constructor() {
this.name = "sam";
}
printName = () => console.log(this.name);
}
class childClass extends parentClass {
constructor() {
super();
this.Age = 25;
}
printAge = () => console.log(this.Age);
}
var child = new childClass();
child.printName();
child.printAge();
// ES7 Class
class parentClass {
name = "sam";
printName = () => console.log(this.name);
}
class childClass extends parentClass {
Age = 25;
printAge = () => console.log(this.Age);
}
var child = new childClass();
child.printName();
child.printAge();
Output:
Spread Operator:
Expanding the set of values from one element to another element.
For Example expanding an array values to another array.
// Spread Operator with array
// Initial Array with values
arr = [1,2,3,4,5]
// Adding arr with other array by using Spread Operator
spreadarr = [...arr,6,7,8,9,10]
console.log('Initial Array: ' + arr)
console.log('Spread Array: ' + spreadarr)
Output:
// Spread Operator with objects
obj1 = {
name: "abc",
email: "abc@test.com",
};
obj2 = {
...obj1,
age: 25,
};
console.log(obj2);
Output:
DeStructuring:
Unpacking set values and assigning to individual variables is called as destructuring.
Example:
// Destructuring
values = [10, 20, 30];
[a, b, c] = values;
console.log(a, b, c);
// Second value is skipped which will not assign to any variable if kept blank
[d, , f] = values;
console.log(d, f);
// Object Destructuring
objValues = {
name: "abc",
email: "abc@test.com",
};
const { name, email } = objValues;
console.log(objValues);
Output:
Rest Operator:
Accepting infinite number of arguments as array.
Rest operator allows to accept infinite number of arguments as array.
// Rest operator
const RestOperatorArray = (...arr) => console.log(arr);
// Passing multiple arguments to the method
RestOperatorArray(10,20,30,40,50,60)
// Rest operator
const RestOperatorArray2 = (arg1,...arr) => console.log(arr);
// Passing multiple arguments to the method
RestOperatorArray('Rest',10,20,30,40,50,60)
// arg1 will be assigned with string other integers will be assigned to array
Output:
Arrays:
Array supported methods (push,pop,shift,splice)
push - pushing a value to array
pop - remove value from end
shift - remove value from start
splice - remove value by index
let arr = [10, 20, 30, 40];
console.log("Before push: " + arr);
arr.push(50);
console.log("After push: " + arr);
arr.pop();
console.log("After pop: " + arr); // removes value from end
arr.shift();
console.log("After shift: " + arr); // removes value from start
var index = 2;
arr.splice(2, 1); // param 1 is index, param 2 is number of elements
console.log("After splice: " + arr); // removes value by index
Output:
Var and Let keywords are used to declare the variables.
The variables that are defined with var statement have function scope.
The variables that are defined with let statement have block scope.
// calling x after definition
var x = 5;
console.log(x);
// calling y after definition
let y = 10;
console.log(y);
// calling var z before definition will return undefined
console.log(z);
var z = 2;
// calling let a before definition will give error
console.log(a);
let a = 3;
Map
In JavaScript, map() is a method of the Array object. It creates a new array by calling a function on every element of the original array and storing the results in a new array. map() returns the new array, and the original array is unchanged.
Example 1:
import React, { useEffect, useState } from "react";
const Display = (props) => {
const arrayValues = ["React JS", "Node JS", "Express JS", "Angular JS"];
return (
<div style={{ margin: "20px" }}>
<ul>
{arrayValues.map((value, index) => (
<li key={index}>{value}</li>
))}
</ul>
</div>
);
};
export default Display;
Output:
Example 2:
import React, { useEffect, useState } from "react";
const Display = (props) => {
const arrayValues = [
{ id: 1, name: "React JS" },
{ id: 2, name: "Node JS" },
{ id: 3, name: "Express JS" },
{ id: 4, name: "Angular JS" },
];
return (
<div style={{ margin: "20px" }}>
<ul>
{arrayValues.map((value) => (
<li key={value.id}>{value.name}</li>
))}
</ul>
</div>
);
};
export default Display;
Output:
Filter
In Javascript Filter function is used to filter array of values or array of objects.
Syntax: array.filter((variable)=>condition..)
import React, { useEffect, useState } from "react";
const Display = (props) => {
const arrayValues = [
{ id: 1, name: "React JS" },
{ id: 2, name: "Node JS" },
{ id: 3, name: "Express JS" },
{ id: 4, name: "Angular" },
];
const arrayOfIntegers = [10, 20, 40, 60, 80, 90];
// After using includes filter 4th value of array will be filtered from filtered array
const filteredArray = arrayValues.filter((val) => val.name.includes("JS"));
// Filtering integer array greater than or equal to 60
const filteredIntArray = arrayOfIntegers.filter((val) => val >= 60);
return (
<div style={{ margin: "20px" }}>
<ul>
{filteredArray.map((value) => (
<li key={value.id}>{value.name}</li>
))}
</ul>
<ul>
{filteredIntArray.map((value, index) => (
<li key={index}>{value}</li>
))}
</ul>
</div>
);
};
export default Display;
Output:
Object.Freeze()
The object.Freeze is a static method which freezes an object, Freezing an object prevent extensions and make properties not writable and non-configurable.
const obj={
prop : 45
};
Object.freeze(obj);
// Below will throw an exception
// Because Object freezed to prevent updates
//obj.prop =33;
console.log(obj.prop);
Prototype
All JavaScript objects inherit properties and methods from a prototype.
All JavaScript objects inherit properties and methods from a prototype:
- Date objects inherit from Date.prototype
- Array objects inherit from Array.prototype
- Person objects inherit from Person.prototype
The Object.prototype is on the top of the prototype inheritance chain:
Date objects, Array objects, and Person objects inherit from Object.prototype.
The JavaScript prototype property also allows you to add new methods to objects constructors:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
Event Bubbling
Event bubbling will happen when the event is raised from the element, and it will bubble the events until to the root element.
For example: We have two divisions in the body when we click on each div we are doing some action. By event bubbling it will also execute the click event of its parent div.
To prevent un-necessary event bubbling with the parent we have to use stopPropogation() method.
Shown Example in Below Image:
event.stopPropagation();
Below example is in React JS.
import React from "react";
const App = () => {
return (
<div
onClick={(event) => Div1(event)}
style={{
width: "500px",
height: "600px",
background: "green",
margin: "20px",
padding: "50px",
}}
>
<div
onClick={(event) => Div2(event)}
style={{ width: "300px", height: "300px", background: "white" }}
></div>
</div>
);
function Div1(event) {
console.log("Div 1 Clicked");
}
function Div2(event) {
// stopPropagation is used to prevent un-necessary event bubbling of parent element
// When div2 is clicked preventing parent event by using stopPropagation()
event.stopPropagation();
console.log("Div 2 Clicked");
}
};
export default App;
