Basic to Advance Javascript Interview Question 161-210

161. ### How do you change style of a HTML element?

You can change inline style or classname of a HTML element using javascript

1. ** Using style property:** You can modify inline style using style property

```javascript

document.getElementById("title").style.fontSize = "30px";

```

2. ** Using ClassName property:** It is easy to modify element class using className property

```javascript

document.getElementById("title").style.className = "custom-title";

```

162. ### What would be the result of 1+2+'3'?

The output is going to be `33`. Since `1` and `2` are numeric values, the result of first two digits is going to be a numeric value `3`. The next digit is a string type value because of that the addition of numeric value `3` and string type value `3` is just going to be a concatenation value `33`.

163. ### What is a debugger statement?

The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.

For example, in the below function a debugger statement has been inserted. So execution is paused at the debugger statement just like a breakpoint in the script source.

```javascript

function getProfile() {

// code goes here

debugger;

// code goes here

}

```

164. ### What is the purpose of breakpoints in debugging?

You can set breakpoints in the javascript code once the debugger statement is executed and debugger window pops up. At each breakpoint, javascript will stop executing, and let you examine the JavaScript values. After examining values, you can resume the execution of code using play button.

165. ### Can I use reserved words as identifiers?

No, you cannot use the reserved words as variables, labels, object or function names. Let's see one simple example,

```javascript

var else = "hello"; // Uncaught SyntaxError: Unexpected token else

```

166. ### How do you detect a mobile browser?

You can use regex which returns a true or false value depending on whether or not the user is browsing with a mobile.

```javascript

window.mobilecheck = function() {

var mobileCheck = false;

return mobileCheck;

};

```

167. ### How do you detect a mobile browser without regexp?

You can detect mobile browser by simply running through a list of devices and checking if the useragent matches anything. This is an alternative solution for RegExp usage,

```javascript

function detectmob() {

if( navigator.userAgent.match(/Android/i)

|| navigator.userAgent.match(/webOS/i)

|| navigator.userAgent.match(/iPhone/i)

|| navigator.userAgent.match(/iPad/i)

|| navigator.userAgent.match(/iPod/i)

|| navigator.userAgent.match(/BlackBerry/i)

|| navigator.userAgent.match(/Windows Phone/i)

){

return true;

}

else {

return false;

}

```

168. ### How do you get the image width and height using JS?

You can programmatically get the image and check the dimensions(width and height) using Javascript.

```javascript

var img = new Image();

img.onload = function() {

console.log(this.width + 'x' + this.height);

}

img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

```

169. ### How do you make synchronous HTTP request?

Browsers provide an XMLHttpRequest object which can be used to make synchronous HTTP requests from JavaScript

```javascript

function httpGet(theUrl)

{

var xmlHttpReq = new XMLHttpRequest();

xmlHttpReq.open( "GET", theUrl, false ); // false for synchronous request

xmlHttpReq.send( null );

return xmlHttpReq.responseText;

}

```

170. ### How do you make asynchronous HTTP request?

Browsers provide an XMLHttpRequest object which can be used to make asynchronous HTTP requests from JavaScript by passing 3rd parameter as true.

```javascript

function httpGetAsync(theUrl, callback)

{

var xmlHttpReq = new XMLHttpRequest();

xmlHttpReq.onreadystatechange = function() {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)

callback(xmlHttpReq.responseText);

}

xmlHttp.open("GET", theUrl, true); // true for asynchronous

xmlHttp.send(null);

}

```

171. ### How do you convert date to another timezone in javascript?

You can use toLocaleString() method to convert date in one timezone to another. For example, let's convert current date to British English timezone as below,

```javascript

console.log(event.toLocaleString('en-GB', { timeZone: 'UTC' })); //29/06/2019, 09:56:00

```

172. ### What are the properties used to get size of window?

You can use innerWidth, innerHeight, clientWidth, clientHeight properties of windows, document element and document body objects to find the size of a window. Let's use them combination of these properties to calculate the size of a window or document,

```javascript

var width = window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

var height = window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;

```

