HTML full course beginner to advanced part-4

All JavaScript Important Question to help you crack any interview in first attempt. Scroll below to see Question

Join us on Telegram

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.

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.