var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var i in e)o(r,i,{get:e[i],enumerable:!0})},l=(r,e,i,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!m.call(r,t)&&t!==i&&o(r,t,{get:()=>e[t],enumerable:!(c=p(e,t))||c.enumerable});return r};var y=(r,e,i)=>(i=r!=null?h(g(r)):{},l(e||!r||!r.__esModule?o(i,"default",{value:r,enumerable:!0}):i,r)),v=r=>l(o({},"__esModule",{value:!0}),r);var s=f((M,a)=>{a.exports=_jsx_runtime});var P={};b(P,{author:()=>E,category:()=>N,createdAt:()=>S,default:()=>I,description:()=>j,frontmatter:()=>T,level:()=>x,published:()=>O,series:()=>A,tags:()=>k,title:()=>w});var n=y(s()),w="Basic JavaScript Interview Questions and Answers For Freshers",j="Brush up on fundamental JavaScript skills with these essential interview questions and answers. Perfect for freshers preparing for junior developer roles.",k=["javascript","interviews"],x="starter",S="2024-10-05",E="blog/author/nitesh-seram.json",N="blog/category/front-end-interviews.json",A="blog/series/beginner-interview-questions.json",O=!0,T={title:"Basic JavaScript Interview Questions and Answers For Freshers",description:"Brush up on fundamental JavaScript skills with these essential interview questions and answers. Perfect for freshers preparing for junior developer roles.",tags:["javascript","interviews"],level:"starter",createdAt:new Date(17280864e5),author:"blog/author/nitesh-seram.json",category:"blog/category/front-end-interviews.json",series:"blog/series/beginner-interview-questions.json",published:!0};function d(r){let e=Object.assign({p:"p",h2:"h2",code:"code",strong:"strong",pre:"pre",h3:"h3",ul:"ul",li:"li",ol:"ol",h4:"h4"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"JavaScript is a fundamental skill for any aspiring web developer, and landing a job in this field can be a challenging task, especially for freshers. One of the most crucial steps in the interview process is the technical interview, where your JavaScript skills are put to the test. To help you prepare and boost your confidence, we've compiled a list of the top 50 basic JavaScript interview questions and answers that are commonly asked in interviews."}),` `,(0,n.jsx)(e.h2,{children:'1. Explain the concept of "hoisting" in JavaScript'}),` `,(0,n.jsxs)(e.p,{children:["Hoisting describes the behavior of variable declarations in JavaScript. Declarations using ",(0,n.jsx)(e.code,{children:"var"}),' are "moved" to the top of their scope during compilation. Only the declaration is hoisted, not the initialization.']}),` `,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:["Example with ",(0,n.jsx)(e.code,{children:"var"}),":"]})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`console.log(foo); // undefined var foo = 1; console.log(foo); // 1 `})}),` `,(0,n.jsx)(e.p,{children:"Visualized as:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`var foo; console.log(foo); // undefined foo = 1; console.log(foo); // 1 `})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:["Variables with ",(0,n.jsx)(e.code,{children:"let"}),", ",(0,n.jsx)(e.code,{children:"const"}),", and ",(0,n.jsx)(e.code,{children:"class"}),":"]})}),` `,(0,n.jsxs)(e.p,{children:["These are also hoisted but not initialized. Accessing them before declaration results in a ",(0,n.jsx)(e.code,{children:"ReferenceError"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`console.log(y); // ReferenceError: Cannot access 'y' before initialization let y = 'local'; console.log(z); // ReferenceError: Cannot access 'z' before initialization const z = 'local'; console.log(Foo); // ReferenceError: Cannot access 'Foo' before initialization class Foo { constructor() {} } `})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Function Expressions:"})}),` `,(0,n.jsx)(e.p,{children:"Only the declaration is hoisted."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`console.log(bar); // undefined bar(); // Uncaught TypeError: bar is not a function var bar = function () { console.log('BARRRR'); }; `})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Function Declarations:"})}),` `,(0,n.jsx)(e.p,{children:"Both declaration and definition are hoisted."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`console.log(foo); // [Function: foo] foo(); // 'FOOOOO' function foo() { console.log('FOOOOO'); } `})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Import Statements:"})}),` `,(0,n.jsx)(e.p,{children:"Imports are hoisted, making them available throughout the module, with side effects occurring before other code runs."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`foo.doSomething(); // Works normally. import foo from './modules/foo'; `})}),` `,(0,n.jsxs)(e.h2,{children:["2. What are the differences between JavaScript variables created using\xA0",(0,n.jsx)(e.code,{children:"let"}),",\xA0",(0,n.jsx)(e.code,{children:"var"}),"\xA0or\xA0",(0,n.jsx)(e.code,{children:"const"}),"?"]}),` `,(0,n.jsx)(e.h3,{children:"Scope"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"var"})}),": Function-scoped or globally scoped."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:"let"})," and ",(0,n.jsx)(e.code,{children:"const"})]}),": Block-scoped (only accessible within the nearest set of curly braces)."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"Example:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`function foo() { var bar = 1; let baz = 2; const qux = 3; console.log(bar); // 1 console.log(baz); // 2 console.log(qux); // 3 } console.log(bar); // ReferenceError console.log(baz); // ReferenceError console.log(qux); // ReferenceError `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`if (true) { var bar = 1; let baz = 2; const qux = 3; } console.log(bar); // 1 console.log(baz); // ReferenceError console.log(qux); // ReferenceError `})}),` `,(0,n.jsx)(e.h3,{children:"Initialization"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:"var"})," and ",(0,n.jsx)(e.code,{children:"let"})]}),": Can be declared without an initial value."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"const"})}),": Must be initialized at the time of declaration."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"Example:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`var foo; // Ok let bar; // Ok const baz; // SyntaxError `})}),` `,(0,n.jsx)(e.h3,{children:"Redeclaration"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"var"})}),": Allows redeclaration."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:"let"})," and ",(0,n.jsx)(e.code,{children:"const"})]}),": Do not allow redeclaration."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"Example:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`var foo = 1; var foo = 2; // Ok let baz = 3; let baz = 4; // SyntaxError `})}),` `,(0,n.jsx)(e.h3,{children:"Reassignment"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:"var"})," and ",(0,n.jsx)(e.code,{children:"let"})]}),": Allow reassignment."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"const"})}),": Does not allow reassignment."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"Example:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`var foo = 1; foo = 2; // Ok let bar = 3; bar = 4; // Ok const baz = 5; baz = 6; // TypeError `})}),` `,(0,n.jsx)(e.h3,{children:"Accessing before declaration"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:"var"})}),": Variables are hoisted and initialized to ",(0,n.jsx)(e.code,{children:"undefined"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:"let"})," and ",(0,n.jsx)(e.code,{children:"const"})]}),": Variables are hoisted but not initialized, causing a ",(0,n.jsx)(e.code,{children:"ReferenceError"})," if accessed before declaration."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"Example:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`console.log(foo); // undefined var foo = 'foo'; console.log(baz); // ReferenceError let baz = 'baz'; console.log(bar); // ReferenceError const bar = 'bar'; `})}),` `,(0,n.jsxs)(e.h2,{children:["3. What is the difference between ",(0,n.jsx)(e.code,{children:"=="})," and ",(0,n.jsx)(e.code,{children:"==="})," in JavaScript?"]}),` `,(0,n.jsxs)(e.h3,{children:["Equality Operator (",(0,n.jsx)(e.code,{children:"=="}),")"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Performs type coercion, converting values to a common type before comparison."}),` `,(0,n.jsx)(e.li,{children:"Can yield unintuitive results due to type conversion."}),` `]}),` `,(0,n.jsx)(e.p,{children:"Examples:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`42 == '42'; // true 0 == false; // true null == undefined; // true [] == false; // true '' == false; // true `})}),` `,(0,n.jsxs)(e.p,{children:["###Strict Equality Operator (",(0,n.jsx)(e.code,{children:"==="}),")"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Does not perform type coercion."}),` `,(0,n.jsxs)(e.li,{children:["Both value and type must be the same for the comparison to return ",(0,n.jsx)(e.code,{children:"true"}),"."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"Examples:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`42 === '42'; // false 0 === false; // false null === undefined; // false [] === false; // false '' === false; // false `})}),` `,(0,n.jsx)(e.h3,{children:"Best Practices"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:["Use ",(0,n.jsx)(e.code,{children:"=="})," only when comparing against ",(0,n.jsx)(e.code,{children:"null"})," or ",(0,n.jsx)(e.code,{children:"undefined"})," for convenience."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`var a = null; console.log(a == null); // true console.log(a == undefined); // true `})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:["Prefer ",(0,n.jsx)(e.code,{children:"==="})," for all other comparisons to avoid pitfalls of type coercion and ensure both value and type are the same."]}),` `]}),` `]}),` `,(0,n.jsx)(e.h2,{children:"4. What is the event loop in JavaScript?"}),` `,(0,n.jsx)(e.p,{children:"The event loop is crucial for handling asynchronous operations in JavaScript, allowing single-threaded execution without blocking."}),` `,(0,n.jsx)(e.h3,{children:"Components"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"1. Call Stack:"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Tracks function execution in LIFO order."}),` `,(0,n.jsx)(e.li,{children:"Functions are added and removed as they are called and complete."}),` `]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"2. Web APIs/Node.js APIs:"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Handle asynchronous tasks (",(0,n.jsx)(e.code,{children:"setTimeout()"}),", HTTP requests) on separate threads."]}),` `]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"3. Task Queue (Macrotask Queue):"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Holds tasks like ",(0,n.jsx)(e.code,{children:"setTimeout()"}),", ",(0,n.jsx)(e.code,{children:"setInterval()"}),", and UI events."]}),` `]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"4. Microtask Queue:"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Contains high-priority tasks (e.g., ",(0,n.jsx)(e.code,{children:"Promise"})," callbacks)."]}),` `,(0,n.jsx)(e.li,{children:"Executes after the current script but before the next macrotask."}),` `]}),` `,(0,n.jsx)(e.h3,{children:"Execution Order"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Script Execution:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Synchronous tasks are placed on the call stack."}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Asynchronous Operations:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Offloaded to Web APIs/Node.js APIs."}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Task Completion:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Completed tasks are queued in the appropriate task or microtask queue."}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Event Loop Monitoring:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Executes tasks from the call stack."}),` `,(0,n.jsxs)(e.li,{children:["When the stack is empty:",` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Processes the microtask queue until empty."}),` `,(0,n.jsx)(e.li,{children:"Processes one macrotask, then checks the microtask queue again."}),` `,(0,n.jsx)(e.li,{children:"Repeats indefinitely."}),` `]}),` `]}),` `]}),` `]}),` `]}),` `,(0,n.jsx)(e.h3,{children:"Example"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`console.log('Start'); setTimeout(() => { console.log('Timeout 1'); }, 0); Promise.resolve().then(() => { console.log('Promise 1'); }); setTimeout(() => { console.log('Timeout 2'); }, 0); console.log('End'); `})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Console Output:"})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-bash",children:`Start End Promise 1 Timeout 1 Timeout 2 `})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Explanation:"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"Start"})," and ",(0,n.jsx)(e.code,{children:"End"})," are logged first (synchronous)."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"Promise 1"})," is logged next (microtask)."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"Timeout 1"})," and ",(0,n.jsx)(e.code,{children:"Timeout 2"})," are logged last (macrotasks)."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"Understanding the event loop helps write efficient, non-blocking JavaScript code."}),` `,(0,n.jsx)(e.h2,{children:"5. Explain event delegation in JavaScript"}),` `,(0,n.jsx)(e.p,{children:"Event delegation is an efficient way to handle events on multiple child elements by attaching a single event listener to a common parent element. This is useful for managing events on many similar elements, like list items."}),` `,(0,n.jsx)(e.h3,{children:"How Event Delegation Works"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Attach Listener to Ancestor:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Attach one listener to a parent element instead of individual listeners on each child."}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Event Bubbling:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"When an event occurs on a child, it bubbles up to the parent, where the listener can handle it."}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Determine the Target:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Use ",(0,n.jsx)(e.code,{children:"event.target"})," to identify the actual element that triggered the event."]}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Perform Action:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Execute actions based on the target element."}),` `]}),` `]}),` `]}),` `,(0,n.jsx)(e.h3,{children:"Benefits of Event Delegation"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Efficiency:"})," Fewer event listeners improve memory and performance."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Dynamic Elements:"})," Automatically handles new or removed child elements."]}),` `]}),` `,(0,n.jsx)(e.h3,{children:"Example"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`// HTML: //

Item 1
Item 2
Item 3

const itemList = document.getElementById('item-list'); itemList.addEventListener('click', (event) => { if (event.target.tagName === 'LI') { console.log(\`Clicked on \${event.target.textContent}\`); } }); `})}),` `,(0,n.jsxs)(e.p,{children:["A single click listener on ",(0,n.jsx)(e.code,{children:"

"})," due to event bubbling."]}),` `,(0,n.jsx)(e.h3,{children:"Use Cases"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Dynamic Content:"})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`const buttonContainer = document.getElementById('button-container'); const addButton = document.getElementById('add-button'); buttonContainer.addEventListener('click', (event) => { if (event.target.tagName === 'BUTTON') { console.log(\`Clicked on \${event.target.textContent}\`); } }); addButton.addEventListener('click', () => { const newButton = document.createElement('button'); newButton.textContent = \`Button \${buttonContainer.children.length + 1}\`; buttonContainer.appendChild(newButton); }); `})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Simplifying Code:"})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`const userForm = document.getElementById('user-form'); userForm.addEventListener('input', (event) => { const { name, value } = event.target; console.log(\`Changed \${name}: \${value}\`); }); `})}),` `]}),` `]}),` `,(0,n.jsxs)(e.h2,{children:["6. Explain how ",(0,n.jsx)(e.code,{children:"this"})," works in JavaScript"]}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"this"})," keyword in JavaScript can be quite confusing as its value depends on how a function is called. Here are the main rules that determine the value of ",(0,n.jsx)(e.code,{children:"this"}),":"]}),` `,(0,n.jsxs)(e.h3,{children:["1. Using the ",(0,n.jsx)(e.code,{children:"new"})," Keyword"]}),` `,(0,n.jsxs)(e.p,{children:["Creates a new object and sets ",(0,n.jsx)(e.code,{children:"this"})," to that object."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function Person(name) { this.name = name; } const person = new Person('Alice'); console.log(person.name); // 'Alice `})}),` `,(0,n.jsxs)(e.h3,{children:["2. Using ",(0,n.jsx)(e.code,{children:"apply"}),", ",(0,n.jsx)(e.code,{children:"call"}),", or ",(0,n.jsx)(e.code,{children:"bind"})]}),` `,(0,n.jsxs)(e.p,{children:["Explicitly sets ",(0,n.jsx)(e.code,{children:"this"})," to a specified object."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`javascriptCopy code function greet() { console.log(this.name); } const person = { name: 'Alice' }; greet.call(person); // 'Alice' `})}),` `,(0,n.jsx)(e.h3,{children:"3. Method Call"}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"this"})," is bound to the object the method is called on."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`const obj = { name: 'Alice', greet: function () { console.log(this.name); }, }; obj.greet(); // 'Alice' `})}),` `,(0,n.jsx)(e.h3,{children:"4. Free Function Invocation"}),` `,(0,n.jsxs)(e.p,{children:["In non-strict mode, defaults to the global object (",(0,n.jsx)(e.code,{children:"window"})," in browsers); in strict mode, defaults to ",(0,n.jsx)(e.code,{children:"undefined"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function greet() { console.log(this); // global object or undefined } greet(); `})}),` `,(0,n.jsx)(e.h3,{children:"5. Arrow Functions (ES6):"}),` `,(0,n.jsxs)(e.p,{children:["Inherit ",(0,n.jsx)(e.code,{children:"this"})," from their lexical enclosing scope."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`const obj = { name: 'Alice', greet: () => { console.log(this.name); // \`this\` refers to the enclosing scope }, }; obj.greet(); // undefined `})}),` `,(0,n.jsxs)(e.h3,{children:["ES2015 (ES6) and ",(0,n.jsx)(e.code,{children:"this"})]}),` `,(0,n.jsxs)(e.p,{children:["ES2015 introduced arrow functions which capture ",(0,n.jsx)(e.code,{children:"this"})," from their lexical scope. This can simplify code but requires caution when integrating with libraries expecting traditional function context."]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Example:"})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`function Timer() { this.seconds = 0; setInterval(() => { this.seconds++; // \`this\` refers to the Timer instance console.log(this.seconds); }, 1000); } const timer = new Timer(); `})}),` `,(0,n.jsxs)(e.h2,{children:["7. Describe the difference between a cookie, ",(0,n.jsx)(e.code,{children:"sessionStorage"})," and ",(0,n.jsx)(e.code,{children:"localStorage"}),"."]}),` `,(0,n.jsx)(e.p,{children:"Cookies, localStorage, and sessionStorage are key client-side storage mechanisms in web applications, each serving distinct purposes:"}),` `,(0,n.jsx)(e.h3,{children:"Cookies"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Purpose"}),": Stores small data pieces sent to the server with HTTP requests."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Capacity"}),": Limited to around 4KB per domain."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Lifespan"}),": Can have expiration dates; session cookies are cleared when the browser closes."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Access"}),": Domain-specific; accessible across pages and subdomains."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Security"}),": Supports HttpOnly and Secure flags to restrict JavaScript access and ensure HTTPS transmission."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Example Usage"}),":"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`// Set a cookie with an expiry document.cookie = 'auth_token=abc123def; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/'; // Read all cookies (no direct method for specific cookies) console.log(document.cookie); // Delete a cookie document.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'; `})}),` `]}),` `]}),` `,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:"localStorage"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Purpose"}),": Stores data persistently on the client-side."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Capacity"}),": Around 5MB per origin."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Lifespan"}),": Data remains until explicitly cleared."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Access"}),": Available across all tabs and windows within the same origin."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Security"}),": All JavaScript on the page can access localStorage values."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Example Usage"}),":"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`// Set an item in localStorage localStorage.setItem('key', 'value'); // Get an item from localStorage console.log(localStorage.getItem('key')); // Remove an item from localStorage localStorage.removeItem('key'); // Clear all data in localStorage localStorage.clear(); `})}),` `]}),` `]}),` `,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:"sessionStorage"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Purpose"}),": Stores session-specific data that persists until the browser or tab is closed."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Capacity"}),": Similar to localStorage, around 5MB per origin."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Lifespan"}),": Cleared when the tab or browser closes; reloading the page retains data."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Access"}),": Limited to the current tab or window."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Security"}),": All JavaScript on the page can access sessionStorage values."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Example Usage"}),":"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`// Set an item in sessionStorage sessionStorage.setItem('key', 'value'); // Get an item from sessionStorage console.log(sessionStorage.getItem('key')); // Remove an item from sessionStorage sessionStorage.removeItem('key'); // Clear all data in sessionStorage sessionStorage.clear(); `})}),` `]}),` `]}),` `,(0,n.jsxs)(e.h2,{children:["8. Describe the difference between ",(0,n.jsx)(e.code,{children:"

5 Bobject 20 Object 5 D

Blogs List

No articles