JavaScript Tricky Concepts
1. Shift and unshift methods:
Shift method: This method removes items from the beginning of an array list.
Example: var name = [anika, kefaya, aliza]
name.shift(); // Output will be [kefaya, aliza]
Unshift method: This method adds elements in the beginning of an array.
Example: var name = [kefaya, aliza]
name.unshift(anika); // Output will be [anika, kefaya, aliza]
2. Instanceof in js:
“Instanceof” operator is used for checking the type of error at the run time. It will return “true” if the type of the object matches the requirement of the “instanceof” operator. If not then it will return “false” as an output. Example:
Var = [anika, kilu, ali]
console.log(names instanceof number);
// Output will be “False”
console.log(names instanceof array);
// Output will be “True”
3. Slice() and splice() method in an array:
Slice() method: It can remove the selected array elements from beginning to the end of an array list. Example:
let num = [1, 2, 3, 4, 5]
Let newNum = num.slice(2, 3); // returns [3]
Splice() method: It returns the removed items from an array by either add or remove an item. Example:
let num = [1, 2, 3, 4, 5]
let newNum = num.splice(0, 2); // returns[1, 2], original array = [3, 4, 5]
4. “for…of” loop:
The “for…of” loop works in a very simple way by iterating over arrays or other objects. Example :
let number = [1, 2, 3, 4, 5];
for(let number of numbers) {
console.log(number); // 1, 2, 3, 4, 5
}
5. Var, let & const variables :
var: It’s a global variable. It is changeable for any variable.
const: If we want to keep fixed the value of the variable then we should use const variable.
let: If we want to set the value of the variable temporarily and need to change the value later then we can use let variable.
6. Freeze method:
This method is used to freeze an object or array. It is used to make an object immutable. Example:
const num= {
value: 100
};
Object.freeze(num);
num.value = 200; // Throws an error in strict mode
console.log(num.value); //100
7. Strict Mode:
We can solve many unwanted errors silently by using strict mode in js. Strict mode helps code to execute without any error. So, we need to use “use strict” at the beginning of the code. Example:
‘use strict’
// The rest of the js code we can write.
8. Getting multiple value from function in JavaScript:
JavaScript can only return one value at a time. But sometimes it needs to return multiple values from a function. For this, we need to use an array or object inside the js function. Now lets see the example,
Using Array: By using array we can return multiple values from a function. Like,
[
function getValue() {
const name = “Anika”;
const job = “Programmer”
const age = “23”
return [name, job, age];
}
const value = getValue();
console.log(value[0]); // “Anika”
console.log(value[1]); // “Programmer”
console.log(value[2]); // “23”
]
Using Object: We can also use objects for getting multiple values from a function.
[
function getValue() {
const name = “Anika”;
const job = “Programmer”
const age = “23”
return {name, job, age};
}
const value = getValue();
console.log(value.name); // “Anika”
console.log(value.job); // “Programmer”
console.log(value.age); // “23”
]
9. Differences between “==” and “===”:
(==) called double equal. It is used as a comparison operator. It automatically converts the type of the operands and makes them equal to each other. It works for checking values.
(===) called triple equal. It’s also a comparison operator but it doesn’t do type conversion like double equal. It only checks the type of the operands and returns false if their type doesn’t match. It works for checking types.
10. Callback function:
Let’s start with an example of callback function,
function name(callback){
callback();
}
From the example of js function we can see that, js function takes another function as a parameter and then again calls it inside. This is called a callback function.
11. The “this” keyword:
“this” keyword indicates the value of an object belonging to its original owner. Example,
function value() {
Console.log(this.name + ‘is my name’)
}
Here, “this” value is working for the owner of the “name” value. In the output, the name of the person will be shown.
12. Spread operator:
The spread operator spreads values as numbers, not arrays. It is denoted by (…) operator. Lets see a example how the spread operator work,
let num = [1, 2, 3, 4, 5];
let newNum = […num, 6, 7, 8];
alert(newNum); // [1, 2, 3, 4, 5, 6, 7, 8]
13. JavaScript scope, Block scope, and global scope:
Scope: For determining the visibility of variables, function and objects scope is used.
Block scope: If a variable is declared using block scope then it can not be accessed from outside the block({}). Example: “var” keyword can’t have block scope.
{
let a = 2;
}
Global scope: It’s a method of publicly declared variables. Variables declared in a global scope can be accessed anytime from anywhere. It’s like a public property. Example:
let num = 3;
function(){
} // this variable can be accessed anywhere
14. JSX:
JSX is JavaScript XML . It is just a syntax extension of js. It allows writing HTML code in react. It works as a syntax extension of javascript and easily combines js and html code together.
JSX isn’t a regular javascript object rather it’s just a library of react. So, browsers can’t read the data of JSX. For reading it, they need a compiler like babel to transpile the JSX data into regular javascript objects.
15. Component lifecycle:
Component lifecycle has three main phases by which we can monitor and manipulate each and everything. They are —
Mounting — It’s the starting of the life journey of the components.
Updating — In this phase, comments can update their data.
Unmounting — It’s the ending of the life of the components.
16. Custom hook:
A custom hook can call other hooks. It is a JavaScript function whose name starts with “use”. In react, custom hooks are an essential tool that add special, unique functionality to React applications. Example: In the following code I create a custom hook then load the data.
const Countries = () => {
const[countries, setCountries] = useState([]);
useEffect(() => {
fetch(‘https://restcountries.com/v2/all')
.then(res => res.json())
.then(data => setCountries(data));
}, [])
17. Prop drilling:
Basically data passes from a lower component to higher components. But sometimes, there is a need to pass data from a component that is in a higher position. And prop drilling is done in that process.
18. Context API:
Context API allows us to pass down and consume data from every component that we need without using props. For working with context API we need “React.createContext()”. It gives us a consumer and a provider.
19. Higher order component:
For reusing component logic, react uses a technique that is called higher-order component. It is such a component that takes a component as an input and returns another component. Example:
const EnhancedComponent = higherOrderComponent(WrappedComponent);
20. State vs Props:
The main difference between them is that the state is used for internal data sending but props are externally used. Also Props are immutable but states are mutable. State is changeable but props are not changeable. Props sends unidirectional data but state is not.
By using props, data can be passed from parent to child. Props can change when a component’s parent renders the component again with different properties
