Javascript Basics

JS is a Client/Browser based programming language for display of dynamic UI content in the Browser.  

What is Scope in JS?

global, local, function

What is Hoisting in Javascript?

declarations are hoisted first and then usage and functions are executed so order does not matter

What is JSON?

Javascript Object Notation

What are variables? var vs let vs const.

var -> global scoped

let -> like java declaration to that local scope

const -> like static once declared and value assigned cannot be changed

Double equals == vs === Triple equals

== -> compares only value

=== -> compares value and type

what are Functions in JS? what are the types of functions?

block of code with a name and return type

types -> higher order functions, callback functions, arrow, anonymous

Higher order functions?

function pass callback function in arguments and callback in turn passes a function

what is the use of event handling in JS?

onclick, onmouseup, or any other event resulting in a function callback defined for event

what are First-Class functions in JS?

functions treated as variables

what is Function Currying in JS?

nested function s like a chain

what is DOM? what is the difference between HTML and DOM?

DOM code forms in browser after browser interprets all html code, variables inside html, call back, CSS and other special file types to display the website

HTML if file extension for writing website data

TypeCoerson - automatic conversion of values from one type to another 

let no = 55;

let no1 = "55";

let print = no+no1; (gives 5555)

In JavaScript, the order of operations (also known as operator precedence) follows the principles of BODMAS/BIDMAS (Brackets, Orders (powers and roots), Division and Multiplication, Addition and Subtraction).

let result = 5 + 2 * (3 ** 2) - 8 / 4; So, result is 21.

Event loop keeps JS running responsive by loading one after another in a single thread

event loop works this way:

• execute everything from bottom to top from the stack, and ONLY when the stack is empty, check what is going on in queues above
• check micro stack and execute everything there (if required) with help of stack, one micro-task after another until the microtask queue is empty or don't require any execution and ONLY then check the macro stack
• check macro stack and execute everything there (if required) with help of the stack

 Difference between Macrotask and Microtask

JS has three "stacks":

• standard stack for all synchronous calls ( one function calls another, etc)
• microtask queue (or job queue or microtask stack) for all async operations with higher priority ( process.nextTick, Promises, Object.observe, MutationObserver)
• macrotask queue (or event queue, task queue, macrotask queue) for all async operations with lower priority ( setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering)

List out the differences between map, filter, and reduce methods in JavaScript.

Map transforms elements, filter selects element and reduce combines elements. - Map returns same sized array, filter returns same/small sized array, reduce returns single value - map((val,index,arr)) - filter((val,index,arr)) - reduce((accumulator,val,index,arr)) - map is used for data transformation, filter for filtering and reduce for aggregation.

How promises and async await differ from each other? In which situation you should prefer async await over promises?

Promises and async/await are both used to handle asynchronous operations in JavaScript, but they have different syntax and ways of managing the flow of asynchronous code.

When to prefer async/await over Promises:

1. Readability: If you have a series of asynchronous operations, async/await can make your code easier to read and understand.

2. Error Handling: If you prefer using try...catch blocks for error handling, async/await integrates more naturally with this pattern.

3. Sequential Operations: When you need to perform asynchronous operations sequentially, async/await provides a more straightforward approach.

If your application is performing really slow, then what parameters would you consider to improve the performance?

When dealing with a slow JavaScript application, here are several key parameters and techniques you can consider to improve its performance:

1. Efficient DOM Manipulation:

   • Minimize Reflows/Repaints: Reduce the number of DOM manipulations and batch them together to minimize reflows and repaints.

   • Use Document Fragments: When making multiple changes to the DOM, use document fragments to make changes off-screen.

2. Optimize JavaScript Code:

   • Reduce Function Complexity: Break down complex functions into smaller, manageable pieces.

   • Minify and Compress: Use tools like UglifyJS or Terser to minify and compress your JavaScript code.

   • Avoid Blocking Scripts: Place scripts at the bottom of your HTML or use async or defer attributes to prevent blocking the rendering of the page.

3. Efficient Event Handling:

   • Event Delegation: Use event delegation to handle events efficiently, especially for dynamically added elements.

   • Throttle and Debounce: Implement throttling and debouncing to control the rate at which event handlers are executed.

4. Optimize Resource Loading:

   • Lazy Loading: Implement lazy loading for images and other resources to improve initial load times.

   • Code Splitting: Use code splitting to load only the necessary code for each page or component.

5. Caching:

   • Browser Caching: Leverage browser caching to store static assets locally.

   • Service Workers: Use service workers to cache resources and provide offline capabilities.

6. Memory Management:

   • Garbage Collection: Ensure proper memory management and avoid memory leaks.

   • Data Structures: Use efficient data structures and avoid unnecessary memory allocations.

7. Performance Monitoring:

   • Performance Tools: Use performance monitoring tools like Lighthouse, Chrome DevTools, or WebPageTest to identify bottlenecks and areas for improvement.

   • Profiling: Use JavaScript profilers to identify and address performance bottlenecks in your code.

8. Rendering Performance:

   • CSS Optimizations: Ensure efficient CSS usage and avoid complex selectors.

   • GPU Acceleration: Use GPU acceleration for animations and transitions to offload work from the CPU.

If you are stuck somewhere, what debugging techniques would you use to fix the bugs?

Debugging can be a bit like detective work—finding clues and piecing together what's going wrong. Here are some effective techniques for debugging JavaScript:

1. Console Logging:

   • Use console.log() to print variables and track the flow of your code.

   • Use console.error() for error messages and console.table() for displaying data in a table format.

2. Breakpoints:

   • Use browser developer tools (e.g., Chrome DevTools) to set breakpoints in your code.

   • Step through your code line by line to observe the execution and inspect variables.

3. Debugger Statement:

   • Insert the debugger statement in your code to pause execution at that point.

   • This automatically opens the developer tools and allows you to inspect the code.

4. Error Messages:

   • Pay attention to error messages in the console. They often provide useful information about what went wrong and where.

   • Look for stack traces to identify the source of the error.

5. Isolate the Problem:

   • Comment out sections of code to narrow down where the issue might be.

   • Create a minimal, reproducible example to isolate the problem.

6. Check Data Types:

   • Ensure that variables are of the expected type (e.g., strings, numbers, objects).

   • Use type-checking utilities or TypeScript to catch type-related errors.

7. Use Linters:

   • Use linters like ESLint to catch common errors and enforce coding standards.

   • Linters can help identify potential issues before they become bugs.

8. Read Documentation:

   • Refer to official documentation for JavaScript functions, libraries, and frameworks you're using.

   • Look up error codes and messages to understand their meaning.

9. Ask for Help:

   • Sometimes a fresh pair of eyes can spot something you missed. Don't hesitate to ask colleagues or community forums for help.

   • Use platforms like Stack Overflow to ask questions and find answers from the developer community.

10. Automated Tests:

• Write unit tests to ensure that your code behaves as expected.

• Use test frameworks like Jest or Mocha to automate testing and catch bugs early.