173. ### What is a conditional operator in javascript?

The conditional (ternary) operator is the only JavaScript operator that takes three operands which acts as a shortcut for if statement.

```javascript

var isAuthenticated = false;

console.log(isAuthenticated ? 'Hello, welcome' : 'Sorry, you are not authenticated'); //Sorry, you are not authenticated

```

174. ### Can you apply chaining on conditional operator?

Yes, you can apply chaining on conditional operator similar to if … else if … else if … else chain. The syntax is going to be as below,

```javascript

function traceValue(someParam) {

return condition1 ? value1

: condition2 ? value2

: condition3 ? value3

: value4;

}

// The above conditional operator is equivalent to:

function traceValue(someParam) {

if (condition1) { return value1; }

else if (condition2) { return value2; }

else if (condition3) { return value3; }

else { return value4; }

}

```

175. ### What are the ways to execute javascript after page load?

You can execute javascript after page load in many different ways,

1. ** window.onload:**

```javascript

window.onload = function ...

```

2. **document.onload:**

```javascript

document.onload = function ...

```

3. ** body onload:**

```javascript

```

176. ### What is the difference between proto and prototype?

The `__proto__` object is the actual object that is used in the lookup chain to resolve methods, etc. Whereas `prototype` is the object that is used to build `__proto__` when you create an object with new

```javascript

( new Employee ).__proto__ === Employee.prototype;

( new Employee ).prototype === undefined;

```

177. ### Give an example where do you really need semicolon?

It is recommended to use semicolons after every statement in JavaScript. For example, in the below case it throws an error ".. is not a function" at runtime due to missing semicolon.

```javascript

// define a function

var fn = function () {

//...

} // semicolon missing at this line

// then execute some code inside a closure

(function () {

//...

})();

```

and it will be interpreted as

```javascript

var fn = function () {

//...

}(function () {

//...

})();

```

In this case, we are passing second function as an argument to the first function and then trying to call the result of the first function call as a function. Hence, the second function will fail with a "... is not a function" error at runtime.

178. ### What is a freeze method?

The freeze() method is used to freeze an object. Freezing an object does'nt allow adding new properties to an object,prevents from removing and prevents changing the enumerability, configurability, or writability of existing properties. i.e, It returns the passed object and does not create a frozen copy.

```javascript

const obj = {

prop: 100

};

Object.freeze(obj);

obj.prop = 200; // Throws an error in strict mode

console.log(obj.prop); //100

```

**Note:** It causes a TypeError if the argument passed is not an object.

179. ### What is the purpose of freeze method?

Below are the main benefits of using freeze method,

1. It is used for freezing objects and arrays.

2. It is used to make an object immutable.

180. ### Why do I need to use freeze method?

In Object-oriented paradigm, an existing API contains certain elements that are not intended to be extended, modified, or re-used outside of their current context. Hence it works as `final` keyword which is used in various languages.

181. ### How do you detect a browser language preference?

You can use navigator object to detect a browser language preference as below,

```javascript

var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox

navigator.language || // All browsers

navigator.userLanguage; // IE <= 10

console.log(language);

```

182. ### How to convert string to title case with javascript?

Title case means that the first letter of each word is capitalized. You can convert a string to title case using the below function,

```javascript

function toTitleCase(str) {

return str.replace(

/\w\S*/g,

function(txt) {

return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();

}

);

}

toTitleCase("good morning john"); // Good Morning John

```

183. ### How do you detect javascript disabled in the page?

You can use `<noscript>` tag to detect javascript disabled or not. The code block inside `<noscript>` get executed when JavaScript is disabled, and are typically used to display alternative content when the page generated in JavaScript.

```javascript

// JS related code goes here

</script>

<a href="next_page.html?noJS=true">JavaScript is disabled in the apge. Please click Next Page</a>

</noscript>

```

184. ### What are various operators supported by javascript?

An operator is capable of manipulating(mathematical and logical computations) a certain value or operand. There are various operators supported by JavaScript as below,

