From 5557515af6e276499ee50e6d0e1216dde413c946 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christof=20K=C3=A4lin?= Date: Mon, 3 Feb 2025 15:24:34 +0100 Subject: [PATCH 1/9] Update README.md Some clarifications --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f346b7cd..f38fb454 100644 --- a/README.md +++ b/README.md @@ -1512,7 +1512,7 @@ 51. ### What is a promise - A promise is an object that may produce a single value some time in the future with either a resolved value or a reason that it’s not resolved(for example, network error). It will be in one of the 3 possible states: fulfilled, rejected, or pending. + A promise is an object that may produce a single value some time in the future with either a resolved value or a reason that it’s not resolved (i.e. rejected, that means for example, due to a network error). It will be in one of the 3 possible states: fulfilled, rejected, or pending. The syntax of Promise creation looks like below, @@ -1581,7 +1581,7 @@ 55. ### Why do we need callbacks - The callbacks are needed because javascript is an event driven language. That means instead of waiting for a response javascript will keep executing while listening for other events. + The callbacks are needed because javascript is an event driven language. That means instead of waiting for a response, javascript will keep executing while listening for other events. Let's take an example with the first function invoking an API call(simulated by setTimeout) and the next function which logs the message. ```javascript @@ -1597,7 +1597,7 @@ firstFunction(); secondFunction(); - Output; + // Output: // Second function called // First function called ``` @@ -1626,7 +1626,7 @@ 57. ### What are server-sent events - Server-sent events (SSE) is a server push technology enabling a browser to receive automatic updates from a server via HTTP connection without resorting to polling. These are a one way communications channel - events flow from server to client only. This has been used in Facebook/Twitter updates, stock price updates, news feeds etc. + Server-sent events (SSE) is a server push technology enabling a browser to receive automatic updates from a server via HTTP connection without resorting to polling. These are a one way communications channel - events flow from server to client only. This has been used in Facebook/Twitter/X updates, stock price updates, news feeds etc. **[⬆ Back to Top](#table-of-contents)** @@ -1683,7 +1683,7 @@ 62. ### What is callback in callback - You can nest one callback inside in another callback to execute the actions sequentially one by one. This is known as callbacks in callbacks. + You can nest one callback inside in another callback to execute the actions sequentially one by one. This is known as callbacks in callbacks. Beware, too many levels of nesting lead to [Callback hell](https://github.com/ckpinguin/javascript-interview-questions/tree/master?tab=readme-ov-file#what-is-a-callback-hell) ```javascript loadScript("/script1.js", function (script) { From ff701b6354545bff356324a11c2e5d4a46ab7555 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christof=20K=C3=A4lin?= Date: Mon, 3 Feb 2025 16:28:56 +0100 Subject: [PATCH 2/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f38fb454..0ea4c90f 100644 --- a/README.md +++ b/README.md @@ -1766,7 +1766,7 @@ 66. ### What is a strict mode in javascript - Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. This way it prevents certain actions from being taken and throws more exceptions. The literal expression `"use strict";` instructs the browser to use the javascript code in the Strict mode. + Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. This way it prevents certain actions from being taken and throws more exceptions. The literal expression `"use strict";` instructs the browser to use the javascript code in the Strict mode. This also enables block-scoped variables. **[⬆ Back to Top](#table-of-contents)** From 7758a308bd7922ac22904cf596a98fa51eb4eee5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christof=20K=C3=A4lin?= Date: Tue, 4 Feb 2025 14:45:55 +0100 Subject: [PATCH 3/9] Update README.md small addition to undefined vs. not declared --- README.md | 346 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 177 insertions(+), 169 deletions(-) diff --git a/README.md b/README.md index 0ea4c90f..4942492f 100644 --- a/README.md +++ b/README.md @@ -1905,7 +1905,7 @@ | Window | Document | | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | - | It is the root level element in any web page | It is the direct child of the window object. This is also known as Document Object Model(DOM) | + | It is the root level element in any web page | It is the direct child of the window object. This is also known as Document Object Model (DOM) | | By default window object is available implicitly in the page | You can access it via window.document or document. | | It has methods like alert(), confirm() and properties like document, location | It provides methods like getElementById, getElementsByTagName, createElement etc | @@ -1932,7 +1932,7 @@ The `mouseEvent getModifierState()` is used to return a boolean value that indicates whether the specified modifier key is activated or not. The modifiers such as CapsLock, ScrollLock and NumLock are activated when they are clicked, and deactivated when they are clicked again. - Let's take an input element to detect the CapsLock on/off behavior with an example, + Let's take an input element to detect the CapsLock on/off behavior with an example: ```html @@ -1974,9 +1974,17 @@ | These variables do not exist in a program and are not declared | These variables declared in the program but have not assigned any value | | If you try to read the value of an undeclared variable, then a runtime error is encountered | If you try to read the value of an undefined variable, an undefined value is returned. | + ```javascript + var a; + a; // yields undefined + + b; // Throws runtime error like „Uncaught ReferenceError: b is not defined“ + ``` + This can be confusing, because it says „not defined“ instead of „not declared“ (Chrome) + **[⬆ Back to Top](#table-of-contents)** -81. ### What are global variables +82. ### What are global variables Global variables are those that are available throughout the length of the code without any scope. The var keyword is used to declare a local variable but if you omit it then it will become global variable @@ -1986,13 +1994,13 @@ **[⬆ Back to Top](#table-of-contents)** -82. ### What are the problems with global variables +83. ### What are the problems with global variables The problem with global variables is the conflict of variable names of local and global scope. It is also difficult to debug and test the code that relies on global variables. **[⬆ Back to Top](#table-of-contents)** -83. ### What is NaN property +84. ### What is NaN property The NaN property is a global property that represents "Not-a-Number" value. i.e, It indicates that a value is not a legal number. It is very rare to use NaN in a program but it can be used as return value for few cases @@ -2003,7 +2011,7 @@ **[⬆ Back to Top](#table-of-contents)** -84. ### What is the purpose of isFinite function +85. ### What is the purpose of isFinite function The isFinite() function is used to determine whether a number is a finite, legal number. It returns false if the value is +infinity, -infinity, or NaN (Not-a-Number), otherwise it returns true. @@ -2017,7 +2025,7 @@ **[⬆ Back to Top](#table-of-contents)** -85. ### What is an event flow +86. ### What is an event flow Event flow is the order in which event is received on the web page. When you click an element that is nested in various other elements, before your click actually reaches its destination, or target element, it must trigger the click event for each of its parent elements first, starting at the top with the global window object. @@ -2028,7 +2036,7 @@ **[⬆ Back to Top](#table-of-contents)** -86. ### What is event bubbling +87. ### What is event bubbling Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element(i.e, global window object). @@ -2059,7 +2067,7 @@ **[⬆ Back to Top](#table-of-contents)** -87. ### What is event capturing +88. ### What is event capturing Event capturing is a type of event propagation where the event is first captured by the outermost element, and then successively triggers on the descendants (children) of the target element in the same nesting hierarchy till it reaches the innermost target DOM element. @@ -2091,7 +2099,7 @@ **[⬆ Back to Top](#table-of-contents)** -88. ### How do you submit a form using JavaScript +89. ### How do you submit a form using JavaScript You can submit a form using `document.forms[0].submit()`. All the form input's information is submitted using onsubmit event handler @@ -2103,7 +2111,7 @@ **[⬆ Back to Top](#table-of-contents)** -89. ### How do you find operating system details +90. ### How do you find operating system details The window.navigator object contains information about the visitor's browser OS details. Some of the OS properties are available under platform property, @@ -2113,13 +2121,13 @@ **[⬆ Back to Top](#table-of-contents)** -90. ### What is the difference between document load and DOMContentLoaded events +91. ### What is the difference between document load and DOMContentLoaded events The `DOMContentLoaded` event is fired when the initial HTML document has been completely loaded and parsed, without waiting for assets(stylesheets, images, and subframes) to finish loading. Whereas The load event is fired when the whole page has loaded, including all dependent resources(stylesheets, images). **[⬆ Back to Top](#table-of-contents)** -91. ### What is the difference between native, host and user objects +92. ### What is the difference between native, host and user objects `Native objects` are objects that are part of the JavaScript language defined by the ECMAScript specification. For example, String, Math, RegExp, Object, Function etc core objects defined in the ECMAScript spec. `Host objects` are objects provided by the browser or runtime environment (Node). @@ -2129,7 +2137,7 @@ **[⬆ Back to Top](#table-of-contents)** -92. ### What are the tools or techniques used for debugging JavaScript code +93. ### What are the tools or techniques used for debugging JavaScript code You can use below tools or techniques for debugging javascript @@ -2139,7 +2147,7 @@ **[⬆ Back to Top](#table-of-contents)** -93. ### What are the pros and cons of promises over callbacks +94. ### What are the pros and cons of promises over callbacks Below are the list of pros and cons of promises over callbacks, @@ -2157,7 +2165,7 @@ **[⬆ Back to Top](#table-of-contents)** -94. ### What is the difference between an attribute and a property +95. ### What is the difference between an attribute and a property Attributes are defined on the HTML markup whereas properties are defined on the DOM. For example, the below HTML element has 2 attributes type and value, @@ -2182,13 +2190,13 @@ **[⬆ Back to Top](#table-of-contents)** -95. ### What is same-origin policy +96. ### What is same-origin policy The same-origin policy is a policy that prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. If you enable this policy then it prevents a malicious script on one page from obtaining access to sensitive data on another web page using Document Object Model(DOM). **[⬆ Back to Top](#table-of-contents)** -96. ### What is the purpose of void 0 +97. ### What is the purpose of void 0 Void(0) is used to prevent the page from refreshing. This will be helpful to eliminate the unwanted side-effect, because it will return the undefined primitive value. It is commonly used for HTML documents that use href="JavaScript:Void(0);" within an `` element. i.e, when you click a link, the browser loads a new page or refreshes the same page. But this behavior will be prevented using this expression. For example, the below link notify the message without reloading the page @@ -2201,25 +2209,25 @@ **[⬆ Back to Top](#table-of-contents)** -97. ### Is JavaScript a compiled or interpreted language +98. ### Is JavaScript a compiled or interpreted language JavaScript is an interpreted language, not a compiled language. An interpreter in the browser reads over the JavaScript code, interprets each line, and runs it. Nowadays modern browsers use a technology known as Just-In-Time (JIT) compilation, which compiles JavaScript to executable bytecode just as it is about to run. **[⬆ Back to Top](#table-of-contents)** -98. ### Is JavaScript a case-sensitive language +99. ### Is JavaScript a case-sensitive language Yes, JavaScript is a case sensitive language. The language keywords, variables, function & object names, and any other identifiers must always be typed with a consistent capitalization of letters. **[⬆ Back to Top](#table-of-contents)** -99. ### Is there any relation between Java and JavaScript +100. ### Is there any relation between Java and JavaScript No, they are entirely two different programming languages and have nothing to do with each other. But both of them are Object Oriented Programming languages and like many other languages, they follow similar syntax for basic features(if, else, for, switch, break, continue etc). **[⬆ Back to Top](#table-of-contents)** -100. ### What are events +101. ### What are events Events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can `react` on these events. Some of the examples of HTML events are, @@ -2247,13 +2255,13 @@ **[⬆ Back to Top](#table-of-contents)** -101. ### Who created javascript +102. ### Who created javascript JavaScript was created by Brendan Eich in 1995 during his time at Netscape Communications. Initially it was developed under the name `Mocha`, but later the language was officially called `LiveScript` when it first shipped in beta releases of Netscape. **[⬆ Back to Top](#table-of-contents)** -102. ### What is the use of preventDefault method +103. ### What is the use of preventDefault method The preventDefault() method cancels the event if it is cancelable, meaning that the default action or behaviour that belongs to the event will not occur. For example, prevent form submission when clicking on submit button and prevent opening the page URL when clicking on hyperlink are some common use cases. @@ -2269,7 +2277,7 @@ **[⬆ Back to Top](#table-of-contents)** -103. ### What is the use of stopPropagation method +104. ### What is the use of stopPropagation method The stopPropagation method is used to stop the event from bubbling up the event chain. For example, the below nested divs with stopPropagation method prevents default event propagation when clicking on nested div(Div1) @@ -2293,7 +2301,7 @@ **[⬆ Back to Top](#table-of-contents)** -104. ### What are the steps involved in return false usage +105. ### What are the steps involved in return false usage The return false statement in event handlers performs the below steps, @@ -2303,7 +2311,7 @@ **[⬆ Back to Top](#table-of-contents)** -105. ### What is BOM +106. ### What is BOM The Browser Object Model (BOM) allows JavaScript to "talk to" the browser. It consists of the objects navigator, history, screen, location and document which are children of the window. The Browser Object Model is not standardized and can change based on different browsers. @@ -2311,7 +2319,7 @@ **[⬆ Back to Top](#table-of-contents)** -106. ### What is the use of setTimeout +107. ### What is the use of setTimeout The setTimeout() method is used to call a function or evaluate an expression after a specified number of milliseconds. For example, let's log a message after 2 seconds using setTimeout method, @@ -2323,7 +2331,7 @@ **[⬆ Back to Top](#table-of-contents)** -107. ### What is the use of setInterval +108. ### What is the use of setInterval The setInterval() method is used to call a function or evaluate an expression at specified intervals (in milliseconds). For example, let's log a message after 2 seconds using setInterval method, @@ -2335,13 +2343,13 @@ **[⬆ Back to Top](#table-of-contents)** -108. ### Why is JavaScript treated as Single threaded +109. ### Why is JavaScript treated as Single threaded JavaScript is a single-threaded language. Because the language specification does not allow the programmer to write code so that the interpreter can run parts of it in parallel in multiple threads or processes. Whereas languages like java, go, C++ can make multi-threaded and multi-process programs. **[⬆ Back to Top](#table-of-contents)** -109. ### What is an event delegation +110. ### What is an event delegation Event delegation is a technique for listening to events where you delegate a parent element as the listener for all of the events that happen inside it. @@ -2363,19 +2371,19 @@ **[⬆ Back to Top](#table-of-contents)** -110. ### What is ECMAScript +111. ### What is ECMAScript ECMAScript is the scripting language that forms the basis of JavaScript. ECMAScript standardized by the ECMA International standards organization in the ECMA-262 and ECMA-402 specifications. The first edition of ECMAScript was released in 1997. **[⬆ Back to Top](#table-of-contents)** -111. ### What is JSON +112. ### What is JSON JSON (JavaScript Object Notation) is a lightweight format that is used for data interchanging. It is based on a subset of JavaScript language in the way objects are built in JavaScript. **[⬆ Back to Top](#table-of-contents)** -112. ### What are the syntax rules of JSON +113. ### What are the syntax rules of JSON Below are the list of syntax rules of JSON @@ -2386,7 +2394,7 @@ **[⬆ Back to Top](#table-of-contents)** -113. ### What is the purpose JSON stringify +114. ### What is the purpose JSON stringify When sending data to a web server, the data has to be in a string format. You can achieve this by converting JSON object into a string using stringify() method. @@ -2398,7 +2406,7 @@ **[⬆ Back to Top](#table-of-contents)** -114. ### How do you parse JSON string +115. ### How do you parse JSON string When receiving the data from a web server, the data is always in a string format. But you can convert this string value to a javascript object using parse() method. @@ -2410,19 +2418,19 @@ **[⬆ Back to Top](#table-of-contents)** -115. ### Why do you need JSON +116. ### Why do you need JSON When exchanging data between a browser and a server, the data can only be text. Since JSON is text only, it can easily be sent to and from a server, and used as a data format by any programming language. **[⬆ Back to Top](#table-of-contents)** -116. ### What are PWAs +117. ### What are PWAs Progressive web applications (PWAs) are a type of mobile app delivered through the web, built using common web technologies including HTML, CSS and JavaScript. These PWAs are deployed to servers, accessible through URLs, and indexed by search engines. **[⬆ Back to Top](#table-of-contents)** -117. ### What is the purpose of clearTimeout method +118. ### What is the purpose of clearTimeout method The clearTimeout() function is used in javascript to clear the timeout which has been set by setTimeout()function before that. i.e, The return value of setTimeout() function is stored in a variable and it’s passed into the clearTimeout() function to clear the timer. @@ -2447,7 +2455,7 @@ **[⬆ Back to Top](#table-of-contents)** -118. ### What is the purpose of clearInterval method +119. ### What is the purpose of clearInterval method The clearInterval() function is used in javascript to clear the interval which has been set by setInterval() function. i.e, The return value returned by setInterval() function is stored in a variable and it’s passed into the clearInterval() function to clear the interval. @@ -2472,7 +2480,7 @@ **[⬆ Back to Top](#table-of-contents)** -119. ### How do you redirect new page in javascript +120. ### How do you redirect new page in javascript In vanilla javascript, you can redirect to a new page using the `location` property of window object. The syntax would be as follows, @@ -2484,7 +2492,7 @@ **[⬆ Back to Top](#table-of-contents)** -120. ### How do you check whether a string contains a substring +121. ### How do you check whether a string contains a substring There are 3 possible ways to check whether a string contains a substring or not, @@ -2514,7 +2522,7 @@ **[⬆ Back to Top](#table-of-contents)** -121. ### How do you validate an email in javascript +122. ### How do you validate an email in javascript You can validate an email in javascript using regular expressions. It is recommended to do validations on the server side instead of the client side. Because the javascript can be disabled on the client side. @@ -2530,7 +2538,7 @@ The above regular expression accepts unicode characters. -122. ### How do you get the current url with javascript +123. ### How do you get the current url with javascript You can use `window.location.href` expression to get the current url path and you can use the same expression for updating the URL too. You can also use `document.URL` for read-only purposes but this solution has issues in FF. @@ -2540,7 +2548,7 @@ **[⬆ Back to Top](#table-of-contents)** -123. ### What are the various url properties of location object +124. ### What are the various url properties of location object The below `Location` object properties can be used to access URL components of the page, @@ -2555,7 +2563,7 @@ **[⬆ Back to Top](#table-of-contents)** -124. ### How do get query string values in javascript +125. ### How do get query string values in javascript You can use URLSearchParams to get query string values in javascript. Let's see an example to get the client code value from URL query string, @@ -2566,7 +2574,7 @@ **[⬆ Back to Top](#table-of-contents)** -125. ### How do you check if a key exists in an object +126. ### How do you check if a key exists in an object You can check whether a key exists in an object or not using three approaches, @@ -2601,7 +2609,7 @@ **[⬆ Back to Top](#table-of-contents)** -126. ### How do you loop through or enumerate javascript object +127. ### How do you loop through or enumerate javascript object You can use the `for-in` loop to loop through javascript object. You can also make sure that the key you get is an actual property of an object, and doesn't come from the prototype using `hasOwnProperty` method. @@ -2621,7 +2629,7 @@ **[⬆ Back to Top](#table-of-contents)** -127. ### How do you test for an empty object +128. ### How do you test for an empty object There are different solutions based on ECMAScript versions @@ -2653,7 +2661,7 @@ **[⬆ Back to Top](#table-of-contents)** -128. ### What is an arguments object +129. ### What is an arguments object The arguments object is an Array-like object accessible inside functions that contains the values of the arguments passed to that function. For example, let's see how to use arguments object inside sum function, @@ -2677,7 +2685,7 @@ **[⬆ Back to Top](#table-of-contents)** -129. ### How do you make first letter of the string in an uppercase +130. ### How do you make first letter of the string in an uppercase You can create a function which uses a chain of string methods such as charAt, toUpperCase and slice methods to generate a string with the first letter in uppercase. @@ -2689,7 +2697,7 @@ **[⬆ Back to Top](#table-of-contents)** -130. ### What are the pros and cons of for loops +131. ### What are the pros and cons of for loops The for-loop is a commonly used iteration syntax in javascript. It has both pros and cons @@ -2706,7 +2714,7 @@ **[⬆ Back to Top](#table-of-contents)** -131. ### How do you display the current date in javascript +132. ### How do you display the current date in javascript You can use `new Date()` to generate a new Date object containing the current date and time. For example, let's display the current date in mm/dd/yyyy @@ -2722,7 +2730,7 @@ **[⬆ Back to Top](#table-of-contents)** -132. ### How do you compare two date objects +133. ### How do you compare two date objects You need to use date.getTime() method to compare date values instead of comparison operators (==, !=, ===, and !== operators) @@ -2735,7 +2743,7 @@ **[⬆ Back to Top](#table-of-contents)** -133. ### How do you check if a string starts with another string +134. ### How do you check if a string starts with another string You can use ECMAScript 6's `String.prototype.startsWith()` method to check if a string starts with another string or not. But it is not yet supported in all browsers. Let's see an example to see this usage, @@ -2746,7 +2754,7 @@ **[⬆ Back to Top](#table-of-contents)** -134. ### How do you trim a string in javascript +135. ### How do you trim a string in javascript JavaScript provided a trim method on string types to trim any whitespaces present at the beginning or ending of the string. @@ -2770,7 +2778,7 @@ **[⬆ Back to Top](#table-of-contents)** -135. ### How do you add a key value pair in javascript +136. ### How do you add a key value pair in javascript There are two possible solutions to add new properties to an object. @@ -2797,7 +2805,7 @@ **[⬆ Back to Top](#table-of-contents)** -136. ### Is the !-- notation represents a special operator +137. ### Is the !-- notation represents a special operator No,that's not a special operator. But it is a combination of 2 standard operators one after the other, @@ -2808,7 +2816,7 @@ **[⬆ Back to Top](#table-of-contents)** -137. ### How do you assign default values to variables +138. ### How do you assign default values to variables You can use the logical or operator `||` in an assignment expression to provide a default value. The syntax looks like as below, @@ -2820,7 +2828,7 @@ **[⬆ Back to Top](#table-of-contents)** -138. ### How do you define multiline strings +139. ### How do you define multiline strings You can define multiline string literals using the '\n' character followed by line terminator('\'). @@ -2834,13 +2842,13 @@ **[⬆ Back to Top](#table-of-contents)** -139. ### What is an app shell model +140. ### What is an app shell model An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users' screens, similar to what you see in native applications. It is useful for getting some initial HTML to the screen fast without a network. **[⬆ Back to Top](#table-of-contents)** -140. ### Can we define properties for functions +141. ### Can we define properties for functions Yes, We can define properties for functions because functions are also objects. @@ -2858,7 +2866,7 @@ **[⬆ Back to Top](#table-of-contents)** -141. ### What is the way to find the number of parameters expected by a function +142. ### What is the way to find the number of parameters expected by a function You can use `function.length` syntax to find the number of parameters expected by a function. Let's take an example of `sum` function to calculate the sum of numbers, @@ -2871,7 +2879,7 @@ **[⬆ Back to Top](#table-of-contents)** -142. ### What is a polyfill +143. ### What is a polyfill A polyfill is a piece of JS code used to provide modern functionality on older browsers that do not natively support it. For example, Silverlight plugin polyfill can be used to mimic the functionality of an HTML Canvas element on Microsoft Internet Explorer 7. @@ -2881,7 +2889,7 @@ **[⬆ Back to Top](#table-of-contents)** -143. ### What are break and continue statements +144. ### What are break and continue statements The break statement is used to "jump out" of a loop. i.e, It breaks the loop and continues executing the code after the loop. @@ -2907,7 +2915,7 @@ **[⬆ Back to Top](#table-of-contents)** -144. ### What are js labels +145. ### What are js labels The label statement allows us to name loops and blocks in JavaScript. We can then use these labels to refer back to the code later. For example, the below code with labels avoids printing the numbers when they are same, @@ -2931,7 +2939,7 @@ **[⬆ Back to Top](#table-of-contents)** -145. ### What are the benefits of keeping declarations at the top +146. ### What are the benefits of keeping declarations at the top It is recommended to keep all declarations at the top of each script or function. The benefits of doing this are, @@ -2942,7 +2950,7 @@ **[⬆ Back to Top](#table-of-contents)** -146. ### What are the benefits of initializing variables +147. ### What are the benefits of initializing variables It is recommended to initialize variables because of the below benefits, @@ -2952,7 +2960,7 @@ **[⬆ Back to Top](#table-of-contents)** -147. ### What are the recommendations to create new object +148. ### What are the recommendations to create new object It is recommended to avoid creating new objects using `new Object()`. Instead you can initialize values based on it's type to create the objects. @@ -2978,7 +2986,7 @@ **[⬆ Back to Top](#table-of-contents)** -148. ### How do you define JSON arrays +149. ### How do you define JSON arrays JSON arrays are written inside square brackets and arrays contain javascript objects. For example, the JSON array of users would be as below, @@ -2992,7 +3000,7 @@ **[⬆ Back to Top](#table-of-contents)** -149. ### How do you generate random integers +150. ### How do you generate random integers You can use Math.random() with Math.floor() to return random integers. For example, if you want generate random integers between 1 to 10, the multiplication factor should be 10, @@ -3005,7 +3013,7 @@ **[⬆ Back to Top](#table-of-contents)** -150. ### Can you write a random integers function to print integers within a range +151. ### Can you write a random integers function to print integers within a range Yes, you can create a proper random function to return a random number between min and max (both included) @@ -3019,25 +3027,25 @@ **[⬆ Back to Top](#table-of-contents)** -151. ### What is tree shaking +152. ### What is tree shaking Tree shaking is a form of dead code elimination. It means that unused modules will not be included in the bundle during the build process and for that it relies on the static structure of ES2015 module syntax,( i.e. import and export). Initially this has been popularized by the ES2015 module bundler `rollup`. **[⬆ Back to Top](#table-of-contents)** -152. ### What is the need of tree shaking +153. ### What is the need of tree shaking Tree Shaking can significantly reduce the code size in any application. i.e, The less code we send over the wire the more performant the application will be. For example, if we just want to create a “Hello World” Application using SPA frameworks then it will take around a few MBs, but by tree shaking it can bring down the size to just a few hundred KBs. Tree shaking is implemented in Rollup and Webpack bundlers. **[⬆ Back to Top](#table-of-contents)** -153. ### Is it recommended to use eval +154. ### Is it recommended to use eval No, it allows arbitrary code to be run which causes a security problem. As we know that the eval() function is used to run text as code. In most of the cases, it should not be necessary to use it. **[⬆ Back to Top](#table-of-contents)** -154. ### What is a Regular Expression +155. ### What is a Regular Expression A regular expression is a sequence of characters that forms a search pattern. You can use this search pattern for searching data in a text. These can be used to perform all types of text search and text replace operations. Let's see the syntax format now, @@ -3053,7 +3061,7 @@ **[⬆ Back to Top](#table-of-contents)** -155. ### What are the string methods that accept Regular expression +156. ### What are the string methods that accept Regular expression There are six string methods: search(), replace(), replaceAll(), match(), matchAll(), and split(). @@ -3089,7 +3097,7 @@ **[⬆ Back to Top](#table-of-contents)** -156. ### What are modifiers in regular expression +157. ### What are modifiers in regular expression Modifiers can be used to perform case-insensitive and global searches. Let's list down some of the modifiers, @@ -3109,7 +3117,7 @@ **[⬆ Back to Top](#table-of-contents)** -157. ### What are regular expression patterns +158. ### What are regular expression patterns Regular Expressions provide a group of patterns in order to match characters. Basically they are categorized into 3 types, @@ -3131,7 +3139,7 @@ **[⬆ Back to Top](#table-of-contents)** -158. ### What is a RegExp object +159. ### What is a RegExp object RegExp object is a regular expression object with predefined properties and methods. Let's see the simple usage of RegExp object, @@ -3143,7 +3151,7 @@ **[⬆ Back to Top](#table-of-contents)** -159. ### How do you search a string for a pattern +160. ### How do you search a string for a pattern You can use the test() method of regular expression in order to search a string for a pattern, and return true or false depending on the result. @@ -3154,7 +3162,7 @@ **[⬆ Back to Top](#table-of-contents)** -160. ### What is the purpose of exec method +161. ### What is the purpose of exec method The purpose of exec method is similar to test method but it executes a search for a match in a specified string and returns a result array, or null instead of returning true/false. @@ -3165,7 +3173,7 @@ **[⬆ Back to Top](#table-of-contents)** -161. ### How do you change the style of a HTML element +162. ### How do you change the style of a HTML element You can change inline style or classname of a HTML element using javascript @@ -3183,13 +3191,13 @@ **[⬆ Back to Top](#table-of-contents)** -162. ### What would be the result of 1+2+'3' +163. ### 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 the 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`. **[⬆ Back to Top](#table-of-contents)** -163. ### What is a debugger statement +164. ### 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 @@ -3205,13 +3213,13 @@ **[⬆ Back to Top](#table-of-contents)** -164. ### What is the purpose of breakpoints in debugging +165. ### What is the purpose of breakpoints in debugging You can set breakpoints in the javascript code once the debugger statement is executed and the 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 the play button. **[⬆ Back to Top](#table-of-contents)** -165. ### Can I use reserved words as identifiers +166. ### 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, @@ -3221,7 +3229,7 @@ **[⬆ Back to Top](#table-of-contents)** -166. ### How do you detect a mobile browser +167. ### 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. @@ -3245,7 +3253,7 @@ **[⬆ Back to Top](#table-of-contents)** -167. ### How do you detect a mobile browser without regexp +168. ### How do you detect a mobile browser without regexp You can detect mobile browsers by simply running through a list of devices and checking if the useragent matches anything. This is an alternative solution for RegExp usage, @@ -3269,7 +3277,7 @@ **[⬆ Back to Top](#table-of-contents)** -168. ### How do you get the image width and height using JS +169. ### 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. @@ -3283,7 +3291,7 @@ **[⬆ Back to Top](#table-of-contents)** -169. ### How do you make synchronous HTTP request +170. ### How do you make synchronous HTTP request Browsers provide an XMLHttpRequest object which can be used to make synchronous HTTP requests from JavaScript @@ -3298,7 +3306,7 @@ **[⬆ Back to Top](#table-of-contents)** -170. ### How do you make asynchronous HTTP request +171. ### 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 the 3rd parameter as true. @@ -3316,7 +3324,7 @@ **[⬆ Back to Top](#table-of-contents)** -171. ### How do you convert date to another timezone in javascript +172. ### How do you convert date to another timezone in javascript You can use the toLocaleString() method to convert dates in one timezone to another. For example, let's convert current date to British English timezone as below, @@ -3326,7 +3334,7 @@ **[⬆ Back to Top](#table-of-contents)** -172. ### What are the properties used to get size of window +173. ### 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, @@ -3344,7 +3352,7 @@ **[⬆ Back to Top](#table-of-contents)** -173. ### What is a conditional operator in javascript +174. ### 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 statements. @@ -3357,7 +3365,7 @@ **[⬆ Back to Top](#table-of-contents)** -174. ### Can you apply chaining on conditional operator +175. ### Can you apply chaining on conditional operator Yes, you can apply chaining on conditional operators similar to **if … else if … else if … else** chain. The syntax is going to be as below, @@ -3389,7 +3397,7 @@ **[⬆ Back to Top](#table-of-contents)** -175. ### What are the ways to execute javascript after page load +176. ### What are the ways to execute javascript after page load You can execute javascript after page load in many different ways, @@ -3413,7 +3421,7 @@ **[⬆ Back to Top](#table-of-contents)** -176. ### What is the difference between proto and prototype +177. ### 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. @@ -3433,7 +3441,7 @@ **[⬆ Back to Top](#table-of-contents)** -177. ### Can you give an example of when you really need a semicolon +178. ### Can you give an example of when you really need a 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. @@ -3465,7 +3473,7 @@ **[⬆ Back to Top](#table-of-contents)** -178. ### What is a freeze method +179. ### What is a freeze method The **freeze()** method is used to freeze an object. Freezing an object does not allow adding new properties to an object, prevents 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. @@ -3499,7 +3507,7 @@ **[⬆ Back to Top](#table-of-contents)** -179. ### What is the purpose of freeze method +180. ### What is the purpose of freeze method Below are the main benefits of using freeze method, @@ -3508,13 +3516,13 @@ **[⬆ Back to Top](#table-of-contents)** -180. ### Why do I need to use freeze method +181. ### Why do I need to use freeze method In the 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 the `final` keyword which is used in various languages. **[⬆ Back to Top](#table-of-contents)** -181. ### How do you detect a browser language preference +182. ### How do you detect a browser language preference You can use navigator object to detect a browser language preference as below, @@ -3529,7 +3537,7 @@ **[⬆ Back to Top](#table-of-contents)** -182. ### How to convert string to title case with javascript +183. ### 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, @@ -3544,7 +3552,7 @@ **[⬆ Back to Top](#table-of-contents)** -183. ### How do you detect javascript disabled in the page +184. ### How do you detect javascript disabled in the page You can use the `