Java Script Basic Guide

 Why is JavaScript Object Oriented?

Because everything in JavaScript is an object.

JavaScript is not a class-based object-oriented language. But it still has ways of using object-oriented programming (OOP).

JavaScript isn't a classed-based language – it's is a prototype-based language.

How can we achieve Inheritance previously when there is no extends keyword?

The "prototype" property is widely used by the core of JavaScript itself. All built-in constructor functions use it

How many ways constructors are called in a class?

The constructor () method is called automatically when a class is initiated, and it has to have the exact name "constructor",

 in fact, if you do not have a constructor method, JavaScript will add an invisible and empty constructor method. 

Note: A class cannot have more than one constructor () method.

How many ways an object is created in JavaScript?

In JavaScript, there are four methods to use to create an object.

Object Literals.

New operator or constructor.

Object. Create method.

Class.

How to declare constants in JavaScript?

Using the const Keyword.

how to delete a key(property) from Object?

Using the delete keyword we can delete a key(property) from an object.

What is the return type of delete keyword?

boolean

How can we create an empty Array?

var a=[];

Difference between Let and Var?

Scoping rules

Main difference is scoping rules. Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the

immediate enclosing block denoted by { } (hence the block scope).

function run() {

  var foo = "Foo";

  let bar = "Bar";

  console.log(foo, bar);

  {

    let baz = "Bazz";

    console.log(baz);

  }

  console.log(baz); // ReferenceError

}

run();

The reason why the let keyword was introduced to the language was because function scope is confusing and was one of the main sources of bugs in JavaScript.

Take a look at this example from another stackoverflow question:

var funcs = [];

// let's create 3 functions

for (var i = 0; i < 3; i++) {

  // and store them in funcs

  funcs[i] = function() {

    // each should log its value.

    console.log("My value: " + i);

  };

}

for (var j = 0; j < 3; j++) {

  // and now let's run each one to see

  funcs[j]();

}

My value: 3 was output to console each time funcs[j](); was invoked since anonymous functions were bound to the same variable.

People had to create immediately invoked functions to capture correct value from the loops but that was also hairy.

What is Hoisting in JavaScript :

While variables declared with var keyword are "hoisted" to the top of the block which means they are accessible in their enclosing scope even before they are declared:

function run() {

  console.log(foo); // undefined

  var foo = "Foo";

  console.log(foo); // Foo

}

run();

let variables are not initialized until their definition is evaluated. Accessing them before the initialization results in a ReferenceError. Variable said to be in "temporal dead zone" from the start of the block until the initialization is processed.

function checkHoisting() {

  console.log(foo); // ReferenceError

  let foo = "Foo";

  console.log(foo); // Foo

}

checkHoisting();

Creating global object property

At the top level, let, unlike var, does not create a property on the global object:

var foo = "Foo";  // globally scoped

let bar = "Bar"; // globally scoped

console.log(window.foo); // Foo

console.log(window.bar); // undefined

Redeclaration

In strict mode, var will let you re-declare the same variable in the same scope while let raises a SyntaxError.

'use strict';

var foo = "foo1";

var foo = "foo2"; // No problem, 'foo' is replaced.

let bar = "bar1";

let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

Difference Between var and let.

1. The var keyword was introduced with JavaScript. The let keyword was added in ES6 (ES 2015) version of JavaScript.

2. Var has global scope. let is limited to block scope.

3. Var can be declared globally and can be accessed globally. let can be declared globally but cannot be accessed globally.

4. Variables declared with var keyword can be re-declared and updated in the same scope.

Example:

function varGreeter(){

  var a = 10;        

  var a = 20; //a is replaced

  console.log(a);

}

varGreeter();

Variable declared with let keyword can be updated but not re-declared.

Example:

function varGreeter(){

  let a = 10;        

 let a = 20; //SyntaxError: 

 //Identifier 'a' has already been declared

  console.log(a);

}

varGreeter();

5.It is hoisted.

Example:

{

  console.log(c); // undefined. 

  //Due to hoisting

  var c = 2;

}

It is not hoisted.

Example:

{

  console.log(b); // ReferenceError: 

  //b is not defined

  let b = 3;

}

What is the Timer method in JavaScript?

A timer is a function that enables us to execute a function at a particular time.

Using timers you can delay the execution of code so that it does not get done at the exact moment an event is triggered or the page is loaded.

For example, you can use timers to change the advertisement banners on your website at regular intervals, or display a real-time clock, etc.

