JS interview questions

Question 1

What is JavaScript(JS)?

Answer 1

• lightweight
• interpreted programming language
• object-oriented capabilities
• allows you to build interactivity into otherwise static HTML pages.

Question 2

What are the features of JavaScript?

Answer 2

• JavaScript is a lightweight, interpreted programming language.
• JavaScript is designed for creating network-centric applications.
• JavaScript is complementary to and integrated with Java.
• JavaScript is complementary to and integrated with HTML.
• JavaScript is open and cross-platform.

Question 3

What are the advantages of JavaScript?

Answer 3

• Less server interaction? You can validate user input before sending the page off to the server.
• Immediate feedback to the visitors? They don’t have to wait for a page reload to see if they have forgotten to enter something.
• Increased interactivity? You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard

Question 4

Why is javascript called Richer Interface?

Answer 4

You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

Question 5

Is javascript case-sensitive?

Answer 5

Yes, JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.

Question 6

How can we create an object in JS?

Answer 6

var object = 
        { 
         name: "obj",
         age: 10
         };

Question 7

How can we read the properties of an object in js?

Answer 7

Can write and read properties of an object using the dot(.) notation or array type notation

Question 8

Can you define arrays using the array literal as follows?
var x = [];
var y = [1, 2, 3, 4, 5];

Answer 8

yes

Question 9

An array has a length property that is useful for iteration. Can we read elements of an array as follows?
for (var i = 0; i < x.length; i++)

Answer 9

no. the code is incomplete. 
for (var i = 0; i < x.length; i++) {
    var ele = x[i];
}
now we can read elements of an array x

Question 10

How many types of functions does JS support?

Answer 10

A function in JavaScript can be either named or anonymous.

Question 11

How to define an anonymous function?

Answer 11

An anonymous function can be defined in a similar way as a normal function but it would not have any name.

Question 12

give an example of a built-in method that calls a function for each element in the array?

Answer 12

forEach, map … methods calls a function for each element in the array.

Question 13

Which type of variable among global and local, takes precedence over others if names are same?

Answer 13

A local variable takes precedence over a global variable with the same name.

Question 14

Difference between “var” and “let” Keywords?

Answer 14

Var was there from the beginning but the let was introduced in ES2015/ES6.
Let has block scope and “Var” has function scope

Question 15

Difference between “==” and “===” ?

Answer 15

” ==” only compares values “===” compare values and type both.

Question 16

Difference between “undefine” and “NULL” Keywords?

Answer 16

null value means does not exist. not defined is when something such as a variable is not defined in the system but is being accessed

Question 17

What is prototypal Inheritance?

Answer 17

Prototypal inheritance is a language feature that helps in inheriting methods directly from parent objects

For instance, we have a user object with its properties and methods, and want to make admin and guest as slightly modified variants of it. We’d like to reuse what we have in user, not copy/reimplement its methods, just build a new object on top of it.

Question 18

Which built-in method sorts the elements of an array?

Answer 18

Sort method sorts the elements of an array.

Question 19

Which built-in method reverses the order of the elements of an array?

Answer 19

Reverse method reverses the order of the elements of an array ?? the first becomes the last, and the last becomes the first.

Question 20

What is SetTimeout()?

Answer 20

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

Question 21

How to add one new element at end of an array in javascript?

Answer 21

Push method adds one or more elements to the end of an array and returns the new length of the array.

Question 22

What is closure and how do you use it?

Answer 22

When a function returns the other function the returning function will hold its environment and this is known as closure.

Question 23

How can you move element in lowercase to uppercase from an array?

Answer 23

toUpperCase method returns the calling string value converted to upper case.

Question 24

What will be the output of variable x,y,z?
var x=10;
var y=x++;
var z=++x;
console.log(x,y,z)

Answer 24

12,10,12

Question 25

What will be output of 0==-0?

Answer 25

true

Question 26

function xyz () {
    var abc = "hello Js";
    function abc () {
        return 54;
    }
    return abc;
}
console.log(xyz())

Answer 26

hello Js.

Question 27

Explain callback in JavaScript?

Answer 27

A callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered.

Question 28

How would you empty the below array in JavaScript?

