Front End Developers-Lab
(JS) JavaScript
Top 10 Interview Questions and Anwsers
What is object prototype?
The Object.prototype is a property of the Object constructor. It is also the end of a prototype chain.
JavaScript is a dynamic language. ... The prototype is an object that is associated with every functions and objects by default in JavaScript, where function's prototype property is accessible and modifiable and object's prototype property (aka attribute) is not visible.
Example
var Person = function(name) {
this.name = name;
this.canTalk = true;
};
Person.prototype.greet = function() {
if (this.canTalk) {
console.log('Hi, I am ' + this.name);
}
};
var Employee = function(name, title) {
Person.call(this, name);
this.title = title;
};
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.greet = function() {
if (this.canTalk) {
console.log('Hi, I am ' + this.name + ', the ' + this.title);
}
};
var Customer = function(name) {
Person.call(this, name);
};
Customer.prototype = Object.create(Person.prototype);
var Mime = function(name) {
Person.call(this, name);
this.canTalk = false;
};
//JavaScript doesn't exactly have sub-class objects, prototype is a useful workaround to make a "base class" object of certain functions that act as objects.
Example
var Person = function(name) {
this.name = name;
this.canTalk = true;
};
Person.prototype.greet = function() {
if (this.canTalk) {
console.log('Hi, I am ' + this.name);
}
};
var Employee = function(name, title) {
Person.call(this, name);
this.title = title;
};
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.greet = function() {
if (this.canTalk) {
console.log('Hi, I am ' + this.name + ', the ' + this.title);
}
};
var Customer = function(name) {
Person.call(this, name);
};
Customer.prototype = Object.create(Person.prototype);
var Mime = function(name) {
Person.call(this, name);
this.canTalk = false;
};
//JavaScript doesn't exactly have sub-class objects, prototype is a useful workaround to make a "base class" object of certain functions that act as objects.
What Is Closure In Javascript?
A closure is a JavaScript function defined inside another function. And that's why it gets a special privilege to access three types of scope which are as follows.
Internal Scope, i.e., the variables defined between its curly brackets
Outer Function Scope, i.e., the variables of the enclosing function
Global Scope, i.e., variables defined as globals
Please note that a closure can not only access the outer function variables but also see its parameters. But it can't call the object of the outer function's arguments. However, it can directly call the outer function's parameters. Here is a code example describing closure by adding a function inside another function.
function outerFunc(arg1, arg2) {
var param = "I'm closure. ";
// Inner function accessing outer function variables and parameters
function innerFunc() {
return arg1 + arg2 + " " + param;
}
return innerFunc();
}
outerFunc("arg1", "arg2");
Please note that a closure can not only access the outer function variables but also see its parameters. But it can't call the object of the outer function's arguments. However, it can directly call the outer function's parameters. Here is a code example describing closure by adding a function inside another function.
function outerFunc(arg1, arg2) {
var param = "I'm closure. ";
// Inner function accessing outer function variables and parameters
function innerFunc() {
return arg1 + arg2 + " " + param;
}
return innerFunc();
}
outerFunc("arg1", "arg2");
What is a Javascript statement?
A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do.
What Is Scope In Javascript?
The general meaning of scope is the accessibility of functions and variables in an application. Usually, we use them in two ways, i.e., Local and Global.
1- Local Scope
If we declare a function or variable inside a function, then we can access it only inside that function.
// code here can not use myLocalVar
function myFunction() {
var myLocalVar = "I'm Local";
// code here can use myLocalVar
}
2- Global Scope
Declaring a variable anywhere on the page would mean that we can access it from any of the functions on that page.
var myGlobalVar = "I'm Global";
// code here can use myGlobalVar
function myFunction() {
// code here can use myGlobalVar
}
1- Local Scope
If we declare a function or variable inside a function, then we can access it only inside that function.
// code here can not use myLocalVar
function myFunction() {
var myLocalVar = "I'm Local";
// code here can use myLocalVar
}
2- Global Scope
Declaring a variable anywhere on the page would mean that we can access it from any of the functions on that page.
var myGlobalVar = "I'm Global";
// code here can use myGlobalVar
function myFunction() {
// code here can use myGlobalVar
}
What Is The Prototype Property In Javascript?
Every JavaScript function has a prototype property (by default this property is null), that is mainly used for implementing inheritance. We add methods and properties to a function's prototype so that it becomes available to instances of that function.
Let's take an example that calculates the perimeter of a rectangle.
function Rectangle(x, y) {
this.x = x;
this.y = y;
}
Rectangle.prototype.perimeter = function() {
return 2 * (this.x + this.y);
}
var rect = new Rectangle(4, 2);
console.log(rect.perimeter()); // outputs '12'
Let's take an example that calculates the perimeter of a rectangle.
function Rectangle(x, y) {
this.x = x;
this.y = y;
}
Rectangle.prototype.perimeter = function() {
return 2 * (this.x + this.y);
}
var rect = new Rectangle(4, 2);
console.log(rect.perimeter()); // outputs '12'
What is the difference between call/apply?
Fundamental difference is that call() accepts an argument list,
while apply() accepts a single array of arguments.
The difference is that call() takes the function arguments separately, and
apply() takes the function arguments in an array.
The difference between using call and apply to invoke a function?
var func = function() { alert('hello!'); }; func.apply(); vs func.call();
Are there performance differences between the two aforementioned methods? When is it best to use call over apply and vice versa !?!
Both call() and apply() are methods we can use to assign the this pointer for the duration of a method invocation
The apply() method is identical to call(), except apply() requires an array as the second parameter.
The array represents the arguments for the target method.
For example:
The call() method calls a function with a given this value and arguments provided individually.
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
document.write(new Food('cheese', 5).name);
//console.log(new Food('cheese', 5).name);
// expected output: "cheese"
The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).
const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
document.write(max);
//console.log(max);
// expected output: 7
The difference between using call and apply to invoke a function?
var func = function() { alert('hello!'); }; func.apply(); vs func.call();
Are there performance differences between the two aforementioned methods? When is it best to use call over apply and vice versa !?!
Both call() and apply() are methods we can use to assign the this pointer for the duration of a method invocation
The apply() method is identical to call(), except apply() requires an array as the second parameter.
The array represents the arguments for the target method.
For example:
The call() method calls a function with a given this value and arguments provided individually.
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
document.write(new Food('cheese', 5).name);
//console.log(new Food('cheese', 5).name);
// expected output: "cheese"
The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).
const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
document.write(max);
//console.log(max);
// expected output: 7
What are higher order functions?
Higher order functions are functions that operate on other functions, either by taking them as arguments or by returning them. In simple words,A Higher-Order function is a function that receives a function as an argument or returns the function as output.
For example,
Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language. Array.prototype.map
The map() method creates a new array by calling the callback function provided as an argument on every element in the input array. The map()method will take every returned value from the callback function and creates a new array using those values. The callback function passed to the map() method accepts 3 arguments: element, .index, and array.
Code Example
Let's say we have an array which contains objects with name and age properties. We want to create an array that contains only the persons with full age (age greater than or equal to 18).
// Without Higher-order function
const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = [];
for(let i = 0; i < persons.length; i++) {
if(persons[i].age >= 18) {
fullAge.push(persons[i]);
}
}
console.log(fullAge);
//The End
//Without Higher-order function
const arr = [5, 7, 1, 8, 4];
let sum = 0;
for(let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
// prints 25
console.log(sum);
//The End
For example,
Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language. Array.prototype.map
The map() method creates a new array by calling the callback function provided as an argument on every element in the input array. The map()method will take every returned value from the callback function and creates a new array using those values. The callback function passed to the map() method accepts 3 arguments: element, .index, and array.
Code Example
Let's say we have an array which contains objects with name and age properties. We want to create an array that contains only the persons with full age (age greater than or equal to 18).
// Without Higher-order function
const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = [];
for(let i = 0; i < persons.length; i++) {
if(persons[i].age >= 18) {
fullAge.push(persons[i]);
}
}
console.log(fullAge);
//The End
//Without Higher-order function
const arr = [5, 7, 1, 8, 4];
let sum = 0;
for(let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
// prints 25
console.log(sum);
//The End
Is JavaScript Synchronous or Asynchronous?
JavaScript is always synchronous and single-threaded. If you're executing a JavaScript block of code on a page then no other JavaScript on that page will currently be executed.
JavaScript is only asynchronous in the sense that it can make, for example, Ajax calls.
JavaScript is only asynchronous in the sense that it can make, for example, Ajax calls.
What is the difference between var and let and cont ?
Difference between var and let in JavaScript. var and let are both used
for variable declaration in javascript but the difference between them is that
var is function scoped and let and const are block scoped.
It can be said that a variable declared with var is defined throughout the program as compared to let.
The let statement declares a block scope local variable, optionally initializing it to a value. Here is the difference. let is only visible in the for() loop and var is visible to the whole function.
Example
Redeclaration:
// Assuming strict mode, var will let you re-declare the same variable in the same scope.
'use strict';
var me = 'foo';
var me = 'bar'; // No problem, 'me' is replaced.
//On the other hand, let will not:
'use strict';
let me = 'foo';
let me = 'bar'; // SyntaxError: Identifier 'me' has already been declared
now we know that let and const are block scope,
which means any time you've got a set of curly brackets { } you have block scope
.
VAR - Can be re-assigned, re-defined and has a function-scope. When declared outside the function, it has a global scope and attaches itself to the window object.
let and const are great additions to the ES6 standards, to write more predictable code.
LET - Can be re-assigned. It's scope is within a block of code.
CONST- Can not be re-assigned or re-defined. It's scope is within a block of code.
var is function scoped and let and const are block scoped.
It can be said that a variable declared with var is defined throughout the program as compared to let.
The let statement declares a block scope local variable, optionally initializing it to a value. Here is the difference. let is only visible in the for() loop and var is visible to the whole function.
Example
Redeclaration:
// Assuming strict mode, var will let you re-declare the same variable in the same scope.
'use strict';
var me = 'foo';
var me = 'bar'; // No problem, 'me' is replaced.
//On the other hand, let will not:
'use strict';
let me = 'foo';
let me = 'bar'; // SyntaxError: Identifier 'me' has already been declared
now we know that let and const are block scope,
which means any time you've got a set of curly brackets { } you have block scope
.
VAR - Can be re-assigned, re-defined and has a function-scope. When declared outside the function, it has a global scope and attaches itself to the window object.
let and const are great additions to the ES6 standards, to write more predictable code.
LET - Can be re-assigned. It's scope is within a block of code.
CONST- Can not be re-assigned or re-defined. It's scope is within a block of code.
What is hoisting?
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.
Basically, when Javascript compiles all of your code, all variable declarations using var are hoisted/lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made. This is what we mean by "hoisting".
Functions declarations are also hoisted, but these go to the very top, so will sit above all of the variable declarations.
Basically, when Javascript compiles all of your code, all variable declarations using var are hoisted/lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made. This is what we mean by "hoisting".
Functions declarations are also hoisted, but these go to the very top, so will sit above all of the variable declarations.
Printer Friendly Version