There are two timer functions in JavaScript: setTimeout() and setInterval().

What is De-Structuring in JavaScript?

Destructuring assignment is a cool feature that came along with ES6.

Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables.

Difference between  Array function and normal Function?

An arrow function expression is a syntactically compact alternative to a regular function expression, 

although without its own bindings to this, arguments, super, or new.target keywords. 

Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

What is anonymous function in javascript ?

An anonymous function is a function that was declared without any named identifier to refer to it.

As such, an anonymous function is usually not accessible after its initial creation.

Normal function definition:

function hello() {

  alert('Hello world');

}

hello();

Anonymous function definition:

var anon = function() {

  alert('I am anonymous');

}

anon();

Are there any Interfaces in JavaScript?

Interfaces in JavaScript. Interfaces are not a thing in JavaScript, not really anyway. ... 

JavaScript may have the class keyword, but in truth this is just an uninstantiated constructor function, and once called it is simply an object.

What are different Data Types in JavaScript?

There are six basic data types in JavaScript which can be divided into three main categories:

primitive (or primary), composite (or reference), and special data types. String, Number, and Boolean are primitive data types.

Object, Array, and Function (which are all types of objects) are composite data types. 

Whereas Undefined and Null are special data types.

What is the difference between undeclared and undefined?

undefined variables are those that are not assigned any value but declared in the program. 

if we try to read the value, an error message "undefined" is displayed. undeclared variables are those that are not declared in the program . ... 

But if undeclared variables are assigned some value then implicit declaration is done .

What are alert,prompt box and confirm?

There are three user interaction boxes available in JavaScript.

What is this keyword?

in JavaScript this keyword refers to the object it belongs to.It has different values depending on where it is used:In a method, this refers to the owner object.

Alone, this refers to the global object.In a function, this refers to the global object.

In a function, in strict mode, this is undefined.In an event, this refers to the element that received the event.

Methods like call(), and apply() can refer this to any object.

What is === operator?

it checks the type and value of a variable.

it not only checks the value but also type of two variable, if two variables are not of the same type "===" return false

eg.

0==false // true, because false is equivalent of 0

0===false // false, because both operands are of different type

2=="2" // true, auto type coercion, string converted into number

2==="2" // false, since both operands are not of same type

What is the difference between viewState and sessionState?

- A ViewState is a state of a page within a browser wherein the values of controls persist when post back operation is done.

When another page is loaded, the previous page data is no longer available.

- SessionState is the data of a user session and is maintained on the server side. This data is available until the user closes the browser or session time-outs.

What are the different loops in JavaScript?

JavaScript now supports five different types of loops:

while — loops through a block of code as long as the condition specified evaluates to true.

do…while — loops through a block of code once; then the condition is evaluated. If the condition is true, the statement is repeated as long as the specified condition is true.

for — loops through a block of code until the counter reaches a specified number.

for…in — loops through the properties of an object.

for…of — loops over iterable objects such as arrays, strings, etc.

What is an escape character?

An escape character enables you to output characters you wouldn't normally be able to, 

usually because the browser will interpret it differently to what you intended. 

In JavaScript, the backslash ( \ ) is an escape character

Name some Array method in JavaScript?

Method Description

concat() Joins two or more arrays, and returns a copy of the joined arrays

copyWithin() Copies array elements within the array, to and from specified positions

entries() Returns a key/value pair Array Iteration Object

every() Checks if every element in an array pass a test

fill() Fill the elements in an array with a static value

filter() Creates a new array with every element in an array that pass a test

find() Returns the value of the first element in an array that pass a test

findIndex() Returns the index of the first element in an array that pass a test

forEach() Calls a function for each array element

from() Creates an array from an object

includes() Check if an array contains the specified element

indexOf() Search the array for an element and returns its position

isArray() Checks whether an object is an array

join() Joins all elements of an array into a string

keys() Returns a Array Iteration Object, containing the keys of the original array

lastIndexOf() Search the array for an element, starting at the end, and returns its position

map() Creates a new array with the result of calling a function for each array element

pop() Removes the last element of an array, and returns that element

push() Adds new elements to the end of an array, and returns the new length

reduce() Reduce the values of an array to a single value (going left-to-right)

reduceRight() Reduce the values of an array to a single value (going right-to-left)

reverse() Reverses the order of the elements in an array

shift() Removes the first element of an array, and returns that element

slice() Selects a part of an array, and returns the new array

some() Checks if any of the elements in an array pass a test

