use strict<\/strong><\/p>\n\n\n\n In JavaScript,\u00a0 Closures<\/strong> IIFE<\/strong> call, apply and bind<\/strong> this<\/strong> Hoisting<\/strong> Temporal Dead Zone<\/strong> Event Propagation<\/strong> Function Types – Ways function can be defined<\/strong> Array Methods<\/strong> DOM Methods<\/strong> Promises vs Observables and RxJS<\/strong> Hoisting and Scoping (The “Undefined” Trap):<\/strong><\/p>\n\n\n\n What is the output of\u00a0 Answer:<\/strong> Temporal Dead Zone:<\/strong><\/p>\n\n\n\n What happens if you run\u00a0 \u00a0Answer:<\/strong> Shadowing in Functions:<\/strong><\/p>\n\n\n\n What is the output of this IIFE?<\/p>\n\n\n\n Answer:<\/strong>\u00a0 The Loop Closure Quirk:<\/strong><\/p>\n\n\n\n What does this code print?<\/p>\n\n\n\n Answer:<\/strong>\u00a0 Microtasks vs. Macrotasks – Asynchronous Execution:<\/strong><\/p>\n\n\n\n In what order will “timeout” and “promise” print?<\/p>\n\n\n\n Answer:<\/strong>\u00a0“promise” then “timeout”. The\u00a0Event Loop<\/strong>\u00a0prioritizes the microtask queue (Promises) over the macrotask queue (setTimeout).\u00a0<\/p>\n\n\n\n Type Coercion and Comparison<\/strong><\/p>\n\n\n\n Answer:<\/strong>\u00a0 2. What is the result of\u00a0 Answer:<\/strong>\u00a0 3. What is the result of\u00a0 Answer:<\/strong>\u00a0 In JavaScript,\u00a0 How to Use It<\/strong><\/p>\n\n\n\n\"use strict\"<\/code><\/strong>\u00a0is\u00a0a directive introduced in ECMAScript 5 (ES5) that enables\u00a0Strict Mode<\/strong>, a restricted variant of JavaScript.<\/p>\n\n\n\n
A closure is a function that retains access to variables from its outer scope after that outer function has returned, enabling private state and encapsulation.<\/p>\n\n\n\n
An Immediately Invoked Function Expression runs as soon as it is defined and creates a private scope to avoid polluting the global namespace.<\/p>\n\n\n\ncall<\/code> invokes a function with a specified this<\/code> and individual arguments; apply<\/code> invokes with a specified this<\/code> and an array of arguments; bind<\/code> returns a new function with this<\/code> (and optionally arguments) permanently bound.<\/p>\n\n\n\n
The value of this<\/code> depends on how a function is called: object method, standalone function, arrow function (lexical this<\/code>), constructor, or event handler.<\/p>\n\n\n\n
Function declarations and var<\/code> declarations are hoisted to the top of their scope; let<\/code> and const<\/code> are not accessible before their declaration (temporal dead zone).<\/p>\n\n\n\n
The period between entering scope and the let<\/code>\/const<\/code> declaration where accessing the variable throws a ReferenceError.<\/p>\n\n\n\n
Events travel through three phases: capturing, target, and bubbling. Handlers can run during capture or bubble and can stop propagation.<\/p>\n\n\n\n\n
window<\/code>\u00a0and travels downward through ancestors until it reaches the target element.<\/li>\n\n\n\nwindow<\/code><\/li>\n<\/ul>\n\n\n\n
Function declarations, function expressions, arrow functions, generator functions, and async functions each have different hoisting, scoping, and this<\/code> behavior.<\/p>\n\n\n\n
Mutating methods: push<\/code>, pop<\/code>, splice<\/code>; non\u2011mutating: map<\/code>, filter<\/code>, reduce<\/code>, slice<\/code>; modern helpers: flat<\/code>, at<\/code>, with<\/code>.<\/p>\n\n\n\n
Selection, creation, attribute manipulation, event handling, and utilities such as getBoundingClientRect<\/code> and scrollIntoView<\/code>.<\/p>\n\n\n\n
Promises produce a single future value and execute immediately; Observables produce streams, execute on subscription, and can be cancelled. RxJS operators like map<\/code>, filter<\/code>, switchMap<\/code>, and mergeMap<\/code> transform and control streams.<\/p>\n\n\n\nTricky Coding Questions<\/h3>\n\n\n\n
console.log(a); var a = 10; # undefined<\/code><\/code><\/pre>\n\n\n\nconsole.log(b); let b = 10; # ReferenceError<\/span><\/code><\/code><\/pre>\n\n\n\n(function() {\nvar x = y = 5;\n})();\nconsole.log(typeof x); # undefine\nconsole.log(typeof y); # number<\/code><\/pre>\n\n\n\nfor (var i = 0; i < 3; i++) {\n setTimeout(() => console.log(i), 1000);\n}\n# Output: 333<\/code><\/pre>\n\n\n\nsetTimeout(() => console.log('timeout'), 0);\nPromise.resolve().then(() => console.log('promise'));\n# Execution Order: Promise, setTimeout<\/code><\/pre>\n\n\n\nconsole.log(0 == '0'); # true\nconsole.log(0 === '0'); # false\nconsole.log(10 + 2 + \"9\") # 129\nconsole.log(NAN === NAN) # false<\/code><\/pre>\n\n\n\n# How to access variable x (which is outside function) in function test?\nx = 10;\nfunction test(){\n let x = 20;\n console.log(this.x); # 10, accessed global variable x using this.\n console.log(x); # 20, local variable x\n}<\/code><\/pre>\n\n\n\nlet x=1;\ny = x++; # At this point: x=1, y=1\nconsole.log(x,y); # 2, 1 \n# Note: ++ operator first assigns existing value, then increases by one, so assign 1 to y and becomes 2 in next console.log statement)<\/code><\/pre>\n\n\n\nconsole.log(a); var a = 10;<\/code>?<\/p>\n\n\n\n<\/ol>\n\n\n\n
undefined<\/code>. The declaration var a<\/code> is hoisted to the top and initialized as undefined, but the assignment 10 stays in place.<\/p>\n\n\n\nconsole.log(b); let b = 10;<\/code>?<\/p>\n\n\n\nReferenceError<\/code>. Unlike\u00a0var<\/code>,\u00a0let<\/code>\u00a0and\u00a0const<\/code>\u00a0variables are hoisted but not initialized, placing them in a “temporal dead zone” until the declaration is reached.<\/p>\n\n\n\n(function() {\nvar x = y = 5;\n})();\nconsole.log(typeof x);\nconsole.log(typeof y);<\/code><\/pre>\n\n\n\nundefined<\/code>\u00a0and\u00a0number<\/code>.\u00a0y<\/code>\u00a0becomes a global variable because it is not declared with\u00a0var<\/code>, while\u00a0x<\/code>\u00a0is local to the function scope.<\/p>\n\n\n\nfor (var i = 0; i < 3; i++) {\n setTimeout(() => console.log(i), 1000);\n}\n<\/code><\/pre>\n\n\n\n3 3 3<\/code>. Because\u00a0var<\/code>\u00a0is function-scoped, all callbacks share the same\u00a0i<\/code>, which is\u00a03<\/code>\u00a0by the time they run. Using\u00a0let<\/code>\u00a0fixes this by creating a new binding for each iteration.<\/p>\n\n\n\nsetTimeout(() => console.log('timeout'), 0);\nPromise.resolve().then(() => console.log('promise'));\n<\/code><\/pre>\n\n\n\n\n
0 == '0'<\/code>\u00a0return\u00a0true<\/code>, but\u00a00 === '0'<\/code>\u00a0return\u00a0false<\/code>?<\/li>\n<\/ol>\n\n\n\n==<\/code>\u00a0performs\u00a0implicit type coercion<\/strong>\u00a0to make types match before comparing, while\u00a0===<\/code>\u00a0checks both value and type.<\/p>\n\n\n\n10 + 2 + \"9\"<\/code>?<\/p>\n\n\n\n\"129\"<\/code>. JavaScript adds the first two numbers (12<\/code>) and then concatenates the result with the string\u00a0\"9\"<\/code>.<\/p>\n\n\n\nconsole.log(NaN === NaN)<\/code>?<\/p>\n\n\n\nfalse<\/code>.\u00a0NaN<\/code>\u00a0(Not-a-Number) is the only value in JavaScript that is not equal to itself.<\/p>\n\n\n\n
\n\n\n\nDetailed Notes and Examples<\/h2>\n\n\n\n
use strict<\/h3>\n\n\n\n
\"use strict\"<\/code><\/strong>\u00a0is\u00a0a directive introduced in ECMAScript 5 (ES5) that enables\u00a0Strict Mode<\/strong>, a restricted variant of JavaScript. It is designed to catch common coding mistakes, improve security, and allow JavaScript engines to perform better optimizations by eliminating some of the language’s “sloppy” behaviors.\u00a0<\/p>\n\n\n\n