61. ### What are the main rules of promise?
A promise must follow a specific set of rules,
1. A promise is an object that supplies a standard-compliant `.then()` method
2. A pending promise may transition into either fulfilled or rejected state
3. A fulfilled or rejected promise is settled and it must not transition into any other state.
4. Once a promise is settled, the value must not change.
62. ### What is callback in callback?
You can nest one callback inside in another callback to execute the actions sequentially one by one. This is known as callbacks in callbacks.
```javascript
loadScript('/script1.js', function(script) {
console.log('first script is loaded');
loadScript('/script2.js', function(script) {
console.log('second script is loaded');
loadScript('/script3.js', function(script) {
console.log('third script is loaded');
// after all scripts are loaded
});
})
});
```
63. ### What is promise chaining?
The process of executing a sequence of asynchronous tasks one after another using promises is known as Promise chaining. Let's take an example of promise chaining for calculating the final result,
```javascript
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000);
}).then(function(result) {
console.log(result); // 1
return result * 2;
}).then(function(result) {
console.log(result); // 2
return result * 3;
}).then(function(result) {
console.log(result); // 6
return result * 4;
});
```
In the above handlers, the result is passed to the chain of .then() handlers with the below work flow,
1. The initial promise resolves in 1 second,
2. After that `.then` handler is called by logging the result(1) and then return a promise with the value of result * 2.
3. After that the value passed to the next `.then` handler by logging the result(2) and return a promise with result * 3.
4. Finally the value passed to the last `.then` handler by logging the result(6) and return a promise with result * 4.
64. ### What is promise.all?
Promise.all is a promise that takes an array of promises as an input (an iterable), and it gets resolved when all the promises get resolved or any one of them gets rejected. For example, the syntax of promise.all method is below,
```javascript
Promise.all([Promise1, Promise2, Promise3]) .then(result) => { console.log(result) }) .catch(error => console.log(`Error in promises ${error}`))
```
**Note:** Remember that the order of the promises(output the result) is maintained as per input order.
65. ### What is the purpose of race method in promise?
Promise.race() method will return the promise instance which is firstly resolved or rejected. Let's take an example of race() method where promise2 is resolved first
```javascript
var promise1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, 'one');
});
var promise2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then(function(value) {
console.log(value); // "two" // Both promises will resolve, but promise2 is faster
});
```
66. ### What is a strict mode in javascript?
Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. This way it prevents certain actions from being taken and throws more exceptions. The literal expression `“use strict”;` instructs the browser to use the javascript code in the Strict mode.
67. ### Why do you need strict mode?
Strict mode is useful to write "secure" JavaScript by notifying "bad syntax" into real errors. For example, it eliminates accidentally creating a global variable by throwing an error and also throws an error for assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object.
68. ### How do you declare strict mode?
The strict mode is declared by adding "use strict"; to the beginning of a script or a function.
If declare at the beginning of a script, it has global scope.
```javascript
"use strict";
x = 3.14; // This will cause an error because x is not declared
```
and if you declare inside a function, it has local scope
```javascript
x = 3.14; // This will not cause an error.
myFunction();
function myFunction() {
"use strict";
y = 3.14; // This will cause an error
}
```
69. ### What is the purpose of double exclamation?
The double exclamation or negation(!!) ensures the resulting type is a boolean. If it was falsey (e.g. 0, null, undefined, etc.), it will be false, otherwise, true.
For example, you can test IE version using this expression as below,
```javascript
let isIE8 = false;
isIE8 = !! navigator.userAgent.match(/MSIE 8.0/);
console.log(isIE8); // returns true or false
```
If you don't use this expression then it returns the original value.
```javascript
console.log(navigator.userAgent.match(/MSIE 8.0/)); // returns either an Array or null
```
**Note:** The expression !! is not an operator, but it is just twice of ! operator.
70. ### What is the purpose of delete operator?
The delete keyword is used to delete the property as well as its value.
```javascript
var user= {name: "John", age:20};
delete user.age;
console.log(user); // {name: "John"}
```
71. ### What is typeof operator?
You can use the JavaScript typeof operator to find the type of a JavaScript variable. It returns the type of a variable or an expression.
```javascript
typeof "John Abraham" // Returns "string"
typeof (1 + 2) // Returns "number"
```
72. ### What is undefined property?
The undefined property indicates that a variable has not been assigned a value, or not declared at all. The type of undefined value is undefined too.
```javascript
var user; // Value is undefined, type is undefined
console.log(typeof(user)) //undefined
```
Any variable can be emptied by setting the value to undefined.
```javascript
user = undefined
```
73. ### What is null value?
The value null represents the intentional absence of any object value. It is one of JavaScript's primitive values. The type of null value is object.
You can empty the variable by setting the value to null.
```javascript
var user = null;
console.log(typeof(user)) //object
```
74. ### What is the difference between null and undefined?
Below are the main differences between null and undefined,
| Null | Undefined |
|---- | -----------|
| It is an assignment value which indicates that variable points to no object. | It is not an assignment value where a variable has been declared but has not yet been assigned a value. |
| Type of null is object | Type of undefined is undefined |
| The null value is a primitive value that represents the null, empty, or non-existent reference. | The undefined value is a primitive value used when a variable has not been assigned a value.|
| Indicates the absence of a value for a variable | Indicates absence of variable itself |
| Converted to zero (0) while performing primitive operations | Converted to NaN while performing primitive operations |
75. ### What is eval?
The eval() function evaluates JavaScript code represented as a string. The string can be a JavaScript expression, variable, statement, or sequence of statements.
```javascript
console.log(eval('1 + 2')); // 3
```
76. ### What is the difference between window and document?
Below are the main differences between window and document,
| Window | Document |
|---- | ---------
| It is the root level element in any web page | It is the direct child of the window object. This is also known as Document Object Model(DOM) |
| By default window object is available implicitly in the page | You can access it via window.document or document. |
| It has methods like alert(), confirm() and properties like document, location | It provides methods like getElementById, getElementByTagName, createElement etc |
77. ### How do you access history in javascript?
The window.history object contains the browsers history. You can load previous and next URLs in the history using back() and next() methods.
```javascript
function goBack() {
window.history.back()
}
function goForward() {
window.history.forward()
}
```
**Note:** You can also access history without window prefix.
78. ### What are the javascript data types?
Below are the list of javascript data types available
1. Number
2. String
3. Boolean
4. Object
5. Undefined
79. ### What is isNaN?
The isNaN() function is used to determine whether a value is an illegal number (Not-a-Number) or not. i.e, This function returns true if the value equates to NaN. Otherwise it returns false.
```javascript
isNaN('Hello') //true
isNaN('100') //false
```
80. ### What are the differences between undeclared and undefined variables?
Below are the major differences between undeclared and undefined variables,
| undeclared | undefined |
|---- | ---------
| These variables do not exist in a program and are not declared | These variables declared in the program but have not assigned any value |
| If you try to read the value of an undeclared variable, then a runtime error is encountered | If you try to read the value of an undefined variable, an undefined value is returned. |
81. ### What are global variables?
Global variables are those that are available throughout the length of the code without any scope. The var keyword is used to declare a local variable but if you omit it then it will become global variable
```javascript
msg = "Hello" // var is missing, it becomes global variable
```
82. ### What are the problems with global variables?
The problem with global variables is the conflict of variable names of local and global scope. It is also difficult to debug and test the code that relies on global variables.
83. ### What is NaN property?
The NaN property is a global property that represents "Not-a-Number" value. i.e, It indicates that a value is not a legal number. It is very rare to use NaN in a program but it can be used as return value for few cases
```javascript
Math.sqrt(-1)
parseInt("Hello")
```
84. ### What is the purpose of isFinite function?
The isFinite() function is used to determine whether a number is a finite, legal number. It returns false if the value is +infinity, -infinity, or NaN (Not-a-Number), otherwise it returns true.
```javascript
isFinite(Infinity); // false
isFinite(NaN); // false
isFinite(-Infinity); // false
isFinite(100); // true
```
85. ### What is an event flow?
Event flow is the order in which event is received on the web page. When you click an element that is nested in various other elements, before your click actually reaches its destination, or target element, it must trigger the click event each of its parent elements first, starting at the top with the global window object.
There are two ways of event flow
1. Top to Bottom(Event Capturing)
2. Bottom to Top (Event Bubbling)
86. ### What is event bubbling?
Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element.
87. ### What is event capturing?
Event capturing is a type of event propagation where the event is first captured by the outermost element, and then successively triggers on the descendants (children) of the target element in the same nesting hierarchy till it reaches the innermost DOM element.
88. ### How do you submit a form using JavaScript?
You can submit a form using JavaScript use document.form[0].submit(). All the form input's information is submitted using onsubmit event handler
```javascript
function submit() {
document.form[0].submit();
}
```
89. ### How do you find operating system details?
The window.navigator object contains information about the visitor's browser os details. Some of the OS properties are avaialble under platform property,
```javascript
console.log(navigator.platform);
```
90. ### What is the difference between document load and DOMContentLoaded events?
The `DOMContentLoaded` event is fired when the initial HTML document has been completely loaded and parsed, without waiting for assets(stylesheets, images, and subframes) to finish loading. Whereas The load event is fired when the whole page has loaded, including all dependent resources(stylesheets, images).
91. ### What is the difference between native, host and user objects?
`Native objects` are objects that are part of the JavaScript language defined by the ECMAScript specification. For example, String, Math, RegExp, Object, Function etc core objects defined in the ECMAScript spec.
`Host objects` are objects provided by the browser or runtime environment (Node). For example, window, XmlHttpRequest, DOM nodes etc considered as host objects.
`User objects` are objects defined in the javascript code. For example, User object created for profile information.
92. ### What are the tools or techniques used for debugging JavaScript code?
You can use below tools or techniques for debugging javascript
1. Chrome Devtools
2. debugger statement
3. Good old console.log statement
93. ### What are the pros and cons of promises over callbacks?
Below are the list of pros and cons of promises over callbacks,
**Pros:**
1. It avoids callback hell which is unreadable
2. Easy to write sequential asynchronous code with .then()
3. Easy to write parallel asynchronous code with Promise.all()
4. Solves some of the common problems of callbacks(call the callback too late, too early, many times and swallow errors/exceptions)
**Cons:**
1. It makes little complex code
2. You need to load a polyfill if ES6 is not supported
94. ### What is the difference between an attribute and a property?
Attributes are defined on the HTML markup whereas properties are defined on the DOM. For example, the below HTML element has 2 attributes type and value,
```javascript
<input type="text" value="Name:">
```
You can retrieve the attribute value as below,
```javascript
const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Good morning
console.log(input.value); // Good morning
```
And after you change the value of the text field to "Good evening", it becomes like
```javascript
console.log(input.getAttribute('value')); // Good morning
console.log(input.value); // Good evening
```
95. ### What is same-origin policy?
The same-origin policy is a policy that prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. If you enable this policy then it prevents a malicious script on one page from obtaining access to sensitive data on another web page using Document Object Model(DOM).
96. ### What is the purpose of void 0?
Void(0) is used to prevent the page from refreshing. This will be helpful to eliminate the unwanted side-effect, because it will return the undefined primitive value. It is commonly used for HTML document that uses href="JavaScript:Void(0);" within an <a> element. i.e, when you click a link, the browser loads a new page or refreshes the same page. But this behavior will be prevented using this expression.
For example, the below link notify the message without reloading the page
```javascript
<a href="JavaScript:void(0);" onclick="alert('Well done!')">Click Me!</a>
```
97. ### Is JavaScript a compiled or interpreted language?
JavaScript is an interpreted language, not a compiled language. An interpreter in the browser reads over the JavaScript code, interprets each line, and runs it. Nowadays modern browsers use a technology known as Just-In-Time (JIT) compilation, which compiles JavaScript to executable bytecode just as it is about to run.
98. ### Is JavaScript a case-sensitive language?
Yes, JavaScript is a case sensitive language. The language keywords, variables, function & object names, and any other identifiers must always be typed with a consistent capitalization of letters.
99. ### Is there any relation between Java and JavaScript?
No, they are entirely two different programming languages and has nothing to do with each other. But both of them are Object Oriented Programming languages and like many other languages, they follow similar syntax for basic features(if, else, for, switch, break, continue etc).
100. ### What are events?
Events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can `react` on these events. Some of the examples of HTML events are,
1. Web page has finished loading
2. Input field was changed
3. Button was clicked
Let's describe the behavior of click event for button element,
```javascript
<!doctype html>
<html>
<head>
<script>
function greeting() {
alert('Hello! Good morning');
}
</script>
</head>
<body>
<button type="button" onclick="greeting()">Click me</button>
</body>
</html>
```
101. ### Who created javascript?
JavaScript was created by Brendan Eich in 1995 during his time at Netscape Communications. Initially it was developed under the name `Mocha`, but later the language was officially called `LiveScript` when it first shipped in beta releases of Netscape.
102. ### What is the use of preventDefault method?
The preventDefault() method cancels the event if it is cancelable, meaning that the default action or behaviour that belongs to the event will not occur. For example, prevent form submission when clicking on submit button and prevent opening the page URL when clicking on hyper link are some common usecases.
```javascript
document.getElementById("link").addEventListener("click", function(event){
event.preventDefault();
});
```
**Note:** Remember that not all events are cancelable.
103. ### What is the use of stopPropagation method?
The stopPropagation method is used to stop the event from bubbling up the event chain. For example, the below nested divs with stopPropagation method prevents default event propagation when clicking on nested div(Div1)
```javascript
<p>Click DIV1 Element</p>
<div onclick="secondFunc()">DIV 2
<div onclick="firstFunc(event)">DIV 1</div>
</div>
<script>
function firstFunc(event) {
alert("DIV 1");
event.stopPropagation();
}
function secondFunc() {
alert("DIV 2");
}
</script>
```
104. ### What are the steps involved in return false usage?
The return false statement in event handlers performs the below steps,
1. First it stops the browser's default action or behaviour.
2. It prevents the event from propagating the DOM
3. Stops callback execution and returns immediately when called.
105. ### What is BOM?
The Browser Object Model (BOM) allows JavaScript to "talk to" the browser. It consists of the objects navigator, history, screen, location and document which are children of window. The Browser Object Model is not standardized and can change based on different browsers.
106. ### What is the use of setTimeout?
The setTimeout() method is used to call a function or evaluates an expression after a specified number of milliseconds. For example, let's log a message after 2 seconds using setTimeout method,
```javascript
setTimeout(function(){ console.log("Good morning"); }, 2000);
```
107. ### What is the use of setInterval?
The setInterval() method is used to call a function or evaluates an expression at specified intervals (in milliseconds). For example, let's log a message after 2 seconds using setInterval method,
```javascript
setInterval(function(){ console.log("Good morning"); }, 2000);
```
108. ### Why is JavaScript treated as Single threaded?
JavaScript is a single-threaded language. Because the language specification does not allow the programmer to write code so that the interpreter can run parts of it in parallel in multiple threads or processes. Whereas languages like java, go, C++ can make multi-threaded and multi-process programs.
109. ### What is an event delegation?
Event delegation is a technique for listening to events where you delegate a parent element as the listener for all of the events that happen inside it.
For example, if you wanted to detect field changes in inside a specific form, you can use event delegation technique,
```javascript
var form = document.querySelector('#registration-form');
// Listen for changes to fields inside the form
form.addEventListener('input', function (event) {
// Log the field that was changed
console.log(event.target);
}, false);
```
110. ### What is ECMAScript?
ECMAScript is the scripting language that forms the basis of JavaScript. ECMAScript standardized by the ECMA International standards organization in the ECMA-262 and ECMA-402 specifications. The first edition of ECMAScript was released in 1997.
111. ### What is JSON?
JSON (JavaScript Object Notation) is a lightweight format that is used for data interchanging. It is based on a subset of JavaScript language in the way objects are built in JavaScript.
112. ### What are the syntax rules of JSON?
Below are the list of syntax rules of JSON
1. The data is in name/value pairs
2. The data is separated by commas
3. Curly braces hold objects
4. Square brackets hold arrays
113. ### What is the purpose JSON stringify?
When sending data to a web server, the data has to be in a string format. You can achieve this by converting JSON object into a string using stringify() method.
```javascript
var userJSON = {'name': 'John', age: 31}
var userString = JSON.stringify(user);
console.log(userString); //"{"name":"John","age":31}"
```
114. ### How do you parse JSON string?
When receiving the data from a web server, the data is always in a string format. But you can convert this string value to javascript object using parse() method.
```javascript
var userString = '{"name":"John","age":31}';
var userJSON = JSON.parse(userString);
console.log(userJSON);// {name: "John", age: 31}
```
115. ### Why do you need JSON?
When exchanging data between a browser and a server, the data can only be text. Since JSON is text only, it can easily be sent to and from a server, and used as a data format by any programming language.
116. ### What are PWAs?
Progressive web applications (PWAs) are a type of mobile app delivered through the web, built using common web technologies including HTML, CSS and JavaScript. These PWAs are deployed to servers, accessible through URLs, and indexed by search engines.
117. ### What is the purpose of clearTimeout method?
The clearTimeout() function is used in javascript to clear the timeout which has been set by setTimeout()function before that. i.e, The return value of setTimeout() function is stored in a variable and it’s passed into the clearTimeout() function to clear the timer.
For example, the below setTimeout method is used to display the message after 3 seconds. This timeout can be cleared by clearTimeout() method.
```javascript
<script>
var msg;
function greeting() {
alert('Good morning');
}
function start() {
msg =setTimeout(greeting, 3000);
}
function stop() {
clearTimeout(msg);
}
</script>
```
118. ### What is the purpose of clearInterval method?
The clearInterval() function is used in javascript to clear the interval which has been set by setInterval() function. i.e, The return value returned by setInterval() function is stored in a variable and it’s passed into the clearInterval() function to clear the interval.
For example, the below setInterval method is used to display the message for every 3 seconds. This interval can be cleared by clearInterval() method.
```javascript
<script>
var msg;
function greeting() {
alert('Good morning');
}
function start() {
msg = setInterval(greeting, 3000);
}
function stop() {
clearInterval(msg);
}
</script>
```
119. ### How do you redirect new page in javascript?
In vanilla javascript, you can redirect to a new page using `location` property of window object. The syntax would be as follows,
```javascript
function redirect() {
window.location.href = 'newPage.html';
}
```
120. ### How do you check whether a string contains a substring?
There are 3 possible ways to check whether a string contains a substring or not,
1. **Using includes:** ES6 provided `String.prototype.includes` method to test a string contains a substring
```javascript
var mainString = "hello", subString = "hell";
mainString.includes(subString)
```
2. **Using indexOf:** In an ES5 or older environments, you can use `String.prototype.indexOf` which returns the index of a substring. If the index value is not equal to -1 then it means the substring exist in the main string.
```javascript
var mainString = "hello", subString = "hell";
mainString.indexOf(subString) !== -1
```
3. **Using RegEx:** The advanced solution is using Regular expression's test method(`RegExp.test`), which allows for testing for against regular expressions
```javascript
var mainString = "hello", regex = "/hell/";
regex.test(mainString)
```
Comments
Post a Comment
please do not enter any spam link in the comment box