sort() Sorts the elements of an array

splice() Adds/Removes elements from an array

toString() Converts an array to a string, and returns the result

unshift() Adds new elements to the beginning of an array, and returns the new length

valueOf() Returns the primitive value of an array

Difference between Document.ready and Window.onload?

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

 The onload event is a standard event in the DOM, while the ready event is specific to jQuery.

What is the difference between call and apply method?

The only difference is call() method takes the arguments separated by comma while apply() method takes the array of arguments.

What is  event bubbling in JavaScript?

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 of the target element in the same nesting hierarchy till it reaches the outermost DOM element or document object.

What is  event propagation in JavaScript?

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.

What is promises in Javascript?

Promises are used to handle asynchronous operations in JavaScript. They are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code.

What is isNaN function in JavaScript?

The isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value equates to NaN.

 Otherwise it returns false. ... The global isNaN() function, converts the tested value to a Number, then tests it.

What is "use strict" in Javascript?

The purpose of "use strict" is to indicate that the code should be executed in "strict mode". With strict mode, you can not,

 for example, use undeclared variables.

How to  declare global  variables in Javascript?

A variable declared outside a function, becomes GLOBAL.

A global variable has global scope: All scripts and functions on a web page can access it. 

What is the split in JavaScript?

You can split up strings of text with the Javascript split method. In between the round brackets of split you type an optional delimiter.

 The delimiter is how the various parts of the string are separated. This might be with a comma, a semicolon, a space, etc.

What is the join method in JavaScript?

join() method is an inbuilt function in JavaScript which is used to join the elements of an array into a string.

Note: this method will not change the original array.

What is the difference between span and div keyword?

The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) 

element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code

Where span is inline element or not?

Yes.

Is there any impact if we place header first then footer or vice versa?

No.

What is call, apply or bind do in javascript?

You can use call() / apply() to invoke the function immediately. bind() returns a bound function that, when executed later, will have the correct context ("this") for calling the original function. 

So bind() can be used when the function needs to be called later in certain events when it's useful.

How to create objects and arrays in javascript?

Creating an Array. Using an array literal is the easiest way to create a JavaScript Array. 

Syntax: ... The typeof operator in JavaScript returns "object" for arrays.

How to iterate an array in javascript?

Check new features in HTML5 and CSS3?

What are prototypes in JavaScript?

When a function is created in JavaScript, the JavaScript engine adds a prototype property to the function. This prototype property is an object (called as prototype object) which has a constructor property by default. 

The constructor property points back to the function on which prototype object is a property

What is Async,Await,Callback and Promises in JavaScript?

Synchronous operations in JavaScript entails having each step of an operation waits for the previous step to execute completely. ... 

These concepts include: Callback functions, Promises and the use of Async and Await to handle deferred operations in JavaScript.

What are Datatypes in JavaScript?

What is super keyword?

The super keyword refers to the parent class. It is used to call the constructor of the parent class and to access the parent's properties and methods.

Form submission in JavaScript?

Null keyword in javascript?

‘Null’ is a keyword in JavaScript that signifies ‘no value’ or nonexistence of any value.

If you wish to shred a variable off its assigned value, you can simply assign ‘null’ to it.

Besides this, like any other object, it is never implicitly assigned to a variable by JavaScript

Check in depth for primitive and reference type datatypes in JavaScript?

How to check what is the datatype ?

using typeof?

What is Closure in JavaScript?

Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.

You have learned that we can create nested functions in JavaScript. ... This is called Closure. A function can return another function in JavaScript.

Difference between semantic and non-semantics?

Semantic Elements:

A semantic element clearly describes its meaning to both the browser and the developer. These elements clearly defines its content.

In other terms semantic tags are those tags whose name can easily let you know which type of content take place in it. eg. <header>, <article> and <footer>.

Non-Semantic Elements:

Non-semantic element is the element which Tells nothing about its content. In other terms element whose name doesn’t suggest you what they do. e.g. <div> and <span>.

Point out some important css3 features?

CSS3 version introduced new features that allowed developers to style HTML elements with less CSS code. 

CSS3 is most notorious for modules that speed up the specification process.

User Interface

Box Model

Selectors

Backgrounds

Borders

Media Queries

Transforms

Text Effects

Multiple Column Layout

Animations

Forms validation?

HTML5 APIs and pre processors from css and the topics shared over mail?

HTML : local storage, apis, fieldset, meaning of different tags, semantic understanding?