Frontend Developer

HTML stands for Hypertext Markup Language, and it is the standard markup language for creating web pages and
web applications. HTML5 is the 5th version of HTML.

Some of the new features that were added in HTML5 that make it better than HTML are as follows :

1) Intro of audio and video : Audio and Video tags are the two major addition to HTML5. It allows developers to
embed a video or audio on their website. HTML5 video can use CSS and CSS3 to style the video tag.

2) Vector Graphics : This is a new addition to the revised version which has hugely impacted the use of Adobe Flash
in websites. It can be used to draw graphics with various shapes and colors via scripting usually JS. Vector graphics
are scalable, easy to create and edit. It also supports interactivity and animation.

3) Header and Footer : With these new tags, there is no longer a need to identify the two elements with a tag.
Footer is placed at the end of the web page while Header is placed at the start of the web page. By using 
and HTML5 elements, the browser will know what to load first and what to load later.


The header can contain-
i) One or more heading elements ( – )
ii) Logo or icon
iii) Authorship information


Footer can contain-
i) Authorship information
ii) Copyright information
iii) Contact information
iv) Back to top links

4) Figure and Figcaption : HTML5 allows to use a element to mark up a photo in a document, and a
element to define a caption for the photo. The tag defines a caption for a element.
This tag provides a container for content that is equivalent to a figure.

5) Nav tag : The tag defines a set of navigation links. It is used for the part of an internet site that links to
different pages at the website. The hyperlinks can be organized through a number of approaches. Common
examples of the nav elements are menus, tables, contents, and indexes.

1) The CSS box model is a container that contains multiple properties including borders, margin, padding, and the
content itself.

2) It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of
different elements.

3) The web browser renders every element as a rectangular box according to the CSS box model.

4) Box-Model has multiple properties in CSS. Some of them are given below:
i) content : This property is used to displays the text, images, etc, that can be sized using the width &
height property.
ii) padding : This property is used to create space around the element, inside any defined border.
iii) border : This property is used to cover the content & any padding, & also allows to set the style, color,
and width of the border.
iv) margin : This property is used to create space around the element ie., around the border area.


Content Area : This area consists of content like text, images, or other media content. It is bounded by the content
edge and its dimensions are given by content-box width and height.

Padding Area : It includes the element’s padding. This area is actually the space around the content area and within
the border-box. Its dimensions are given by the width of the padding-box and the height of the padding-box.

Border Area : It is the area between the box’s padding and margin. Its dimensions are given by the width and height
of the border.

Margin Area : This area consists of space between border and margin. The dimensions of the Margin area are the
margin-box width and the margin-box height. It is useful to separate the element from its neighbors.

Hoisting is a default behaviour of javascript where all the variable and function declarations are moved on top.
This means that irrespective of where the variables and functions are declared, they are moved on top of the scope. The scope can be both local and global.

EXAMPLE 1 : 

hoistedVariable = 10;
console.log(hoistedVariable); // outputs 10 even when the variable is declared after it is initialized 
var hoistedVariable;


EXAMPLE 2 : 

hoistedFunction(); // Outputs " Hello world! " even when the function is declared after calling

function hoistedFunction(){ 
console.log(" Hello world! ");
}


EXAMPLE 3 : 

// Hoisting takes place in the local scope as well
function doSomething(){
x = 33;
console.log(x);
var x;
}

A closure is the combination of a function and the lexical environment within which that function was declared. i.e, It is an inner function that has access to the outer or enclosing function’s variables. The closure has three scope chains

i) Own scope where variables defined between its curly brackets
ii) Outer function’s variables
iii) Global variables

Let's take an example of closure concept, 

function Welcome(name){
var greetingInfo = function(message){
console.log(message+' '+name);
}
return greetingInfo;
}
var myFunction = Welcome('John');
myFunction('Welcome '); //Output: Welcome John
myFunction('Hello Mr.'); //output: Hello Mr.John


As per the above code, the inner function(i.e, greetingInfo) has access to the variables in the outer function scope(i.e, Welcome) even after the outer function has returned.

1) The main difference between let and var is that scope of a variable defined with let is limited to the block in which it is declared while variable declared with var has the global scope. So we can say that var is rather a keyword which defines a variable globally regardless of block scope.

2) The scope of let not only limited to the block in which it is defined but variable with let also do not get added with global window object even if it get declared outside of any block. But we can access variable with var from window object if it is defined globally.

3) Due to limited scope let variables are usually used when there is limited use of those variables such as in for loops, while loops or inside the scope of if conditions etc while var variable is used when value of variable need to be less change and used to accessed globally.

4) Also, one difference between var and let is variable with var can be redeclared to some other value while variable could not be redeclared if it is defined with let.

1) Nearly all objects in JavaScript are instances of Object.

2) That means all the objects in JavaScript inherit the properties and methods from Object.prototype. This is called
Prototype chaining.

3) This is a very powerful and potentially dangerous mechanism to override or extend object behavior.

4) Objects created using the new keyword inherit from a prototype called Object.prototype.

