1.Does JavaScript pass parameter by value or by reference?
Javascript always pass by value so changing the value of the variable never changes the underlying primitive (String or number). However, when a variable refers to an object which includes array, the value is the reference to the object.
Example:
var num = 23,
name = “Abrar”,
obj1 = {
value: “first value”
},
obj2 = {
value: “second value”
},
obj3 = obj2;
function change(num, name, obj1, obj2) {
num = num * 10;
name = “Paul Irish”;
obj1 = obj2;
obj2.value = “new value”;
}
change(num, name, obj1, obj2);
console.log(num); // 23
console.log(name);// “Abrar”
console.log(obj1.value);//”first value”
console.log(obj2.value);//”new value”
console.log(obj3.value);//”new value”
2. What is Event Propagation?
Event propagation is a mechanism that defines how events propagate or travel through the DOM tree to arrive at its target and what happens to it afterward.
Let’s understand this with the help of an example, suppose we have assigned a click event handler on a hyperlink <a> element which is nested inside a paragraph <p> element. Now if we click on that link, the handler will be executed. But, instead of link, if we assign the click event handler to the paragraph containing the link, then even in this case, clicking the link will still trigger the handler. That’s because events don’t just affect the target element that generated the event — they travel up and down through the DOM tree to reach their target. This is known as event propagation.
The standard DOM Events describes 3 phases of event propagation:
- Capturing phase — the event goes down to the element.
- Target phase — the event reached the target element.
- Bubbling phase — the event bubbles up from the element.
3. Why does it return false when comparing two similar objects in JavaScript?
let a = { name: ‘Abrar’ };
let b = { name: ‘Abrar’ };
let c = a;
console.log(a === b); // return false
console.log(a === c); // return true
JavaScript compares objects and primitives differently. In primitives it compares them by value while in objects it compares them by reference or the address in memory where the variable is stored. That’s why the first console.log statement returns false and the second console.log statement returns true. a and c have the same reference and a and b are not.
4. What does the !! operator do?
It is possible to use a couple of NOT operators in series to explicitly force the conversion of any value to the corresponding boolean primitive. The conversion is based on the “truthyness” or “falsyness” of the value .
The same conversion can be done through the Boolean function.
n1 = !!true // !!truthy returns true
n2 = !!{} // !!truthy returns true: any object is truthy…
n3 = !!(new Boolean(false)) // …even Boolean objects with a false .valueOf()!
n4 = !!false // !!falsy returns false
n5 = !!”” // !!falsy returns false
n6 = !!Boolean(false) // !!falsy returns false
n7= !!null // !!falsy returns false
n8=!!undefined // !!falsy returns false
n9= !!NaN // !!falsy returns false
n10= !!1 // !!truthy returns true
n11= !! ‘ ’ // !!truthy returns true
5. What are Higher Order Functions?
Higher order functions are functions that operate on other functions, either by taking them as arguments or by returning them. In simple words, A Higher-Order function is a function that receives a function as an argument or returns the function as output.
For example, Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language.
6.What is Object Destructuring?
Object Destructuring is a JavaScript expression that allows us to extract data from arrays, objects, maps and sets which we’re going to learn more about in a future ES6.io video into their own variable. It allows us to extract properties from an object or items from an array, multiple at a time.
Example:
const myInfo = {
firstName: “Abrar”,
lastName: “Islam”,
age: 23
};
//object destructuring
let { firstName, lastName, age } = myInfo;
7.How could you cache execution of any function?
We could have a method where we will pass a function and it will internally maintain a cache object where calculated value will be cached. When we will call the function with same argument, the cached value will be served.
Example:
function cacheFn(fn) {
var cache={};
return function(arg){
if (cache[arg]){
return cache[arg];
}
else{
cache[arg] = fn(arg);
return cache[arg];
}
}
}
8.What’s the difference among = ,== and ===?
The difference between =, == and === in javascript is describe by a small example:
= is used for assigning values to a variable in JavaScript.
== is used for comparison between two variables irrespective of the datatype of variable.
=== is used for comparision between two variables but this will check strict type, which means it will check datatype and compare two values.
Exapmle of =
var number = 100; // Here number variable assigned using =
Example of ==
// Here Comparision between two values using ==.
if (number == 100) // It will compare irrespective of datatype of variable
console.log(“Both are equal”);
else
console.log(“Both are not equal”);
Example of ===
// Here Comparision between two values using ===.
if (number === 100) // It will compare strict check means it will check datatype as well.
console.log(“Both are equal”);
else
console.log(“Both are not equal”);
9.How would you destroy multiple list items with one click handler?
We can actually leverage event bubbling. We can have only one event handler attached to the parent element of one hundred list items. In this case, we can attach the event handler to the “ul” tag. After we click on a list item (list item does not have an event), event will bubble and “ul” has a handler. That handler will be fired.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id=”listToDestroy”>
<li><a href=”#”>first item</a></li>
<li><a href=”#”>second item</a></li>
<li><a href=”#”>third item</a></li>
<li><a href=”#”>forth item</a></li>
<li><a href=”#”>Fifth item</a></li>
</ul>
<script>
document.getElementById(‘listToDestroy’).addEventListener(‘click’, function (e) {
var elm = e.target.parentNode;
elm.parentNode.removeChild(elm);
e.preventDefault();
});
</script>
</body>
</html>
10.What is defer and async keyword does in a script tag?
With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded.With defer, the file gets downloaded asynchronously, but executed only when the document parsing is completed. With defer, scripts will execute in the same order as they are called. This makes defer the attribute of choice when a script depends on another script. For example, if you’re using jQuery as well as other scripts that depend on it, you’d use defer on them (jQuery included), making sure to call jQuery before the dependent scripts.A good strategy is to use async when possible, and then defer when async isn’t an option.