JavaScript Interview Questions and Answers (294) - Page 15

How ReactJS works?

It creates a Virtual DOM(aka Fake DOM) and manipulates the changes in the Virtual DOM only for those DOM element(s) that has been changed by using the DIFF Algorithm. Modificiation inside the real DOM is very costly operation as lot of time we need to Bubble up and Tunnel Down the DOM Tree. Virtual DOM selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep the components up to date by using the DIFF algorithm and henceforth it is fast.
How State Works in ReactJS?

React maintains an initial state of the element and when some Event change it creates the final one. In the Virtual DOM, it only updates that particular DOM element that has been changed by using the DIFF Algorithm. The next time, this changed value becomes the initial one and the same rule follows. The concept is very similar to the Observable Collection often found in MVVM model of WPF.
What is the difference between slice and splice in JavaScript?

Slice
Slice is used to extract the elements of an array and returns the extracted elements in an new array.
Splice
Splice is used to add/remove the element to/from an array and returns the new array after added/removed.
What will be the output of the below JS code segment x = { "a" : 1 }; y = "a"; x[y]++; alert(x.a);

NOTE: This is objective type question, Please click question title for correct answer.
How to change the HTML element in javascript syntax in <p id="demo">change text</p>?

NOTE: This is objective type question, Please click question title for correct answer.
What is Aurelia?

NOTE: This is objective type question, Please click question title for correct answer.
Identity the features of Aurelia

NOTE: This is objective type question, Please click question title for correct answer.
Explain System.import('aurelia-bootstrapper'); in Aurelia

The SystemJS module loader provided the SystemJS object. Its has a method import which tells the loader to load/import a module aurelia-bootstrapper which resides in the aurelia-core.min.js. Using this module, Aurelia load the framework, configure and run the application.
In Aurelia, what does system.js contains?

The scripts/system.js is a modern JavaScript module loader. Since Aurelia itself is written as modules, it encourages to create code in a modular fashion. To use modules in ES 2016, we need a loader for understanding modular code. That is the purpose of SystemJS. It locates modules, understands their dependencies and ensures that everything is properly loaded at runtime.
What does <body aurelia-app="src/main"> signifies?

On the body tag, there's an aurelia-app attribute targeting to src/main. This tells Aurelia's bootstrapper to load the app view-model and it's view and also the host HTML element where the application will be rendered.
Explain "Hello World " in Aurelia

Let us first create the app.js file inside the src folder and write the below

app.js

---------
export class App{
constructor() {
this.sayHello = "Hello World";

}
}

It is the model. The sayHello is the property that we will bind to the view. The Constructor method is used for initializing object created inside a class.

Now, let us create the view which is app.html file inside the src folder and write the below

app.html

--------
<template>
<div>${sayHello}</div>
</template>


The sayHello property is bound to the HTML template by using ${sayHello} syntax. It is the one way binding.

Now create the main.js file inside the src folder

main.js

---------
export function configure(aurelia) {
aurelia.use.basicConfiguration();
aurelia.start().then(() => aurelia.setRoot());
}

This tells Aurelia to configure itself by exporting a configure method using the basicConfiguration. The setRoot method is the root of the UI component tree that Aurelia needs to render.
What is the significance of index.html in Aurelia?

index.html is deafult page of the app like in most of the HTML based apps. It is a place where scripts and stylesheets are loaded.

It looks as under

<!DOCTYPE html>

<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia-app="src/main">
<script src="scripts/system.js"></script>
<script src="scripts/config-typescript.js"></script>
<script src="scripts/aurelia-core.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>


We can also configure the programming language selection.

Let's adjust our programming language. The default is pointing to TypeScript.

<script src="scripts/config-typescript.js"></script>

However, we will choose ESNext. So we need to change that to

<script src="scripts/config-esnext.js"></script>

So our index.html will now look like

<!DOCTYPE html>

<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia-app="src/main">
<script src="scripts/system.js"></script>
<script src="scripts/config-esnext.js"></script>
<script src="scripts/aurelia-core.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>

Explain the purpose of constructor() in Aurelia

Constructor method is used for initializing object created with a class. This method is called first. If we don't specify this method, the default constructor will be used.
For example

export class App{  

constructor() {
this.counter = 1;
}
}


here we are initializing teh counter property to 1 inside the constructor. Later we can use this in the view and display the value as 1 like

<template>   

<p>${counter}</p>
</template>

What will be the output of alert(20--10)?

NOTE: This is objective type question, Please click question title for correct answer.
Found this useful, bookmark this page to the blog or social networking websites. Page copy protected against web site content infringement by Copyscape

 Interview Questions and Answers Categories