### Q1: Refactor the following code using best practices:
```js
function getUserDetails(user) {
  if (user) {
    if (user.name) {
      console.log('User Name: ' + user.name);
    } else {
      console.log('No name provided');
    }
    if (user.age) {
      console.log('User Age: ' + user.age);
    } else {
      console.log('No age provided');
    }
  } else {
    console.log('No user object provided');
  }
}
```

### Q2: Refactor the following code to use the reduce method instead of a for loop:
```js
function sumArray(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}
```

### Q3

```Javascript
function mul (x) {
  return function (y) { // anonymous function
    return function (z) { // anonymous function
      return x * y * z;
    };
  };
}
```

### Q4

debouncing is a technique used to control how many times we allow a function to be executed over time. When a JavaScript function is debounced with a wait time of X milliseconds, it must wait until after X milliseconds have elapsed since the debounced function was last called. You almost certainly have encountered debouncing in your daily lives before — when entering an elevator. Only after X duration of not pressing the "Door open" button (the debounced function not being called) will the elevator door actually close (the callback function is executed).

Implement a debounce function which accepts a callback function and a wait duration. Calling debounce() returns a function which has debounced invocations of the callback function following the behavior described above.


<details>
<summary><b>Solution</b></summary>

```Ts
let i = 0;
function increment() {
  i++;
}
const debouncedIncrement = debounce(increment, 100);

 

// t = 0: Call debouncedIncrement().
debouncedIncrement(); // i = 0

 

// t = 50: i is still 0 because 100ms have not passed.
//  Call debouncedIncrement() again.
debouncedIncrement(); // i = 0

 

// t = 100: i is still 0 because it has only
//  been 50ms since the last debouncedIncrement() at t = 50.

 

// t = 150: Because 100ms have passed since
//  the last debouncedIncrement() at t = 50,
//  increment was invoked and i is now 1 .
```
  
  </details>
  
  ### Q5

Build a tabs component that displays one panel of content at a time depending on the active tab element. Some HTML is provided for you as example contents.

Requirements
Clicking on a tab makes it the active tab. Add a visual indication (e.g. using blue text color) for the active tab to differentiate it from the non-active tabs.
At all times, only one panel's contents should be displayed — the one corresponding to the active tab's.
Notes
The focus of this question is on functionality, not the styling. There's no need to write any custom CSS except for highlighting the active tab.
You may modify the markup (e.g. adding ids, data attributes, replacing some tags, etc) and use client-side rendering instead.
You may want to think about ways to improve the user experience of the application and implement them

<details>
<summary><b>Solution</b></summary>
  
```TS
export default function Tabs() {

  return (

    <div>

      <div>

        <button>HTML</button>

        <button>CSS</button>

        <button>JavaScript</button>

      </div>

      <div>

        <p>

          The HyperText Markup Language or HTML is the

          standard markup language for documents designed to

          be displayed in a web browser.

        </p>

        <p>

          Cascading Style Sheets is a style sheet language

          used for describing the presentation of a document

          written in a markup language such as HTML or XML.

        </p>

        <p>

          JavaScript, often abbreviated as JS, is a

          programming language that is one of the core

          technologies of the World Wide Web, alongside HTML

          and CSS.

        </p>

      </div>

    </div>

  );

}
```
</details>