what is the output? #challange

!a.challanges.js

/*
js challanges
*/

challange1.js

// https://www.linkedin.com/posts/ahmadbshaik_what-is-the-output-activity-6864242914600611841-z1J9

var i = 5;

for(var i=0; i<10; i++){
  for(var i = 10; i> -1; i--){
    console.log(i)
  }
}

console.log(i);

challange2.js

// https://www.linkedin.com/feed/update/urn:li:activity:6877276426777837570/

// Junior React developer interview question:

// What will be the number displayed on each click and why?


import { useState } from 'react';

const App = () => {
  const [numbers, setNumbers] = useState(0);
  
  const addToNumbers = () => {
    setNumbers(prev => prev + 3);
    setNumbers(prev => prev - 4);
    setNumbers(prev => prev + 1);
  };
  
  return (
    <div className="App">
      <button onClick={addToNumbers}></button>
    {numbers}
    </div>
  )
};

export default App;

challange3.js

// What is the Output of the code?

// https://www.linkedin.com/posts/subhrajita-garnayak_javascript-javascriptdevelopers-javascripttutorial-activity-6936895454836060161-U1s2

let result = 0;

for(let i=0; i<5; i++){
  result += i;
}

console.log(result)

challange4.js

// Javascript Question: What are Undeclared Variables?

// Undeclared variables are created when you assign a value to an 
// identifier that is not previously created using var, let, or const. 
// Undeclared variables will be defined globally, outside of the current scope.

function foo () {
  x = 1; // Throws a reference error in strict mode !
}

foo ();
console.log(x); // 1

challange6.js

// https://www.linkedin.com/feed/update/urn:li:activity:7007944101086040064?utm_source=share&utm_medium=member_desktop

[1,2,3].map(num => {
    if(typeof num === 'number') return;
    return num * 2;
});

// A) []
// B) [null, null, null]
// C) [undefined, undefined, undefined] --- > 
// D) [3 x empty]

challenge4.js

// What are Pure Components in react?

/*

https://blog.logrocket.com/what-are-react-pure-functional-components/#:~:text=A%20React%20component%20is%20considered,are%20treated%20as%20pure%20components.

Based on the concept of purity in functional programming paradigms, a function is said 
to be pure if it meets the following two conditions:

Its return value is only determined by its input values
Its return value is always the same for the same input values

A React component is considered pure if it renders the same output for the same state and props. 
For this type of class component, React provides the PureComponent base class. Class components 
that extend the React.PureComponent class are treated as pure components.

Pure components have some performance improvements and render optimizations since React
implements the shouldComponentUpdate() method for them with a shallow comparison for props and state.
*/



/*
How does a pure component work in React?
In practice, a React pure component looks like the following code:
*/

class PercentageStat extends React.PureComponent {

  render() {
    const { label, score = 0, total = Math.max(1, score) } = this.props;

    return (
      <div>
        <h6>{ label }</h6>
        <span>{ Math.round(score / total * 100) }%</span>
      </div>
    )
  }

}

export default PercentageStat;


/* Are React functional components pure?
Functional components are very useful in React, especially when you want to isolate state management 
from the component. That’s why they are often called stateless components.

However, functional components cannot leverage the performance improvements and render optimizations
that come with React.PureComponent since by definition, they are not classes.

If you want React to treat a functional component as a pure component, you’ll have to convert the 
functional component to a class component that extends React.PureComponent.
*/

//Check out the simple example below:

// FUNCTIONAL COMPONENT
function PercentageStat({ label, score = 0, total = Math.max(1, score) }) {
  return (
    <div>
      <h6>{ label }</h6>
      <span>{ Math.round(score / total * 100) }%</span>
    </div>
  )
}


// CONVERTED TO PURE COMPONENT
class PercentageStat extends React.PureComponent {

  render() {
    const { label, score = 0, total = Math.max(1, score) } = this.props;

    return (
      <div>
        <h6>{ label }</h6>
        <span>{ Math.round(score / total * 100) }%</span>
      </div>
    )
  }
}

/*
Using the { pure } HOC from Recompose
Optimizing a functional component so that React can treat it as a pure component 
shouldn’t necessarily require that you convert the component to a class component.

The Recompose package provides a broad collection of higher-order components (HOCs) 
that are very useful for dealing with functional components. The Recompose package 
exports a [{ pure }] HOC that tries to optimize a React component by preventing updates 
on the component unless a prop has changed, using shallowEqual() to test for changes.

Using the pure HOC, our functional component can be wrapped as follows:
*/

import React from 'react';
import { pure } from 'recompose';

function PercentageStat({ label, score = 0, total = Math.max(1, score) }) {
  return (
    <div>
      <h6>{ label }</h6>
      <span>{ Math.round(score / total * 100) }%</span>
    </div>
  )
}

// Wrap component using the `pure` HOC from recompose
export default pure(PercentageStat);

challenge5.js

// https://www.linkedin.com/posts/jayesh-choudhary-72444518b_javascriptdaily-javascript-developer-activity-6986178125109817345-G4iW?utm_source=share&utm_medium=member_desktop

// what is the output?

var length = 4;

function callback(){
  console.log(this.length);
}

const object = {
  length: 5,
  method: function () {
    arguments[0]();
  },
};

object.method(callback, 2, 3);