1. **Arithmetic Operators:** Includes + (Addition),– (Subtraction), * (Multiplication), / (Division), % (Modulus), + + (Increment) and – – (Decrement)

2. **Comparison Operators:** Includes = =(Equal),!= (Not Equal), ===(Equal with type), > (Greater than),> = (Greater than or Equal to),< (Less than),<= (Less than or Equal to)

3. **Logical Operators:** Includes &&(Logical AND),||(Logical OR),!(Logical NOT)

4. **Assignment Operators:** Includes = (Assignment Operator), += (Add and Assignment Operator), – = (Subtract and Assignment Operator), *= (Multiply and Assignment), /= (Divide and Assignment), %= (Modules and Assignment)

5. **Ternary Operators:** It includes conditional(: ?) Operator

6. **typeof Operator:** It uses to find type of variable. The syntax looks like `typeof variable`

185. ### What is a rest parameter?

Rest parameter is an improved way to handle function parameter which allows us to represent an indefinite number of arguments as an array. The syntax would be as below,

```javascript

function f(a, b, ...theArgs) {

// ...

}

```

For example, let's take a sum example to calculate on dynamic number of parameters,

```javascript

function total(…args){

let sum = 0;

for(let i of args){

sum+=i;

}

return sum;

}

console.log(fun(1,2)); //3

console.log(fun(1,2,3)); //6

console.log(fun(1,2,3,4)); //13

console.log(fun(1,2,3,4,5)); //15

```

**Note:** Rest parameter is added in ES2015 or ES6

186. ### What happens if you do not use rest parameter as a last argument?

The rest parameter should be the last argument, as its job is to collect all the remaining arguments into an array. For example, if you define a function like below it doesn’t make any sense and will throw an error.

```javascript

function someFunc(a,…b,c){

//You code goes here

return;

}

```

187. ### What are the bitwise operators available in javascript?

Below are the list of bit-wise logical operators used in JavaScript

1. Bit-wise AND ( & )

2. Bit-Wise OR ( | )

3. Bit-Wise XOR ( ^ )

4. Bit-Wise NOT ( ~ )

5. Left Shift ( << )

6. Sign Propagating Right Shift ( >> )

7. Zero fill Right Shift ( >>> )

188. ### What is a spread operator?

Spread operator allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements. Let's take an example to see this behavior,

```javascript

function calculateSum(x, y, z) {

return x + y + z;

}

const numbers = [1, 2, 3];

console.log(calculateSum(...numbers)); // 6

```

189. ### How do you determine whether object is frozen or not?

Object.isFrozen() method is used to determine if an object is frozen or not.An object is frozen if all of the below conditions hold true,

1. If it is not extensible.

2. If all of its properties are non-configurable.

3. If all its data properties are non-writable.

The usage is going to be as follows,

```javascript

const object = {

property: 'Welcome JS world'

};

Object.freeze(object);

console.log(Object.isFrozen(object));

```

190. ### How do you determine two values same or not using object?

The Object.is() method determines whether two values are the same value. For example, the usage with different types of values would be,

```javascript

Object.is('hello', 'hello'); // true

Object.is(window, window); // true

Object.is([], []) // false

```

Two values are the same if one of the following holds:

1. both undefined

2. both null

3. both true or both false

4. both strings of the same length with the same characters in the same order

5. both the same object (means both object have same reference)

6. both numbers and

both +0

both -0

both NaN

both non-zero and both not NaN and both have the same value.

191. ### What is the purpose of using object is method?

Some of the applications of Object's `is` method are follows,

1. It is used for comparison of two strings.

2. It is used for comparison of two numbers.

3. It is used for comparing the polarity of two numbers.

4. It is used for comparison of two objects.

192. ### How do you copy properties from one object to other?

You can use Object.assign() method which is used to copy the values and properties from one or more source objects to a target object. It returns the target object which has properties and values copied from the target object. The syntax would be as below,

```javascript

Object.assign(target, ...sources)

```

Let's take exampple with one source and one target object,