Var emptyArray = [‘this’, ‘array’, ‘is’, ‘full’];

Answer 28

emptyArray.length = 0;

emptyArray.splice(0, emptyArray.length);

while(emptyArray.length){
emptyArray.pop();
}

emptyArray = []

Question 29

What will be output of below code?
var lorem = { ipsum : 1};
var output = (function(){
delete lorem.ipsum;
return lorem.ipsum;
})();
console.log(output);

Answer 29

The output would be undefined because the delete operator removed the property “ipsum” from the object “lorem” before the object was returned. When you reference a deleted property, the result is undefined.

Question 30

What is output of 5 + 4 + “3”?

Answer 30

Since 3 is a string then the output of the above code will 93.

Question 31

What is the real name of Javascript?

Answer 31

The original name of Javascript is Mocha by the Marc Addressed. He was the founder of Netscape.

Question 32

Can you name two programming paradigms important for JavaScript app developers?

Answer 32

JavaScript is a multi-paradigm language, supporting imperative/procedural programming along with OOP (Object-Oriented Programming) and functional programming. JavaScript supports OOP with prototypal inheritance.
Good to hear:
Prototypal inheritance (also: prototypes, OLOO).
Functional programming (also: closures, first class functions, lambdas).
Red flags:
No clue what a paradigm is, no mention of prototypal oo or functional programming.

Question 33

What is functional programming?

Answer 33

Functional programming produces programs by composing mathematical functions and avoids shared state & mutable data. Lisp (specified in 1958) was among the first languages to support functional programming, and was heavily inspired by lambda calculus. Lisp and many Lisp family languages are still in common use today.
Functional programming is an essential concept in JavaScript (one of the two pillars of JavaScript). Several common functional utilities were added to JavaScript in ES5.
Good to hear:
Pure functions / function purity.
Avoid side-effects.
Simple function composition.
Examples of functional languages: Lisp, ML, Haskell, Erlang, Clojure, Elm, F Sharp, OCaml, etc…
Mention of features that support FP: first-class functions, higher order functions, functions as arguments/values.
Red flags:
No mention of pure functions / avoiding side-effects.
Unable to provide examples of functional programming languages.
Unable to identify the features of JavaScript that enable FP.

Question 34

What is the difference between classical inheritance and prototypal inheritance?

Answer 34

Class Inheritance: instances inherit from classes (like a blueprint — a description of the class), and create sub-class relationships: hierarchical class taxonomies. Instances are typically instantiated via constructor functions with the new keyword. Class inheritance may or may not use the class keyword from ES6.
Prototypal Inheritance: instances inherit directly from other objects. Instances are typically instantiated via factory functions or Object.create(). Instances may be composed from many different objects, allowing for easy selective inheritance.
In JavaScript, prototypal inheritance is simpler &
more flexible than class inheritance.
Good to hear:
Classes: create tight coupling or hierarchies/taxonomies.
Prototypes: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition.
Red Flags:
No preference for prototypal inheritance & composition over class inheritance.

Question 35

What are the pros and cons of functional programming vs object-oriented programming?

Answer 35

