All JavaScript Important
Question to help you crack any interview in first attempt. Scroll below to see
Question
What is JavaScript :
JavaScript is a scripting or programming language that
allows you to implement complex features on web pages. Every time a web page
does more than just sit there and display static information for you to look
at, JavaScript is involved - such as displaying timely content updates,
interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. -
making it one of the most important web technologies.
What it used for?
JavaScript is
an object-oriented programming language designed to make web development more
efficient and user-friendly. Its primary use is on web pages, where it is
often used to create responsive, interactive elements that make the user
experience more enjoyable. Such things as menus, animations, video players,
interactive maps, and even easy in-browser games can be created quickly and
easily with JavaScript. JavaScript is one of the most popular programming
languages in the world.
Hello World In JavaScript :
Alert ("Hello World") — Output data in an alert box
in the browser window
confirm ("Hello World") — Opens up a yes/no dialog
and returns true/false depending on user cli
console.log("Hello World") — Writes
information to the browser console, good for debugging pur document. Write ("Hello World") — Write directly to the HTML
document prompt ("Remember the like!") — Creates a dialogue for user
input
What Things Should know a JavaScript
Developer :
Scope :- If you don't understand this concept
intimately, then you're not really serious about this language. This is the
number one point that I would like to stress, and I cannot do it justice any
other way.
Architecture
:- If you cannot
piece together basic planning and configuration tasks without large amounts of
software engineering tools, you are not a legitimate architect. expecting
frameworks and other tools to do all the work for you is not adequate.
DOM :- Often, developers try to avoid the
DOM by hiding behind abstractions and other cumbersome
techniques. querySelectors Are Great, but are also much slower than the standard
DOM methods. That can impact a site's performance in a big way. These methods
are powerful tools, and should not be avoided lightly. simple, so there is no
valid excuse for developers fumbling over this or hiding in fear.
Node.js :- If you are a serious developer should
have a pretty solid grasp of how to walk the file system. You should understand
how to conveniently read files as text or less conveniently read files as bit
for bit binary buffers.
Timing and
asynchronous operations :-
Events, timers, network requests are all asynchronous and separate from each
other and exist both in Node and in the browser. You have to be able to
understand how to work with callbacks or promises
Accessibility:- The interactions imposed by
JavaScript can present accessibility barriers. A serious JavaScript developer
is already familiar with WCAG 2.0 and knows how to work within its
recommendations or when to push back on violating business requirements.
Security :- You need to have at least a basic
understanding of security violations, security controls, and privacy. You don't
need to be a CISSP, but you need to be able to supply recommendations and avoid
obvious failures. If you cannot get this right in the most basic sense you
aren't a serious developer.
Data
structures:- You need
to understand how to organize data in a way that allows the fastest possible
execution without compromising maintenance. This is something that is learned
through academic study and repeated experience writing applications.
Questions:
1. What
are the possible ways to create objects in JavaScript
i. Object constructor:
The simplest
way to create an empty object is using the Object constructor. Currently this
approach is not recommended.
var object = new
Object();
ii. Object's create method:
The create method of Object creates a new
object by passing the prototype object as a parameter
var object = Object.create(null)
iii.
Object literal syntax:
The object literal syntax is equivalent to
create method when it passes null as parameter
var object
= {};
iv. Function constructor:
Create any
function and apply the new operator to create object instances
function Person(name){
var object
= {};
object.name=name;
object.age=21;
return
object;
}
var
object = new
Person("Sudheer");
v.
Function constructor with prototype:
This is
similar to function constructor but it uses prototype for their properties and
methods,
function Person(){}
Person.prototype.name
= "Sudheer";
var object = new
Person();
This is
equivalent to an instance created with an object create method with a function
prototype and then call that function with an instance and parameters as
arguments.
function func {};
new
func(x, y, z);
vi. ES6
Class syntax:
ES6 introduces class feature to create the
objects
class
Person {
constructor(name) {
this.name = name;
}
}
var object = new
Person("Ram");
vii.
Singleton pattern:
A Singleton
is an object which can only be instantiated one time. Repeated calls to its
constructor return the same instance and this way one can ensure that they
don't accidentally create multiple instances.
var object
= new function( ){
this.name
= "Ram";
}
2. What is a prototype chain
Object
fabricating is utilized to create new kinds of objects dependent on existing
ones. It takes after legacy in a class based language. The prototype on an
object instance can be gotten to through Object.getPrototypeOf(object) or
proto, property with the prototype on constructor work accessible through
Object.prototype.
.png)
3. What is the purpose of the array slice
method
The slice()
method returns the selected elements in an array as a new array object. It
selects the elements starting at the given start argument, and ends at the
given optional end argument without including the last element. If you omit the
second argument then it selects till the end.
Some of the
examples of this method are,
let arrayIntegers = [1, 2, 3, 4, 5];
let
arrayIntegers1 =
arrayIntegers.slice(0,2); // returns [1,2]
let arrayIntegers2
= arrayIntegers.slice(2,3); // returns [3]
let
arrayIntegers3 = arrayIntegers.slice(4); //returns [5]
4. What is the purpose of the array splice
method
The splice()
method is used either adds/removes items to/from an array, and then returns the
removed item. The first argument specifies the array position for insertion or
deletion whereas the option second argument indicates the number of elements to
be deleted. Each additional argument is added to the array.
Some of the
examples of this method are,
let arrayIntegersOriginal1 = [1, 2, 3, 4,
5];
let
arrayIntegersOriginal2 =
[1, 2, 3, 4, 5];
let arrayIntegersOriginal3 = [1, 2, 3, 4,
5];
let arrayIntegers1 =
arrayIntegersOriginal1.splice(0,2); // returns [1, 2]; original array
let arrayIntegers2 =
arrayIntegersOriginal2.splice(3); // returns [4, 5]; original array:
let
arrayIntegers3 =
arrayIntegersOriginal3.splice(3, 1, "a", "b",
"c"); //returns [4];
5. What is the difference between slice and
splice
Slice |
Splice |
Doesn't modify the original
array(immutable) |
Modifies the original array(mutable) |
Returns the subset of original array |
Returns the deleted elements as
array |
Used to pick the elements from array |
Used to insert or delete elements
to/from array |
6. What is JSON and its common operations
JSON is a
text-based data format following JavaScript object syntax, which was
popularized by Douglas Crockford . It is useful when you want to transmit data
across a network and it is basically just a text file with an extension of
.json, and a MIME type of application/json
Parsing: Converting a string to a native
object
JSON.parse(text)
Stringification: converting a native object to a
string so it can be transmitted across the network
JSON.stringify(object)
7. What are lambda or arrow functions
An arrow
function is a shorter syntax for a function expression and does not have its
own this, arguments, super, or new.target. These functions are best suited for
non-method functions, and they cannot be used as constructors.
8. What is a first class function
In
Javascript, functions are first class objects. First-class functions means when
functions in that language are treated like any other variable.
For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable. For example, in the below example, handler functions assigned to a listener
const
handler = () => console.log ('This is a click
handler function');
document.addEventListener ('click', handler);
9. What is a first order function
First-order
function is a function that doesn’t accept another function as an argument and
doesn’t return a function as its return value.
const
firstOrder = () => console.log ('I am a first
order function!');
10. What is a higher order function
Higher-order
function is a function that accepts another function as an argument or returns
a function as a return value or both.
const
firstOrderFunc = () =>
console.log ('Hello, I am a First order function');
const
higherOrder = ReturnFirstOrderFunc => ReturnFirstOrderFunc();
higherOrder(firstOrderFunc);
11. What is a unary function
Unary function (i.e. monadic) is a function
that accepts exactly one argument. It stands for a single argument accepted by
a function
Let us take
an example of unary function,
const unaryFunction = a => console.log
(a + 10); // Add 10 to the given argument and display
12. What is the currying function
Currying is
the process of taking a function with multiple arguments and turning it into a
sequence of functions each with only a single argument. Currying is named after
a mathematician Haskell Curry. By applying currying, a n-ary function turns it
into a unary function.
Let's take an example of n-ary function and
how it turns into a currying function,
const multiArgFunction = (a, b, c) => a
+ b + c;
console.log(multiArgFunction(1,2,3));//
6
const
curryUnaryFunction = a => b => c => a + b + c;
curryUnaryFunction
(1); // returns a function: b => c => 1 + b + c
curryUnaryFunction
(1) (2); // returns a function: c => 3 + c
curryUnaryFunction (1) (2) (3); // returns the
number 6
13. What is the difference between let and
var
Var |
let |
It is been available from the
beginning of JavaScript |
introduced as part of ES6 |
It has function scope |
it has block scope |
Variables will be hoisted |
Hoisted but not initialized |
Let's take an example to see the difference,
function userDetails(username)
{
if(username)
{
console.log(salary); // undefined
due to hoisting
console.log(age); //
ReferenceError: Cannot access 'age' before initialization
let age = 30;
var salary = 10000;
}
console.log(salary);
//10000 (accessible to due function scope)
console.log(age); //error: age is not
defined(due to block scope)
}
userDetails('Suresh');
14. What is the reason to choose the name let
as a keyword
let is a
mathematical statement that was adopted by early programming languages like Scheme
and Basic. It has been borrowed from dozens of other languages that use let
already as a traditional keyword as close to var as possible.
15. What is the Temporal Dead Zone
The Temporal Dead Zone is a behavior in
JavaScript that occurs when declaring a variable with the let and const
keywords, but not with var. In ECMAScript 6, accessing a let or const variable
before its declaration (within its scope) causes a ReferenceError. The time
span when
that happens,
between the creation of a variable’s binding and its declaration, is called the
temporal dead zone. Let's see this behavior with an example,
function somemethod() {
console.log(counter1); // undefined
console.log(counter2);
// ReferenceError
var
counter1 = 1;
let counter2 = 2;
}
16. What is the benefit of using modules
There are a
lot of benefits to using modules in favour of a sprawling. Some of the benefits
are,
i.
Maintainability
ii. Reusability
iii.
Namespacing
17. What is Hoisting
Hoisting
is a JavaScript mechanism where variables and function declarations are moved
to the top of their scope before code execution. Remember that JavaScript only
hoists declarations, not initialisation. Let's take a simple example of
variable hoisting,
console.log(message);
//output : undefined
var
message = 'The variable Has been hoisted';
The
above code looks like as below to the interpreter,
var
message;
console.log(message);
message
= 'The variable Has been hoisted';
18. What are modules Modules
refer
to small units of independent, reusable code and also act as the foundation of
many JavaScript design patterns. Most of the JavaScript modules export an
object literal, a function, or a constructor
19. Why do you need modules
Below
are the list of benefits using modules in javascript ecosystem
i.
Maintainability
ii.
Reusability
iii.
Namespacing
20. What is scope in
javascript
Scope is the accessibility of variables,
functions, and objects in some particular part of your code during runtime. In
other words, scope determines the visibility of variables and other resources
in areas of your code.
21. What is a service worker
A Service worker is basically a script
(JavaScript file) that runs in the background, separate from a web page and
provides features that don't need a web page or user interaction. Some of the
major features of service workers are Rich offline experiences(offline first
web application development), periodic background syncs, push notifications,
intercept and handle network requests and programmatically managing a cache of
responses.
22. How do you manipulate
DOM using a service worker
Service worker can't access the DOM directly.
But it can communicate with the pages it controls by responding to messages
sent via the postMessage interface, and those pages can manipulate the DOM.