```javascript

const target = { a: 1, b: 2 };

const source = { b: 3, c: 4 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 3, c: 4 }

console.log(returnedTarget); // { a: 1, b: 3, c: 4 }

```

As observed in the above code, there is a common property(`b`) from source to target so it's value is been overwritten.

193. ### What are the applications of assign method?

Below are the some of main applications of Object.assign() method,

1. It is used for cloning an object.

2. It is used to merge object with same properties.

194. ### What is a proxy object?

The Proxy object is used to define custom behavior for fundamental operations such as property lookup, assignment, enumeration, function invocation, etc. The syntax would be as follows,

```javascript

var p = new Proxy(target, handler);

```

Let's take an example of proxy object,

```javascript

var handler = {

get: function(obj, prop) {

return prop in obj ?

obj[prop] :

100;

}

};

var p = new Proxy({}, handler);

p.a = 10;

p.b = null;

console.log(p.a, p.b); // 1, null

console.log('c' in p, p.c); // false, 100

```

In the above code, it uses `get` handler which define the behavior of the proxy when an operation is performed on it

195. ### What is the purpose of seal method?

The Object.seal() method is used seal an object, by preventing new properties from being added to it and marking all existing properties as non-configurable. But values of present properties can still be changed as long as they are writable. Let's see the below example to understand more about seal() method

```javascript

const object = {

property: 'Welcome JS world'

};

Object.seal(object);

object.property = 'Welcome to object world';

console.log(Object.isSealed(object)); // Welcome to object world

delete object.property; // You cannot delete when sealed

console.log(object.property); //Welcome to object world

```

196. ### What are the applications of seal method?

Below are the main applications of Object.seal() method,

1. It is used for sealing objects and arrays.

2. It is used to make an object immutable.

197. ### What are the differences between freeze and seal methods?

If an object is frozen using the Object.freeze() method then its properties become immutable and no changes can be made in them whereas if an object is sealed using the Object.seal() method then the changes can be made in the existing properties of the object.

198. ### How do you determine if an object is sealed or not?

The Object.isSealed() method is used to determine if an object is sealed or not. An object is sealed if all of the below conditions hold true

1. If it is not extensible.

2. If all of its properties are non-configurable.

3. If it is not removable (but not necessarily non-writable).

Let's see it in the action

```javascript

const object = {

property: 'Hello, Good morning'

};

Object.seal(object); // Using seal() method to seal the object

console.log(Object.isSealed(object)); // checking whether the object is sealed or not

```

199. ### How do you get enumerable key and value pairs?

The Object.entries() method is used to return an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop. Let's see the functionality of object.entries() method in an example,

```javascript

const object = {

a: 'Good morning',

b: 100

};

for (let [key, value] of Object.entries(object)) {

console.log(`${key}: ${value}`); // a: 'Good morning'

// b: 100

}

```

**Note:** The order is not guaranteed as object defined.

200. ### What is the main difference between Object.values and Object.entries method?

The Object.values() method's behavior is similar to Object.entries() method but it returns an array of values instead [key,value] pairs.

```javascript

const object = {

a: 'Good morning',

b: 100

};

for (let value of Object.values(object)) {

console.log(`${value}`); // 'Good morning'

100

}

```

201. ### How can you get the list of keys of any object?

You can use `Object.keys()` method which is used return an array of a given object's own property names, in the same order as we get with a normal loop. For example, you can get the keys of a user object,

```javascript

const user = {

name: 'John',

gender: 'male',

age: 40

};

console.log(Object.keys(user)); //['name', 'gender', 'age']

```

202. ### How do you create an object with prototype?

The Object.create() method is used to create a new object with the specified prototype object and properties. i.e, It uses existing object as the prototype of the newly created object. It returns a new object with the specified prototype object and properties.

```javascript

const user = {

name: 'John',

printInfo: function () {

console.log(`My name is ${this.name}.`);

}

};

const admin = Object.create(person);

admin.name = "Nick"; // Remember that "name" is a property set on "admin" but not on "user" object

admin.printInfo(); // My name is Nick

```

