Javascript Questions

    const person = { name: 'Alice' };

    function greet(greeting) {
      console.log(`${greeting}, ${this.name}!`);
    }

    greet.call(person, 'Hello'); // Output: Hello, Alice!
    greet.apply(person, ['Hi']); // Output: Hi, Alice!

    const greetBound = greet.bind(person);
    greetBound('Hey'); // Output: Hey, Alice!

In JavaScript, `let`, `const`, and `var` are used to declare variables. Each has different scoping rules and reassignment capabilities, making them suitable for different use cases.

  #### 1. **`var`**:
    - `var` was traditionally used to declare variables in JavaScript.
    - Variables declared with `var` are function-scoped, meaning they are only accessible within the function they are declared in.
    - Variables declared with `var` can be redeclared and updated.

    ```javascript
    function exampleVar() {
      var x = 10;
      if (true) {
        var x = 20;  // This reassigns the existing variable 'x'
        console.log(x);  // Output: 20
      }
      console.log(x);  // Output: 20 (not 10)
    }
    ```

  #### 2. **`let`**:
    - Introduced in ES6, `let` allows block-scoping of variables, making them accessible only within the block they are defined in (e.g., if, for, while blocks).
    - Variables declared with `let` can be reassigned but cannot be redeclared in the same scope.

    ```javascript
    function exampleLet() {
      let y = 30;
      if (true) {
        let y = 40;  // This creates a new block-scoped variable 'y'
        console.log(y);  // Output: 40
      }
      console.log(y);  // Output: 30 (not affected by the inner 'y')
    }
    ```

  #### 3. **`const`**:
    - Also introduced in ES6, `const` is used to declare constants whose values cannot be reassigned.
    - Variables declared with `const` are block-scoped like `let`.
    - A `const` variable must be assigned a value during declaration and cannot be left uninitialized.

    ```javascript
    function exampleConst() {
      const z = 50;
      // z = 60;  // Error: Assignment to a constant variable
      console.log(z);  // Output: 50
    }
    ```

  In summary:
    - Use `var` for traditional function-scoped variables (but it's recommended to use `let` and `const` in modern JavaScript).
    - Use `let` when you need to reassign a variable's value within the same block.
    - Use `const` when you want to define a constant value that should not be reassigned.

    It's good practice to use `let` and `const` over `var` for better scoping and to avoid potential issues related to hoisting and unintended variable reassignment.

   function outer() {
     const message = 'Hello';
     function inner() {
       console.log(message);
     }
     return inner;
   }

   const innerFunc = outer();
   innerFunc();  // Output: 'Hello'

#### 1. **`async`**:
  - `async` is used to declare that a function will work with promises and may use `await` within its body.
  - It allows a function to return a promise implicitly.
  - Functions marked with `async` always return a promise, even if you return a non-promise value.

  ```javascript
  async function asyncFunction() {
    return 42; // Equivalent to returning Promise.resolve(42)
  }
  ```

#### 2. **`await`**:
  - `await` can only be used within an `async` function.
  - It is used to pause the execution of the function until a promise is resolved or rejected.
  - It "awaits" the result of a promise and returns the resolved value or throws an error for a rejected promise.

  ```javascript
  async function fetchUserData() {
    try {
      const response = await fetch('https://api.example.com/user');
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('Error:', error);
    }
  }
  ```

#### 3. **Difference from `.then()`**:
- While both `await` and `.then()` handle asynchronous operations, the key difference lies in how they manage the flow of asynchronous code.
- `.then()` is used with promises and is chaining-based, where each `.then()` function returns a promise and allows you to chain further operations.
- `await`, on the other hand, allows for more synchronous-like code within `async` functions, making asynchronous code appear more linear and readable.

```javascript
// Using .then()
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Using await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}
```

In summary, `async` and `await` make asynchronous code look and behave more like synchronous code, enhancing readability and maintainability, especially when dealing with promises.

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve('Promise resolved!');
     }, 2000);
   });

   myPromise.then((result) => {
     console.log(result);
   }).catch((error) => {
     console.error(error);
   });

   function fetchData(callback) {
     setTimeout(() => {
       callback('Data fetched!');
     }, 2000);
   }

   fetchData((data) => {
     console.log(data);
   });

*Answer:*
`null` is an assignment value representing no value or no object, while `undefined` is a primitive value automatically assigned to uninitialized variables.

*Answer:*
Event bubbling is the propagation of an event from the target element up to its parent and higher ancestors in the DOM tree.

Description: event.preventDefault() is used to prevent the default behavior of an event, such as form submission or link navigation.

*Answer:*

```js
const submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click', event => {
  event.preventDefault(); // Prevents form submission
  console.log('Form submission prevented.');
});
```

*Answer:*

```javascript
const add = (a, b) => a + b;
console.log(add(2, 3));  // Output: 5
```

*Answer:*
They provide a way to store key-value pairs in a web browser, with `localStorage` persisting even after the browser is closed and reopened, and `sessionStorage` existing only for the duration of the page session.

*Answer:*

```javascript
const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
});
```

*Answer:* `map()` returns a new array with the results of a function applied to each element, while `forEach()` only iterates over the array and does not return a new array.

*Answer:*

```javascript
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
```

The "use strict" directive in JavaScript is used to enable a stricter interpretation of the code, catching common mistakes and preventing the use of certain error-prone features. When this directive is applied, the JavaScript engine enforces stricter rules for writing code.

#### 1. Purpose:
  - It helps in writing more reliable and maintainable code by identifying and disallowing potentially error-prone behavior.
  - It prevents the accidental creation of global variables by enforcing block scope rules with `let` and `const`.
  - It disallows the use of certain language features that are deprecated or considered bad practice.

#### 2. Example:

  ```javascript
  // Without "use strict"
  function withoutStrict() {
    variable = 10;  // This will create a global variable accidentally
    console.log(variable);
  }

  withoutStrict();  // Output: 10

  // With "use strict"
  function withStrict() {
    'use strict';
    variable = 20;  // This will throw a ReferenceError
    console.log(variable);
  }

  withStrict();  // Error: variable is not defined
  ```

  In the first example without "use strict," `variable` is mistakenly created as a global variable, which can lead to unexpected behavior and bugs in a larger codebase.

  In the second example with "use strict," attempting to assign a value to `variable` without declaring it with `var`, `let`, or `const` will throw a `ReferenceError`, indicating that `variable` is not defined. This helps catch potential bugs and encourages better coding practices.

  To enable "use strict" globally in a script, you can add it at the beginning of your JavaScript file or within a function. For modern JavaScript development, it's recommended to use "use strict" to enhance code quality and reduce the risk of errors.

*Answer:* 

- Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compile phase.

```js
console.log(x);  // Output: undefined
var x = 10;
console.log(x);  // Output: 10
```

*Answer:*

```javascript
try {
  // Code that may throw an error
  const result = 10 / 0;
  console.log(result);
} catch (error) {
  console.error('An error occurred:', error.message);
}
```