JavaScript and JQuery frequently asked interview Qustions for UI/UX

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. 

What is the use of JQuery $.extend method?

Using JQuery $.extend method we can merge the contents of two or more objects into the first object. The syntax is as follow.

var obj-0 = $.extend({}, obj-1, obj-2);

Let’s we have two array’s arr-i & arr-j. During development what I need is I want to merge arr-j values to arr-i. In this case jquery extend method helps.

$.extend( arr-i, arr-j );

But this is not recursive. To merge two objects recursively we need to pass the first parameter value true to extend method. As shown in below.

$.extend( true, arr-i, arr-j );

Difference between return false and stopPropagation

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event objects.

e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both. Note that this jquery carousel slider example code behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.

Difference between JQ document.ready and onload method

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. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn’t have to wait for all content to load.

jQuery Method Chaining

Until now we have been writing jQuery statements one at a time (one after the other). However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s). To chain an action, you simply append the action to the previous action.

The following example chains together the css(), slideUp(), and slideDown() methods. The “p1” element first changes to red, then it slides up, and then it slides down.

$(“#p1”).css(“color”, “red”).slideUp(2000).slideDown(2000);

How merge 2 Array using JS?

To merge array there is a Concat method. Look at the example below.

var hege = [“Cecilie”, “Lone”];
var stale = [“Emil”, “Tobias”, “Linus”];
var children = hege.concat(stale);

How to find position of a element in an Array?

The indexOf() method returns the position of the first occurrence of a specified value in a string.

This method returns -1 if the value to search for never occurs.

Note: The indexOf() method is case sensitive.

What is the difference between Var and Let?

The let statement declares a block scope local variable, optionally initializing it to a value.

let x = 1;

if (x === 1) {
let x = 2;
console.log(x); // expected output: 2
}

console.log(x); // expected output: 1

What is the Singleton design pattern?

The Singleton design pattern is a creational pattern that states that one and only one instance of a class would persist in the memory during the application’s life cycle. In other words, this design pattern restricts instantiation of a class to just one object. As far as JavaScript is concerned, a singleton is an instance that is created just once — any repeated calls to the constructor would always fetch the same instance.

Implementing the Singleton pattern:

var singleton = {

method1: function () {

//Write your usual code here

},

method2: function () {

//Write your usual code here

}

};

Example of Polymorphism in JS

Getting back to the example of people and employees, all employees are people, but all people are not employees. Which is to say that people will be the super class, and employee the sub class. People may have ages and weights, but they do not have salaries. Employees are people so they will inherently have an age and weight, but also because they are employees they will have a salary.

function Person(age,weight) {
this.age = age;
this.weight = weight;
}

Person.prototype.getInfo = function() {
return “I am “+ this.age +” years old and weighs “+ this.weight +” kilo.”;
};

function Employee(age,weight,salary) {
this.age = age;
this.weight = weight;
this.salary = salary;
}

Employee.prototype = new Person();

Employee.prototype.getInfo = function() {
return “I am “ + this.age + “ years old and weighs “ + this.weight +” kilo and earns “ + this.salary + “ dollar.”;
};

var person = new Person(50,90);
var employee = new Employee(43,80,50000);

console.log(person.getInfo());
console.log(employee.getInfo());

jQuery has been developed with the following principles:

Separation of JavaScript and HTML, which encourages developers to completely separate JavaScript create simple captcha javascript code from HTML markup.

Brevity and clarity promotes features like chainable functions and shorthand function names.

Eliminates of cross-browser incompatibilities, so developers does not need to worry about browser compatibility while writing code using jQuery library.

Extensibility, which means new events, elements, and methods can be easily added in jQuery library and then reused as a plugin.