OOP Pros: It’s easy to understand the basic concept of objects and easy to interpret the meaning of method calls. OOP tends to use an imperative style rather than a declarative style, which reads like a straight-forward set of instructions for the computer to follow.
OOP Cons: OOP Typically depends on shared state. Objects and behaviors are typically tacked together on the same entity, which may be accessed at random by any number of functions with non-deterministic order, which may lead to undesirable behavior such as race conditions.
FP Pros: Using the functional paradigm, programmers avoid any shared state or side-effects, which eliminates bugs caused by multiple functions competing for the same resources. With features such as the availability of point-free style (aka tacit programming), functions tend to be radically simplified and easily recomposed for more generally reusable code compared to OOP.
FP also tends to favor declarative and denotational styles, which do not spell out step-by-step instructions for operations, but instead concentrate on what to do, letting the underlying functions take care of the how. This leaves tremendous latitude for refactoring and performance optimization, even allowing you to replace entire algorithms with more efficient ones with very little code change. (e.g., memoize, or use lazy evaluation in place of eager evaluation.)
Computation that makes use of pure functions is also easy to scale across multiple processors, or across distributed computing clusters without fear of threading resource conflicts, race conditions, etc…
FP Cons: Over exploitation of FP features such as point-free style and large compositions can potentially reduce readability because the resulting code is often more abstractly specified, more terse, and less concrete.
More people are familiar with OO and imperative programming than functional programming, so even common idioms in functional programming can be confusing to new team members.
FP has a much steeper learning curve than OOP because the broad popularity of OOP has allowed the language and learning materials of OOP to become more conversational, whereas the language of FP tends to be much more academic and formal. FP concepts are frequently written about using idioms and notations from lambda calculus, algebras, and category theory, all of which requires a prior knowledge foundation in those domains to be understood.
Good to hear:
Mentions of trouble with shared state, different things competing for the same resources, etc…
Awareness of FP’s capability to radically simplify many applications.
Awareness of the differences in learning curves.
Articulation of side-effects and how they impact program maintainability.
Awareness that a highly functional codebase can have a steep learning curve.
Awareness that a highly OOP codebase can be extremely resistant to change and very brittle compared to an equivalent FP codebase.
Awareness that immutability gives rise to an extremely accessible and malleable program state history, allowing for the easy addition of features like infinite undo/redo, rewind/replay, time-travel debugging, and so on. Immutability can be achieved in either paradigm, but a proliferation of shared stateful objects complicates the implementation in OOP.
Red flags:
Unable to list disadvantages of one style or another — Anybody experienced with either style should have bumped up against some of the limitations.

Question 36

When is classical inheritance an appropriate choice?

Answer 36

The answer is never, or almost never. Certainly never more than one level. Multi-level class hierarchies are an anti-pattern. I’ve been issuing this challenge for years, and the only answers I’ve ever heard fall into one of several common misconceptions. More frequently, the challenge is met with silence.
Good to hear:
Rarely, almost never, or never.
A single level is sometimes OK, from a framework base-class such as React.Component.
“Favor object composition over class inheritance.”

Question 37

When is prototypal inheritance an appropriate choice?

Answer 37

There is more than one type of prototypal inheritance:
Delegation (i.e., the prototype chain).
Concatenative (i.e. mixins, Object.assign()).
Functional (Not to be confused with functional programming. A function used to create a closure for private state/encapsulation).
Each type of prototypal inheritance has its own set of use-cases, but all of them are equally useful in their ability to enable composition, which creates has-a or uses-a or can-do relationships as opposed to the is-a relationship created with class inheritance.
Good to hear:
In situations where modules or functional programming don’t provide an obvious solution.
When you need to compose objects from multiple sources.
Any time you need inheritance.
Red flags:
No knowledge of when to use prototypes.
No awareness of mixins or Object.assign().

Question 38

What does “favor object composition over class inheritance” mean?

Answer 38

This is a quote from “Design Patterns: Elements of Reusable Object-Oriented Software”. It means that code reuse should be achieved by assembling smaller units of functionality into new objects instead of inheriting from classes and creating object taxonomies.
In other words, use can-do, has-a, or uses-a relationships instead of is-a relationships.
Good to hear:
Avoid class hierarchies.
Avoid brittle base class problem.
Avoid tight coupling.
Avoid rigid taxonomy (forced is-a relationships that are eventually wrong for new use cases).
Avoid the gorilla banana problem (“what you wanted was a banana, what you got was a gorilla holding the banana, and the entire jungle”).
Make code more flexible.
Red Flags:
Fail to mention any of the problems above.
Fail to articulate the difference between composition and class inheritance, or the advantages of composition.

Question 39

What are two-way data binding and one-way data flow, and how are they different?

Answer 39

Two way data binding means that UI fields are bound to model data dynamically such that when a UI field changes, the model data changes with it and vice-versa.
One way data flow means that the model is the single source of truth. Changes in the UI trigger messages that signal user intent to the model (or “store” in React). Only the model has the access to change the app’s state. The effect is that data always flows in a single direction, which makes it easier to understand.
One way data flows are deterministic, whereas two-way binding can cause side-effects which are harder to follow and understand.
Good to hear:
React is the new canonical example of one-way data flow, so mentions of React are a good signal. Cycle.js is another popular implementation of uni-directional data flow.
Angular is a popular framework which uses two-way binding.
Red flags:
No understanding of what either one means. Unable to articulate the difference.