203. ### What is a WeakSet?

WeakSet is used to store a collection of weakly(weak references) held objects. The syntax would be as follows,

```javascript

new WeakSet([iterable]);

```

Let's see the below example to explain it's behavior,

```javascript

var ws = new WeakSet();

var user = {};

ws.add(user);

ws.has(user); // true

ws.delete(user); // removes user from the set

ws.has(user); // false, user has been removed

```

204. ### What are the differences between WeakSet and Set?

The main difference is that references to objects in Set are strong while references to objects in WeakSet are weak. i.e, An object in WeakSet can be garbage collected if there is no other reference to it.

Other differences are,

1. Sets can store any value Whereas WeakSets can store only collections of objects

2. WeakSet does not have size property unlike Set

3. WeakSet does not have methods such as clear, keys, values, entries, forEach.

4. WeakSet is not iterable.

205. ### List down the collection of methods available on WeakSet?

Below are the list of methods available on WeakSet,

1. add(value): A new object is appended with the given value to the weakset

2. delete(value): Deletes the value from the WeakSet collection.

3. has(value): It returns true if the value is present in the WeakSet Collection, otherwise it returns false.

4. length(): It returns the length of weakSetObject

Let's see the functionality of all the above methods in an example,

```javascript

var weakSetObject = new WeakSet();

var firstObject = {};

var secondObject = {};

// add(value)

weakSetObject.add(firstObject);

weakSetObject.add(secondObject);

console.log(weakSetObject.has(firstObject)); //true

console.log(weakSetObject.length()); //2

weakSetObject.delete(secondObject);

```

206. ### What is a WeakMap?

The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced. In this case, keys must be objects and the values can be arbitrary values. The syntax is looking like as below,

```javascript

new WeakMap([iterable])

```

Let's see the below example to explain it's behavior,

```javascript

var ws = new WeakMap();

var user = {};

ws.set(user);

ws.has(user); // true

ws.delete(user); // removes user from the map

ws.has(user); // false, user has been removed

```

207. ### What are the differences between WeakMap and Map?

The main difference is that references to key objects in Map are strong while references to key objects in WeakMap are weak. i.e, A key object in WeakMap can be garbage collected if there is no other reference to it.

Other differences are,

1. Maps can store any key type Whereas WeakMaps can store only collections of key objects

2. WeakMap does not have size property unlike Map

3. WeakMap does not have methods such as clear, keys, values, entries, forEach.

4. WeakMap is not iterable.

208. ### List down the collection of methods available on WeakMap?

Below are the list of methods available on WeakMap,

1. set(key, value): Sets the value for the key in the WeakMap object. Returns the WeakMap object.

2. delete(key): Removes any value associated to the key.

3. has(key): Returns a Boolean asserting whether a value has been associated to the key in the WeakMap object or not.

4. get(key): Returns the value associated to the key, or undefined if there is none.

Let's see the functionality of all the above methods in an example,

```javascript

var weakMapObject = new WeakMap();

var firstObject = {};

var secondObject = {};

// set(key, value)

weakMapObject.set(firstObject, 'John');

weakMapObject.set(secondObject, 100);

console.log(weakMapObject.has(firstObject)); //true

console.log(weakMapObject.get(firstObject)); // John

weakMapObject.delete(secondObject);

```

209. ### What is the purpose of uneval?

The uneval() is an inbuilt function which is used to create a string representation of the source code of an Object. It is a top-level function and is not associated with any object. Let's see the below example to know more about it's functionality,

```javascript

var a = 1;

uneval(a); // returns a String containing 1

uneval(function user() {}); // returns "(function user(){})"

```

210. ### How do you encode an URL?

The encodeURI() function is used to encode complete URI which has special characters except (, / ? : @ & = + $ #) characters.

```javascript

var uri = 'https://mozilla.org/?x=шеллы';

var encoded = encodeURI(uri);

console.log(encoded); // https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B

```

ATechnoz

Search This Blog

Basic to Advance Javascript Interview Question 161-210

Comments

Post a Comment