271. ### How do you perform form validation using javascript?
JavaScript can be used to perform HTML form validation. For example, if form field is empty, the function needs to notify, and return false, to prevent the form being submitted.
Lets' perform user login in an html form,
```html
<form name="myForm" onsubmit="return validateForm()" method="post">
User name: <input type="text" name="uname">
<input type="submit" value="Submit">
</form>
```
And the validation on user login is below,
```javascript
function validateForm() {
var x = document.forms["myForm"]["uname"].value;
if (x == "") {
alert("The username shouldn't be empty");
return false;
}
}
```
272. ### How do you perform form validation without javascript?
You can perform HTML form validation automatically without using javascript. The validation enabled by applying `required` attribute to prevent form submission when the input is empty.
```html
<form method="post">
<input type="text" name="uname" required>
<input type="submit" value="Submit">
</form>
```
**Note:** Automatic form validation does not work in Internet Explorer 9 or earlier.
273. ### What are the DOM methods available for constraint validation?
The below DOM methods are available for constraint validation on an invalid input,
1. checkValidity(): It returns true if an input element contains valid data.
2. setCustomValidity(): It is used to set the validationMessage property of an input element.
Let's take an user login form with DOM validations
```javascript
function myFunction() {
var userName = document.getElementById("uname");
if (!userName.checkValidity()) {
document.getElementById("message").innerHTML = userName.validationMessage;
} else {
document.getElementById("message").innerHTML = "Entered a valid username";
}
}
```
274. ### What are the available constraint validation DOM properties?
Below are the list of some of the constraint validation DOM properties available,
1. validity: It provides list of boolean properties related to the validity of an input element.
2. validationMessage: It displays the message when the validity is false.
3. willValidate: It indicates if an input element will be validated or not.
275. ### What are the list of validity properties?
The validity property of an input element provides a set of properties related to the validity of data.
1. customError: It returns true, if a custom validity message is set.
2. patternMismatch: It returns true, if an element's value does not match its pattern attribute.
3. rangeOverflow: It returns true, if an element's value is greater than its max attribute.
4. rangeUnderflow: It returns true, if an element's value is less than its min attribute.
5. stepMismatch: It returns true, if an element's value is invalid according to step attribute.
6. tooLong: It returns true, if an element's value exceeds its maxLength attribute.
7. typeMismatch: It returns true, if an element's value is invalid according to type attribute.
8. valueMissing: It returns true, if an element with a required attribute has no value.
9. valid: It returns true, if an element's value is valid.
276. ### Give an example usage of rangeOverflow property?
If an element's value is greater than its max attribute then rangeOverflow property returns true. For example, the below form submission throws an error if the value is more than 100,
```html
<input id="age" type="number" max="100">
<button onclick="myOverflowFunction()">OK</button>
```
```javascript
function myOverflowFunction() {
if (document.getElementById("age").validity.rangeOverflow) {
alert("The mentioned age is not allowed");
}
}
```
277. ### Is enums feature available in javascript?
No, javascript does not natively support enums. But there are different kind of solutions to simulate them even though they may not provide exact equivalent. For example, you can use freeze or seal on object,
```javascript
var DaysEnum = Object.freeze({"monday":1, "tuesday":2, "wednesday":3, ...})
```
278. ### What is an enum?
An enum is a type restricting variables to one value from a predefined set of constants. JavaScript has no enums but typescript provides built-in enum support.
```javascript
enum Color {
RED, GREEN, BLUE
}
```
279. ### How do you list all properties of an object?
You can use `Object.getOwnPropertyNames()` method which returns an array of all properties found directly in a given object. Let's the usage of it in an example,
```javascript
const newObject = {
a: 1,
b: 2,
c: 3
};
console.log(Object.getOwnPropertyNames(newObject)); ["a", "b", "c"]
```
280. ### How do you get property descriptors of an object?
You can use `Object.getOwnPropertyDescriptors()` method which returns all own property descriptors of a given object. The example usage of this method is below,
```javascript
const newObject = {
a: 1,
b: 2,
c: 3
};
const descriptorsObject = Object.getOwnPropertyDescriptors(newObject);
console.log(descriptorsObject.a.writable); //true
console.log(descriptorsObject.a.configurable); //true
console.log(descriptorsObject.a.enumerable); //true
console.log(descriptorsObject.a.value); // 1
```
281. ### What are the attributes provided by a property descriptor?
A property descriptor is a record which has the following attributes
1. value: The value associated with the property
2. writable: Determines whether the value associated with the property can be changed or not
3. configurable: Returns true if the type of this property descriptor can be changed and if the property can be deleted from the corresponding object.
4. enumerable: Determines whether the property appears during enumeration of the properties on the corresponding object or not.
5. set: A function which serves as a setter for the property
6. get: A function which serves as a getter for the property
282. ### How do you extend classes?
The `extends` keyword is used in class declarations/expressions to create a class which is a child of another class. It can be used to subclass custom classes as well as built-in objects. The syntax would be as below,
```javascript
class ChildClass extends ParentClass { ... }
```
Let's take an example of Square subclass from Polygon parent class,
```javascript
class Square extends Rectangle {
constructor(length) {
super(length, length);
this.name = 'Square';
}
get area() {
return this.width * this.height;
}
set area(value) {
this.area = value;
}
}
```
283. ### How do I modify the url without reloading the page?
The `window.localtion.url` property will be helpful to modify the url but it reloads the page. HTML5 introduced the `history.pushState()` and `history.replaceState()` methods, which allow you to add and modify history entries, respectively. For example, you can use pushState as below,
```javascript
window.history.pushState('page2', 'Title', '/page2.html');
```
284. ### How do you check whether an array includes a particular value or not?
The `Array#includes()` method is used to determine whether an array includes a particular value among its entries by returning either true or false. Let's see an example to find an element(numeric and string) with in array.
```javascript
var numericArray = [1, 2, 3, 4];
console.log(numericArray.includes(3)); // true
var stringArray = ['green', 'yellow', 'blue'];
console.log(stringArray.includes('blue')); //true
```
285. ### How do you compare scalar arrays?
You can use length and every methods of arrays to compare two scalar(compared directly using ===) arrays. The combination of these expressions can give the expected result,
```javascript
const arrayFirst = [1,2,3,4,5];
const arraySecond = [1,2,3,4,5];
console.log(arrayFirst.length === arraySecond.length && arrayFirst.every((value, index) => value === arraySecond[index])); // true
````
If you would like to compare arrays irrespective of order then you should sort them before,
```javascript
const arrayFirst = [2,3,1,4,5];
const arraySecond = [1,2,3,4,5];
console.log(arrayFirst.length === arraySecond.length && arrayFirst.sort().every((value, index) => value === arraySecond[index])); //true
````
286. ### How to get the value from get parameters?
The `new URL()` object accepts url string and `searchParams` property of this object can be used to access the get parameters. Remember that you may need to use polyfill or `window.location` to access the URL in older browsers(including IE).
```javascript
let urlString = "http://www.some-domain.com/about.html?x=1&y=2&z=3"; //window.location.href
let url = new URL(urlString);
let parameterZ = url.searchParams.get("z");
console.log(parameterZ); // 3
```
287. ### How do you print numbers with commas as thousand separators?
You can use `Number.prototype.toLocaleString()` method which returns a string with a language-sensitive representation such as thousand separator,currency etc of this number.
```javascript
function convertToThousandFormat(x){
return x.toLocaleString(); // 12,345.679
}
console.log(convertToThousandFormat(12345.6789));
```
288. ### What is the difference between java and javascript?
Both are totally unrelated programming languages and no relation between them. Java is statically typed, compiled, runs on its own VM. Whereas Javascript is dynamically typed, interpreted, and runs in a browser and nodejs environments. Let's see the major differences in a tabular format,
| Feature | Java | JavaScript |
|---- | ---------
| Typed | It's a strongly typed language | It's a dynamic typed language |
| Paradigm | Object oriented programming | Prototype based programming |
| Scoping | Block scoped | Function-scoped |
| Concurrency | Thread based | event based |
| Memory | Uses more memory | Uses less memory. Hence it will be used for web pages |
289. ### Is javascript supports namespace?
JavaScript doesn’t support namespace by default. So if you create any element(function, method, object, variable) then it becomes global and pollute the global namespace. Let's take an example of defining two functions without any namespace,
```javascript
function func1() {
console.log("This is a first definition");
}
function func1() {
console.log("This is a second definition");
}
func1(); // This is a second definition
```
It always calls the second function definition. In this case, namespace will solve the name collision problem.
290. ### How do you declare namespace?
Even though JavaScript lack namespaces, we can use Objects , IIFE to create namespaces.
1. **Using Object Literal Notation:** Let's wrap variables and function inside Object literal which act as a namespace. After that you can access them using object notation
```javascript
var namespaceOne = {
function func1() {
console.log("This is a first definition");
}
}
var namespaceTwo = {
function func1() {
console.log("This is a second definition");
}
}
namespaceOne.func1(); // This is a first definition
namespaceTwo.func1(); // This is a second definition
```
2. **Using IIFE (Immediately invoked function expression):** The outer pair of parenthesis of IIFE creates a local scope for all the code inside of it and makes the anonymous function a function expression. Due to that, you can create same function in two different function expressions to act as namespace.
```javascript
(function() {
function fun1(){
console.log("This is a first definition");
} fun1();
}());
(function() {
function fun1(){
console.log("This is a second definition");
} fun1();
}());
```
3. **Using a block and a let/const declaration:** In ECMAScript 6, you can simply use a block and a let declaration to restrict the scope of a variable to a block.
```javascript
{
let myFunction= function fun1(){
console.log("This is a first definition");
}
myFunction();
}
//myFunction(): ReferenceError: myFunction is not defined.
{
let myFunction= function fun1(){
console.log("This is a second definition");
}
myFunction();
}
//myFunction(): ReferenceError: myFunction is not defined.
```
291. ### How do you invoke javascript code in an iframe from parent page?
Initially iFrame need to be accessed using either `document.getElementBy` or `window.frames`. After that `contentWindow` property of iFrame gives the access for targetFunction
```javascript
document.getElementById('targetFrame').contentWindow.targetFunction();
window.frames[0].frameElement.contentWindow.targetFunction(); // Accessing iframe this way may not work in latest versions chrome and firefox
```
292. ### How do get the timezone offset from date?
You can use `getTimezoneOffset` method of date object. This method returns the time zone difference, in minutes, from current locale (host system settings) to UTC
```javascript
var offset = new Date().getTimezoneOffset();
console.log(offset); // -480
```
293. ### How do you load CSS and JS files dynamically?
You can create both link and script elements in the DOM and append them as child to head tag. Let's create a function to add script and style resources as below,
```javascript
function loadAssets(filename, filetype) {
if (filetype == "css") { // External CSS file
var fileReference = document.createElement("link")
fileReference.setAttribute("rel", "stylesheet");
fileReference.setAttribute("type", "text/css");
fileReference.setAttribute("href", filename);
} else if (filetype == "js") { // External JavaScript file
var fileReference = document.createElement('script');
fileReference.setAttribute("type", "text/javascript");
fileReference.setAttribute("src", filename);
}
if (typeof fileReference != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileReference)
}
```
294. ### What are the different methods to find HTML elements in DOM?
If you want to access any element in an HTML page, you need to start with accessing the document object. Later you can use any of the below methods to find the HTML element,
1. document.getElementById(id): It finds an element by Id
2. document.getElementsByTagName(name): It finds an element by tag name
3. document.getElementsByClassName(name): It finds an element by class name
295. ### What is jQuery?
jQuery is a popular cross-browser JavaScript library that provides Document Object Model (DOM) traversal, event handling, animations and AJAX interactions by minimizing the discrepancies across browsers. It is widely famous with its philosophy of “Write less, do more”. For example, you can display welcome message on the page load using jQuery as below,
```javascript
$(document).ready(function(){ // It selects the document and apply the function on page load
alert('Welcome to jQuery world');
});
```
**Note:** You can download it from jquery official site or install it from CDNs, like google.
296. ### What is V8 JavaScript engine?
V8 is an open source high-performance JavaScript engine used by the Google Chrome browser, written in C++. It is also being used in the node.js project. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS 10.12+, and Linux systems that use x64, IA-32, ARM, or MIPS processors.
**Note:** It can run standalone, or can be embedded into any C++ application.
297. ### Why do we call javascript as dynamic language?
JavaScript is a loosely typed or a dynamic language because variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned/re-assigned with values of all types.
```javascript
let age = 50; // age is a number now
age = 'old'; // age is a string now
age = true; // age is a boolean
```
298. ### What is a void operator?
The `void` operator evaluates the given expression and then returns undefined(i.e, without returning value). The syntax would be as below,
```javascript
void (expression)
void expression
```
Let's display a message without any redirections or reloads
```javascript
<a href="javascript:void(alert('Welcome to JS world'))">Click here to see a message</a>
```
**Note:** This operator is often used to obtain the undefined primitive value, using "void(0)".
299. ### How to set the cursor to wait?
The cursor can be set to wait in JavaScript by using the property "cursor". Let's perform this behavior on page load using the below function.
```javascript
function myFunction() {
window.document.body.style.cursor = "wait";
}
```
and this function invoked on page load
```html
<body onload="myFunction()">
```
300. ### How do you create an infinite loop?
You can create infinite loop using for and while loops without using any expressions. The for loop construct or syntax is better approach in terms of ESLint and code optimizer tools,
```javascript
for (;;) {}
while(true) {
}
```
301. ### Why do you need to avoid with statement?
JavaScript's with statement was intended to provide a shorthand for writing recurring accesses to objects. So it can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. Let's take an example where it is used to avoid redundancy when accessing an object several times.
```javascript
a.b.c.greeting = 'welcome';
a.b.c.age = 32;
```
Using `with` it turns this into:
```javascript
with(a.b.c) {
greeting = "welcome";
age = 32;
}
```
But this `with` statement creates performance problems since one cannot predict whether argument will refer to a real variable or to a property inside the with argument.
302. ### What is the output of below for loops?
```javascript
for (var i = 0; i < 4; i++) { // global scope
setTimeout(() => console.log(i));
}
for (let i = 0; i < 4; i++) { // block scope
setTimeout(() => console.log(i));
}
```
The output of the above for loops is 4 4 4 4 and 0 1 2 3
**Explanation:** Due to event queue/loop of javascript, the `setTimeout` callback function is called after the loop has been executed. Since the variable i is declared with `var` keyword it became a global variable and the value was equal to 4 using iteration when the time setTimeout function is invoked. Hence, the output of the first loop is `4 4 4 4`. Whereas in the second loop, the variable i is declared as `let` keyword it became a block scoped variable and it holds a new value(0, 1 ,2 3) for each iteration. Hence, the output of the first loop is `0 1 2 3`.
303. ### List down some of the features of ES6?
Below are the list of some new features of ES6,
1. Support for constants or immutable variables
2. Block-scope support for variables, constants and functions
3. Arrow functions
4. Default parameters
5. Rest and Spread Parameters
6. Template Literals
7. Multi-line Strings
8. Destructuring Assignment
9. Enhanced Object Literals
10. Promises
11. Classes
12. Modules
304. ### What is ES6?
ES6 is the sixth edition of the javascript language and it was released on June 2015. It was initially known as ECMAScript 6 (ES6) and later renamed to ECMAScript 2015. Almost all the modern browsers support ES6 but for the old browsers there are many transpilers, like Babel.js etc.
305. ### Can I redeclare let and const variables?
No, you cannot redeclare let and const variables. If you do, it throws below error
```bash
Uncaught SyntaxError: Identifier 'someVariable' has already been declared
```
**Explanation:** The variable declaration with `var` keyword refers to a function scope and the variable is treated as if it were declared at the top of the enclosing scope due to hoisting feature. So all the multiple declarations contributing to the same hoisted variable without any error. Let's take an example of re-declaring variables in the same scope for both var and let/const variables.
```javascript
var name = 'John';
function myFunc() {
var name = 'Nick';
var name = 'Abraham'; // Re-assigned in the same function block
alert(name); // Abraham
}
myFunc();
alert(name); // John
```
The block-scoped multi-declaration throws syntax error,
```javascript
let name = 'John';
function myFunc() {
let name = 'Nick';
let name = 'Abraham'; // Uncaught SyntaxError: Identifier 'name' has already been declared
alert(name);
}
myFunc();
alert(name);
```
306. ### Is const variable makes the value immutable?
No, the const variable doesn't make the value immutable. But it disallows subsequent assignments(i.e, You can declare with assignment but can't assign another value later)
```javascript
const userList = [];
userList.push('John'); // Can mutate even though it can't re-assign
console.log(userList); // ['John']
```
307. ### What are default parameters?
In E5, we need to depends on logical OR operator to handle default values of function parameters. Whereas in ES6, Default function parameters feature allows parameters to be initialized with default values if no value or undefined is passed. Let's compare the behavior with an examples,
```javascript
//ES5
var calculateArea = function(height, width) {
height = height || 50;
width = width || 60;
return width * height;
}
console.log(calculateArea()); //300
```
The default parameters makes the initialization more simpler,
```javascript
//ES6
var calculateArea = function(height = 50, width = 60) {
return width * height;
}
console.log(calculateArea()); //300
```
308. ### What are template literals?
Template literals or template strings are string literals allowing embedded expressions. These are enclosed by the back-tick (` `) character instead of double or single quotes.
In E6, this feature enables using dynamic expressions as below,
```javascript
var greeting = `Welcome to JS World, Mr. ${firstName} ${lastName}.`
```
In ES5, you need break string like below,
```javascript
var greeting = 'Welcome to JS World, Mr. ' + firstName + ' ' + lastName.`
```
**Note:** You can use multi-line strings and string interpolation features with template literals.
309. ### How do you write multi-line strings in template literals?
In ES5, you would have to use newline escape character('\n') and concatenation symbol(+) in order to get multi-line strings.
```javascript
console.log('This is string sentence 1\n' +
'This is string sentence 2');
```
Whereas in ES6, You don't need to mention any newline sequence character,
```javascript
console.log(`This is string sentence
'This is string sentence 2`);
```
310. ### What are nesting templates?
The nesting templates is a feature supported with in template literals syntax to allow inner backticks inside a placeholder ${ } within the template. For example, the below nesting template is used to display the icons based on user permissions whereas outer template checks for platform type,
```javascript
const iconStyles = `icon ${ isMobilePlatform() ? '' :
`icon-${user.isAuthorized ? 'submit' : 'disabled'}` }`;
```
You can write the above usecase without nesting template feature as well. However, nesting template feature is more compact and readable.
```javascript
//Without nesting templates
const iconStyles = `icon ${ isMobilePlatform() ? '' :
(user.isAuthorized ? 'icon-submit' : 'icon-disabled'}`;
```
311. ### What are tagged templates?
Tagged templates are the advanced form of templates in which tags allow you to parse template literals with a function. The tag function accepts first parameter as array of strings and remaining parameters as expressions. This function can also return manipulated string based on parameters. Let's see the usage of this tagged template behavior of an IT professional skill set in an organization,
```javascript
var user1 = 'John';
var skill1 = 'JavaScript';
var experience1 = 15;
var user2 = 'Kane';
var skill2 = 'JavaScript';
var experience2 = 5;
function myInfoTag(strings, userExp, experienceExp, skillExp) {
var str0 = strings[0]; // "Mr/Ms. "
var str1 = strings[1]; // " is a/an "
var str2 = strings[2]; // "in"
var expertiseStr;
if (experienceExp > 10){
expertiseStr = 'expert developer';
} else if(skillExp > 5 && skillExp <= 10) {
expertiseStr = 'senior developer';
} else {
expertiseStr = 'junior developer';
}
return `${str0}${userExp}${str1}${experienceExp}{str3}`;
}
var output1 = myInfoTag`Mr/Ms. ${ user1 } is a/an ${ experience1 } in ${skill1}`;
var output2 = myInfoTag`Mr/Ms. ${ user2 } is a/an ${ experience2 } in ${skill2}`;
console.log(output1);// Mr/Ms. John is a/an expert developer in JavaScript
console.log(output2);// Mr/Ms. Kane is a/an junior developer in JavaScript
```
312. ### What are raw strings?
ES6 provides raw strings feature using `String.raw()` method which is used to get the raw string form of template strings. This feature allows you to access the raw strings as they were entered, without processing escape sequences. For example, the usage would be as below,
```javascript
var calculationString = String.raw `The sum of numbers is \n${1+2+3+4}!`;
console.log(calculationString); // The sum of numbers is 10
```
If you don't use raw strings, the newline character sequence will be processed by displaying the output in multiple lines
```
var calculationString = `The sum of numbers is \n${1+2+3+4}!`;
console.log(calculationString);
// The sum of numbers is
// 10
```
Also, the raw property is available on the first argument to the tag function
```javascript
function tag(strings) {
console.log(strings.raw[0]);
}
```
313. ### What is destructuring assignment?
The destructuring assignment is a JavaScript expression that makes it possible to unpack values from arrays or properties from objects into distinct variables.
Let's get the month values from an array using destructuring assignment
```javascript
var [one, two, three] = ['JAN', 'FEB', 'MARCH'];
console.log(one); // "JAN"
console.log(two); // "FEB"
console.log(three); // "MARCH"
```
and you can get user properties of an object using destructuring assignment,
```javascript
var {name, age} = {name: 'John', age: 32};
console.log(name); // John
console.log(age); // 32
```
314. ### What are default values in destructuring assignment?
A variable can be assigned a default value when the value unpacked from the array or object is undefined during destructuring assignment. It helps to avoid setting default values separately for each assignment. Let's take an example for both arrays and object usecases,
**Arrays destructuring:**
```javascript
var x, y, z;
[x=2, y=4, z=6] = [10];
console.log(x); // 10
console.log(y); // 4
console.log(z); // 6
```
**Objects destructuring:**
```javascript
var {x=2, y=4, z=6} = {x: 10};
console.log(x); // 10
console.log(y); // 4
console.log(z); // 6
```
315. ### How do you swap variables in destructuring assignment?
If you don't use destructuring assignment, swapping two values requires a temporary variable. Whereas using destructuring feature, two variables values can be swapped in one destructuring expression. Let's swap two number variables in array destructuring assignment,
```javascript
var x = 10, y = 20;
[x, y] = [y, x];
console.log(x); // 20
console.log(y); // 10
```
316. ### What are enhanced object literals?
Object literals make it easy to quickly create objects with properties inside the curly braces. For example, it provides shorter syntax for common object property definition as below.
```javascript
//ES6
var x = 10, y = 20
obj = { x, y }
console.log(obj); // {x: 10, y:20}
//ES5
var x = 10, y = 20
obj = { x : x, y : y}
console.log(obj); // {x: 10, y:20}
```
317. ### What are dynamic imports?
The dynamic imports using `import()` function syntax allows us to load modules on demand by using promises or the async/await syntax. Currently this features is in stage4 proposal(https://github.com/tc39/proposal-dynamic-import). The main advantage of dynamic imports is reduction of our bundle's sizes, the size/payload response of our requests and overall improvements in the user experience.
The syntax of dynamic imports would be as below,
```javascript
import('./Module').then(Module => Module.method());
```
318. ### What are the use cases for dynamic imports?
Below are some of the use cases of using dynamic imports over static imports,
1. Import a module on-demand or conditionally. For example, if you want to load a polyfill on legacy browser
```javascript
if (isLegacyBrowser()) {
import(···)
.then(···);
}
```
2. Compute the module specifier at runtime. For example, you can use it for internationalization.
```javascript
import(`messages_${getLocale()}.js`).then(···);
```
3. Import a module from within a regular script instead a module.
319. ### What are typed arrays?
Typed arrays are array-like objects from ECMAScript 6 API for handling binary data. JavaScript provides 8 Typed array types,
1. Int8Array: An array of 8-bit signed integers
2. Int16Array: An array of 16-bit signed integers
3. Int32Array: An array of 32-bit signed integers
4. Uint8Array: An array of 8-bit unsigned integers
5. Uint16Array: An array of 16-bit unsigned integers
6. Uint32Array: An array of 32-bit unsigned integers
7. Float32Array: An array of 32-bit floating point numbers
8. Float64Array: An array of 64-bit floating point numbers
For example, you can create an array of 8-bit signed integers as below
```javascript
const a = new Int8Array();
// You can pre-allocate n bytes
const bytes = 1024
const a = new Int8Array(bytes)
```
320. ### What are the advantages of module loaders?
The module loaders provides the below features,
1. Dynamic loading
2. State isolation
3. Global namespace isolation
4. Compilation hooks
4. Nested virtualization
321. ### What is collation?
Collation is used for sorting a set of strings and searching within a set of strings. It is parameterized by locale and aware of Unicode. Let's take comparision and sorting features,
1. **Comparison:**
```javascript
var list = [ "ä", "a", "z" ]; // In German, "ä" sorts with "a" Whereas in Swedish, "ä" sorts after "z"
var l10nDE = new Intl.Collator("de");
var l10nSV = new Intl.Collator("sv");
console.log(l10nDE.compare("ä", "z") === -1); // true
console.log(l10nSV.compare("ä", "z") === +1); // true
```
2. **Sorting:**
```javascript
var list = [ "ä", "a", "z" ]; // In German, "ä" sorts with "a" Whereas in Swedish, "ä" sorts after "z"
var l10nDE = new Intl.Collator("de");
var l10nSV = new Intl.Collator("sv");
console.log(list.sort(l10nDE.compare)) // [ "a", "ä", "z" ]
console.log(list.sort(l10nSV.compare)) // [ "a", "z", "ä" ]
```
322. ### What is for...of statement?
The for...of statement creates a loop iterating over iterable objects or elements such as built-in String, Array, Array-like objects (like arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. The basic usage of for...of statement on arrays would be as below,
```javascript
let arrayIterable = [10, 20, 30, 40, 50];
for (let value of arrayIterable) {
value ++;
console.log(value); // 11 21 31 41 51
}
```
323. ### What is the output of below spread operator array?
```javascript
[...'John Resig']
```
The output of the array is ['J', 'o', 'h', 'n', '', 'R', 'e', 's', 'i', 'g']
**Explanation:** The string is an iterable type and the spread operator with in an array maps every character of an iterable to one element. Hence, each character of a string becomes an element within an Array.
324. ### Is PostMessage secure?
Yes, postMessages can be considered very secure as long as the programmer/developer is careful about checking the origin and source of an arriving message. But if you try to send/receive a message without verifying its source will create cross-site scripting attacks.
325. ### What are the problems with postmessage target origin as wildcard?
The second argument of postMessage method specifies which origin is allowed to receive the message. If you use the wildcard “*” as an argument then any origin is allowed to receive the message. In this case, there is no way for the sender window to know if the target window is at the target origin when sending the message. If the target window has been navigated to another origin, the other origin would receive the data. Hence, this may lead to XSS vulnerabilities.
```javascript
targetWindow.postMessage(message, '*');
```
Comments
Post a Comment
please do not enter any spam link in the comment box