Question 40

What are the pros and cons of monolithic vs microservice architectures?

Answer 40

A monolithic architecture means that your app is written as one cohesive unit of code whose components are designed to work together, sharing the same memory space and resources.
A microservice architecture means that your app is made up of lots of smaller, independent applications capable of running in their own memory space and scaling independently from each other across potentially many separate machines.
Monolithic Pros: The major advantage of the monolithic architecture is that most apps typically have a large number of cross-cutting concerns, such as logging, rate limiting, and security features such audit trails and DOS protection.
When everything is running through the same app, it’s easy to hook up components to those cross-cutting concerns.
There can also be performance advantages, since shared-memory access is faster than inter-process communication (IPC).
Monolithic cons: Monolithic app services tend to get tightly coupled and entangled as the application evolves, making it difficult to isolate services for purposes such as independent scaling or code maintainability.
Monolithic architectures are also much harder to understand, because there may be dependencies, side-effects, and magic which are not obvious when you’re looking at a particular service or controller.
Microservice pros: Microservice architectures are typically better organized, since each microservice has a very specific job, and is not concerned with the jobs of other components. Decoupled services are also easier to recompose and reconfigure to serve the purposes of different apps (for example, serving both the web clients and public API).
They can also have performance advantages depending on how they’re organized because it’s possible to isolate hot services and scale them independent of the rest of the app.
Microservice cons: As you’re building a new microservice architecture, you’re likely to discover lots of cross-cutting concerns that you did not anticipate at design time. A monolithic app could establish shared magic helpers or middleware to handle such cross-cutting concerns without much effort.
In a microservice architecture, you’ll either need to incur the overhead of separate modules for each cross-cutting concern, or encapsulate cross-cutting concerns in another service layer that all traffic gets routed through.
Eventually, even monolthic architectures tend to route traffic through an outer service layer for cross-cutting concerns, but with a monolithic architecture, it’s possible to delay the cost of that work until the project is much more mature.
Microservices are frequently deployed on their own virtual machines or containers, causing a proliferation of VM wrangling work. These tasks are frequently automated with container fleet management tools.
Good to hear:
Positive attitudes toward microservices, despite the higher initial cost vs monolthic apps. Aware that microservices tend to perform and scale better in the long run.
Practical about microservices vs monolithic apps. Structure the app so that services are independent from each other at the code level, but easy to bundle together as a monolithic app in the beginning. Microservice overhead costs can be delayed until it becomes more practical to pay the price.
Red flags:
Unaware of the differences between monolithic and microservice architectures.
Unaware or impractical about the additional overhead of microservices.
Unaware of the additional performance overhead caused by IPC and network communication for microservices.
Too negative about the drawbacks of microservices. Unable to articulate ways in which to decouple monolithic apps such that they’re easy to split into microservices when the time comes.
Underestimates the advantage of independently scalable microservices.

Question 41

What is asynchronous programming, and why is it important in JavaScript?

Answer 41

Synchronous programming means that, barring conditionals and function calls, code is executed sequentially from top-to-bottom, blocking on long-running tasks such as network requests and disk I/O.
Asynchronous programming means that the engine runs in an event loop. When a blocking operation is needed, the request is started, and the code keeps running without blocking for the result. When the response is ready, an interrupt is fired, which causes an event handler to be run, where the control flow continues. In this way, a single program thread can handle many concurrent operations.
User interfaces are asynchronous by nature, and spend most of their time waiting for user input to interrupt the event loop and trigger event handlers.
Node is asynchronous by default, meaning that the server works in much the same way, waiting in a loop for a network request, and accepting more incoming requests while the first one is being handled.
This is important in JavaScript, because it is a very natural fit for user interface code, and very beneficial to performance on the server.
Good to hear:
An understanding of what blocking means, and the performance implications.
An understanding of event handling, and why its important for UI code.
Red flags:
Unfamiliar with the terms asynchronous or synchronous.
Unable to articulate performance implications or the relationship between asynchronous code and UI code.