For example: If a date object [new Date()] is created with the new keyword, then it inherits the
Date.prototype.
We have Date, Array, Function, RegExp in the list for the same. All these objects inherit from the Object.prototype.

5) We should never alter or change the predefined methods or properties of a prototype, It may cause inappropriate
failure, which may be difficult to debug.

6) To check whether the object has a property or not, we use "hasOwnProperty()" method. For example if we have
the age property in any object, we can check it with the help of the hasOwnProperty() method.


Let’s take a look at a quick example of prototype chaining.

In this example, we will create a class and add a prototype object in the same. After instantiation of the object, we will
be able to use the prototype of the class. This is simply object prototype chaining.

> function Person(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}

//Person class created

Person.prototype.getFullName = function(){
return this.firstName + ” ” + this.lastName;
}

// we have added getFullName method in Person’s prototype.
> var person = new Person(“ross”, “gellar”, 25);

// It will create an instance of the Person class
> person.hasOwnProperty(“firstName”); // true
> person.hasOwnProperty(“getFullName”); // false

> person.getFullName(); // ross gellar

In the above code, we used hasOwnProperty() method to check whether we have getFullName method as a property
of the object. It returned false, that means there is no such property. But, when we used getFullName method, it
returned the actual full name but the property was not there.


Reason : As the getFullName() method was not there in the object but still we were able to use it. We should not
forget that we added the method in class Person’s prototype. The method went to the object through prototype
chaining. It means the class had the method in its prototype, which went to its instance (person object) through
prototype chaining.

Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

In a short note, A component(@component) is a directive-with-a-template.

Some of the major differences b/w the two are : 

Component : 
1) To register a component we use @Component meta-data annotation
2) Components are typically used to create UI widgets
3) Component is used to break up the application into smaller components
4) Only one component can be present per DOM element
5) @View decorator or templateurl/template are mandatory


Directive : 
1) To register directives we use @Directive meta-data annotation
2) Directive is used to add behavior to an existing DOM element
3) Directive is use to design re-usable components
4) Many directives can be used per DOM element
5) Directive doesn't use View

Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application. 

The description of each lifecycle method is as below,

1) ngOnChanges: When the value of a data bound property changes, then this method is called.

2) ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.

3) ngDoCheck: This is for the detection and to act on changes that Angular can't or won't detect on its own.

4) ngAfterContentInit: This is called in response after Angular projects external content into the component's view.

5) ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.

6) ngAfterViewInit: This is called in response after Angular initializes the component's views and child views.

7) ngAfterViewChecked: This is called in response after Angular checks the component's views and child views.

8) ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.

A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components. 

Let's create a repoService which can be used across components, 

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable({ // The Injectable decorator is required for dependency injection to work
// providedIn option registers the service with a specific NgModule
providedIn: 'root', // This declares the service with the root app (AppModule)
})
export class RepoService{
constructor(private http: Http){
}

fetchAll(){
return this.http.get('https://api.github.com/repositories');
}
}

Dependency injection (DI), is an important application design pattern in which a class asks for dependencies from external sources rather than creating them itself. Angular comes with its own dependency injection framework for resolving dependencies( services or objects that a class needs to perform its function).So you can have your services depend on other services throughout your application.

1) The sort() method allows us to sort elements of an array in place. Besides returning the sorted array, the sort()
method changes the positions of the elements in the original array.

2) By default, the sort() method sorts the array elements in ascending order with the smallest value first and largest
value last.

3) The sort() method casts elements to strings and compares the strings lexicographically to determine the orders.

To sort an array of integers in JS :

Code :

let numbers = [0, 1, 20, 3, 30, 2, 10];
numbers.sort((a, b) => a - b);
console.log(numbers); //[0,1,2,3,10,20,30]


The compare() function accepts two arguments a and b. The sort() method will sort elements based on the return
value of the compare() function with the following rules:

i) If compare(a,b) is less than zero, the sort() method sorts a to a lower index than b. In other words, a
will come first.

ii) If compare(a,b) is greater than zero, the sort() method sort b to a lower index than a, i.e., b will come
first.

iii) If compare(a,b) returns zero, the sort() method considers a equals b and leaves their positions
unchanged.

angular.bootstrap is a function component in the core ng module that is used for starting up the Angular application manually, which gives you more control over how you initialize your application. The syntax for angular.bootstrap is as follows:

angular.bootstrap(element, [modules], [config]);

Here , element is a DOM element (e.g. document) that is the root of the Angular application, modules (optional) is an array of modules to be loaded and config (optional) is an object used for configuration options.

Tip 1 : The cross questioning can go intense some time, think before you speak.

Tip 2 : Be open minded and answer whatever you are thinking, in these rounds I feel it is important to have opinion.

Tip 3 : Context of questions can be switched, pay attention to the details. It is okay to ask questions in these round,
like what are the projects currently the company is investing, which team you are mentoring. How all is the work
environment etc.

Tip 4 : Since everybody in the interview panel is from tech background, here too you can expect some technical
questions. No coding in most of the cases but some discussions over the design can surely happen.