Have you ever used useContext and useReducer together in a React application? When I created a todo app, I initially used useContext, but I ended up double controlling the same state as both props and global state, which wasn't practical. So, I decided to refactor my code and started using useContext and useReducer instead. These hooks provide a powerful and flexible way to manage global state in a React application, without the need for prop drilling or duplicating state management logic so I will explain them. 

## What is useContext?
useContext is hook in React that allows you to access the value of a context directly in a functional component.
If you are not familiar with useContext, please check [my article](https://dev.to/yukio1o5/lets-use-context-api-in-place-of-prop-drilling-in-reactjs-3j8g)!

## What is useReducer?
useReducer is also hook in React that is used to manage state in a more complex and structured manner than the useState hook, by following the Redux pattern of state management.
In order to understand the concept of useReducer, we need to know Redux pattern of state management.

## What is Redux pattern of state management?
![alt text](https://paulonteri.com/images/thoughts/react-redux/reduxdataflowdiagram-49fa8c3968371d9ef6f2a1486bd40a26.gif "reduxdataflowdiagram")
[Reference](https://paulonteri.com/thoughts/react-redux) 

Here, you can imagine the State as your wallet. 
When you click the Deposit button, the action (which is to add $10 to your wallet) is executed, and then the action is dispatched to the Store (which is like a central repository for managing the state). 
The Reducer, which is a function inside the Store, receives the action and also gets the previous State (which is the information that your wallet has $0). 
The Reducer then calculates $0 + $10 and updates the State accordingly (which means you finally get $10 in your wallet).

## Benefit of using useContext and useReducer together:
* Provides a way to manage global state in a React application without the need for prop drilling or a state management library like Redux.
* Allows for a more structured and organized approach to state management with the use of reducers and actions, similar to Redux.
* Makes it easy to share state and state update functions across multiple components without having to pass them down as props.

## Example
Next, let's see the code which is using useContext and useReduder. I created simple count app. 

**App.jsx**
```javascript
import "./App.css";
import React, { createContext, useReducer } from "react";
import Counter from "./components/Counter";

// Create a context
export const MyContext = createContext();

// Define the reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// Define the initial state
const initialState = { count: 0 };

// Create a provider component
const MyContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
};

function App() {
  return (
    <div className="App">
      <MyContextProvider>
        <Counter />
      </MyContextProvider>
    </div>
  );
}

export default App;
```
Let's see the code one by one.
```javascript
const [state, dispatch] = useReducer(reducer, initialState);
```
Inside MyContextProvide component, I declared `useReducer` which takes two arguments: `reducer` function and `initialState`.
 ```javascript
const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const initialState = { count: 0 };
```
The `reducer` function is responsible for handling state updates based on the action objects dispatched to it. `action` is plain JavaScript objects that contain a `type` property to specify the action type and an optional `payload` property to carry additional data for the action. (Here, we do not declare `payload`.)
The `initialState` is the initial value of the state.
 ```javascript
const MyContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
};
```
Then MyContextProvider returns an array with two values: `state` and `dispatch` function. The `state` is the current value of the state managed by the reducer, and the `dispatch` function is used to dispatch actions to the reducer to trigger state updates.
`children` is a special prop in React that represents the child elements or components nested within a parent component. It is a common pattern used in React to pass down and render child components within a parent component.
In the `MyContextProvider` component, children is a prop that represents the child components that will be wrapped by the MyContextProvider. These child components will have access to the context values provided by MyContext.Provider, which includes the state and dispatch function in this case.

**Counter.jsx**
```javascript
import React from "react";
import { useContext } from "react";
import { MyContext } from "../App";

export default function Counter() {
  const { state, dispatch } = useContext(MyContext);
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
    </div>
  );
}
```
`useContext` hook to retrieve the state and dispatch values from the MyContext object. Two button elements with an onClick event handler that dispatches actions with a type of "INCREMENT" or "DECREMENT" when clicked. These actions are handled by a reducer in App.jsx that provides the MyContext object, and they are used to update the count value in the state managed by the context, resulting in the `Counter` component displaying an updated count value when the buttons are clicked.

## Conclusion

This approach can help eliminate the need for double controlling the same state as props and global state, making your codebase more efficient and easier to manage. It allows you to separate the concerns of state management from the UI components, making it easier to reason about and test your code. Overall, using useContext and useReducer together can provide a cleaner and more practical way to manage global state in your React application.


[Reference1](https://react.dev/reference/react/useReducer) 
[Reference2](https://ics.media/entry/200409/) 


Have you ever used useContext and useReducer together in a React application? When I created a todo...

useContext + useReducer = powerful and flexible way to manage global state!

Yuki Kasugai

Have you ever heard of Prop Drilling? For beginners of React.js learners, it is a need-to-know term.
When I created an App with React.js, I wanted to pass props down to the grandchild component from the parent component, so I also needed to pass the props to the child components, as it is a rule of using props.   

According to the [public documents](https://react.dev/learn/passing-props-to-a-component),
> React components use props to communicate with each other. Every parent component can pass some information to its child components by giving them props.   

In the following code, I did Prop Drilling. I passed the props down to TodoList component and then, I passed those to Todo component.
```react
// APP.js
import { TodoList } from "./components/TodoList/TodoList";

function App() {
  const watchingCheckBox = (id) => {
    // Some Operation
  };

  const handleRemoveTodo = (id) => {
    // Some Operation
  };

  const reEditTodoName = (id, name) => {
    // Some Operation
  };

  let filteredTodos = todos;
  // Some Operation


  return (
    <div className="App">
      <TodoList
        todos={filteredTodos}
        watchingCheckBox={watchingCheckBox}
        handleRemoveTodo={handleRemoveTodo}
        reEditTodoName={reEditTodoName}
      />
    </div>
  );
}

export default App;
```

```react
// TodoList.jsx
import React from "react";
import Todo from "../Todo/Todo";

function TodoList({
  todos,
  watchingCheckBox,
  handleRemoveTodo,
  reEditTodoName,
}) {
  return todos.map((todo) => (
    <Todo
      todo={todo}
      key={todo.id}
      watchingCheckBox={watchingCheckBox}
      handleRemoveTodo={handleRemoveTodo}
      reEditTodoName={reEditTodoName}
    />
  ));
}

export default TodoList;
```
```react
// Todo.jsx
import { HiOutlineXMark } from "react-icons/hi2";
import React from "react";

function Todo({ todo, watchingCheckBox, handleRemoveTodo, reEditTodoName }) {

  const handleTodoClick = () => {
    watchingCheckBox(todo.id);
  };

  const handleRemoveClick = () => {
    handleRemoveTodo(todo.id);
  };

  const reEdit = () => {
    if (// Some Condition) {
      handleRemoveTodo(todo.id);
    } else {
      reEditTodoName(todo.id, reEditName);
    }
  };

  return (
    <div>
        <input
          type="checkbox"
          checked={todo.isCompleted}
          onChange={handleTodoClick}
        />{" "}
        <label>
          {todo.name}
        </label>
      <button onClick={handleRemoveClick}>
        <HiOutlineXMark  />
      </button>
    </div>
  );
}

export default Todo;
```

It seems like a bucket brigade. If the props-passing hierarchy is shallow, that is fine, but as your application grows, the hierarchy gets deeper. Then, you must pass down props to multiple components, which is not a good way to write clean and reusable code so it is called Prop drilling.

## What is Prop drilling?
Prop drilling is a pattern in React where data is passed down from one component to another component, even if the intermediate components do not need the data. This often occurs when data needs to be passed from a high-level parent component down to a low-level child component that is several levels deep in the component tree. In order to pass data from the parent component to the child component, props are used.

So what should we use in place of Prop Drilling?
It is the Context API!

## What is Context API?
Context API is a feature in React that allows data to be passed down through the component tree without having to pass props manually at every level. It provides a way to share data among components without the need to explicitly pass the data as props to each component that needs it.

In the following code, I changed my code with Context API. I used `createContext()`, `SomeContext.Provider` and `useContext()`. I also combined two files(TodoList.jsx and Todo.jsx) into one file.

> ### [createContext](https://react.dev/reference/react/createContext)
createContext lets you create a context that components can provide or read.
```
const SomeContext = createContext(defaultValue)
```

> ### [SomeContext.Provider] (https://react.dev/reference/react/createContext)
Wrap your components into a context provider to specify the value of this context for all components inside:
```
function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}
```
> ### [useContext](https://react.dev/reference/react/useContext#usecontext)
useContext is a React Hook that lets you read and subscribe to context from your component.
```
const value = useContext(SomeContext)
```

↓My code

```react
// App.js
import { createContext } from "react";
import { TodoList } from "./components/TodoList/TodoList";

export const FilteredTodosContext = createContext();

export function App() {
  const watchingCheckBox = (id) => {
    // Some Operation
  };

  const handleRemoveTodo = (id) => {
    // Some Operation
  };

  const reEditTodoName = (id, name) => {
    // Some Operation
  };

  let filteredTodos = todos;
  // Some Operation


  return (
    <div className="App">
      <FilteredTodosContext.Provider
        value={{
          filteredTodos,
          watchingCheckBox,
          handleRemoveTodo,
          reEditTodoName,
        }}
      >
        <TodoList />
      </FilteredTodosContext.Provider>
    </div>
  );
}
```


```react
// TodoList.jsx 
import { HiOutlineXMark } from "react-icons/hi2";
import React, { useContext, createContext } from "react";
import { FilteredTodosContext } from "../../App";

const TodosContext = createContext();

export function TodoList() {
  const { filteredTodos } = useContext(FilteredTodosContext);

  return filteredTodos.map((todo) => (
    <TodosContext.Provider value={todo} key={todo.id}>
      <Todo />
    </TodosContext.Provider>
  ));
}

export function Todo() {
  const todos = useContext(TodosContext);

  const { watchingCheckBox, handleRemoveTodo, reEditTodoName } 
    = useContext(FilteredTodosContext);

  const handleTodoClick = () => {
    watchingCheckBox(todos.id);
  };

  const handleRemoveClick = () => {
    handleRemoveTodo(todos.id);
  };

  const reEdit = () => {
    if (// Some Condition) {
      handleRemoveTodo(todo.id);
    } else {
      reEditTodoName(todo.id, reEditName);
    }
  };

  return (
    <div>
        <input
          type="checkbox"
          checked={todo.isCompleted}
          onChange={handleTodoClick}
        />{" "}
        <label>
          {todos.name}
        </label>
      <button onClick={handleRemoveClick}>
        <HiOutlineXMark  />
      </button>
    </div>
  );
}

```
Context API simplifies data management by allowing components to access data without passing it through multiple layers of props. In addition, it allows for global state management, which is helpful when multiple components need to share state.
Therefore, many developers prefer to use Context API.





Have you ever heard of Prop Drilling? For beginners of React.js learners, it is a need-to-know...

Let's use Context API in place of Prop Drilling in React.js!

I felt that I lacked an in-depth understanding of Asynchronous when I created the app fetching data from external API so I revised it and I integrate my learning here. I heard we use async/await and Promise.all very often in the real industry. I am going to introduce that topic.
## Promise
Promise is an object through which you could do some async operations.
Promise has three states.
1. Fulfilled State - Success State
2. Rejected State - Failure/Reject State
3. Pending State - Waiting for response

```javascript
let myPromise = new Promise((resolve, reject) => {
  resolve("Hi I was resolved!"); // Fulfilled State
  reject("HI i was rejected"); // Rejected State
});

myPromise;

```
We can use the `.then()` method to specify what should happen when the Promise is resolved, and the `.catch()` method to specify what should happen when the Promise is rejected. In addition, we can also use the `.finally()` method to specify a callback that should be executed regardless of whether the Promise was resolved or rejected.

```javascript
let amount = 10000;

let transaction = new Promise((resolve, reject) => {
  console.log("Trying transaction, for downpayment of amount $8000");

  if (amount - 8000 > 0) {
    resolve({
      message: "Successfully Approved!",
      balance: amount - 8000,
    });
  } else {
    reject({
      message: "Transaction Denied!",
      balance: amount,
    });
  }
});
transaction.then((response) => {
    console.log(response); // This will be executed, if the promise was resolved
}).catch((error) => {
    console.log(error); // This will be executed, if the promise was rejected
}).finally(() => {
    console.log("I will be executed anyway"); // I will be executed anyway
})
```
When we run the above codes, we can get the following result. 
```
Trying transaction, for downpayment of amount $8000
▶︎{message: 'Successfully Approved!', balance: 2000}
I will be executed anyway
▶︎Promise {<fulfilled>: undefined}
```
When we change the amount to 5000, we can get the following result. 
```
Trying transaction, for downpayment of amount $8000
▶︎{message: 'Transaction Denied!', balance: 5000}
I will be executed anyway
▶︎Promise {<fulfilled>: undefined} 
```
___
## Promise Chaining
Promise chaining is a technique used that involves chaining multiple asynchronous operations in a specific sequence using promises. It is used to simplify and organize asynchronous code that involves multiple steps, by connecting the output of one promise to the input of another.
```javascript
let number = 20;

let getNumber = new Promise((resolve, reject) => {
  resolve(number);
  reject("Failed to get number");
});
getNumber
  .then((response) => {
    console.log(response, "MY 1st Time of Resolving!");
    return response * 5; // 100
  })
  .then((newResponse) => {
    // 100
    console.log(newResponse, "MY 2nd Time of Resolving!");
    return newResponse * 10; // 1000
  })
  .then((finalResponse) => {
    // 1000
    console.log(finalResponse, "MY final Time of Resolving!");
  })
  .then((anotherFinalResponse) => {
    console.log(anotherFinalResponse, "UHH LAST !"); // So here it will be undefined! Since I didn't return anything!
  });
```
___
## Using the fetch() API
fetch() is a web API used in JavaScript to make asynchronous HTTP requests to a server and handle the response. It returns a Promise object that resolves to the Response object representing the response to the request made. The fetch() function can be used to send GET, POST, PUT, DELETE, and other types of HTTP requests.

`.then()` and `.catch()`
```javascript
const fetchApi = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json"
);
fetchApi
  .then((response) => {
    if (!response.ok) { //we are checking whether the network response is successful or not.
      console.log("Network response was not ok");
    }
    return response.json();
  })
  .then((finalOutput) => {
    console.log(finalOutput[0].name);
  })
  .catch((error) => {
    console.error("There was a problem with the fetch operation:", error);
  });

```
In this code, it is unnecessary to use `new Promise()` because the `fetch()` API itself returns a Promise that resolves to the Response object representing the network response. We then use the `.then()` method of the Promise returned by `fetch()` to specify a callback function that will be called when the network response is received. The first `.then()` block checks whether the network response was successful by checking the response.ok property. If the response is not ok, it logs an error message. If the response is ok, it returns the response data in JSON format by calling response.json().
The second `.then()` block receives the JSON data returned from the previous `.then()` block as an argument, and logs the name of the first product in the data.
The `.catch()` block is used to catch any errors that may occur during the fetch operation, and it logs an error message along with the error object.

`async/await`
```javascript
async function fetchApiAsyncAwait() {
  try {
    const response = await fetch("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json");
    if (!response.ok) {
      console.log("Network response was not ok");
    }
    const finalOutput = await response.json();
    console.log(finalOutput[0].name);
  } catch (error) {
    console.error("There was a problem with the fetch operation:", error);
  }
}

fetchApiAsyncAwait();
```
In this code, we define an async function fetchApiAsyncAwait that uses await to wait for the fetch request to complete and for the response to be converted to JSON. We also use a try/catch block to handle any errors that might occur during the fetch operation.
___ 
## Promise.all
Promise.all is a method in JavaScript that takes an iterable of promises as input and returns a single Promise that resolves to an array of the results of the input promises. The returned Promise is fulfilled when all the input promises have been fulfilled or rejected if any of the input promises have been rejected.
If any of the promises is failing/rejected then the other resolved promises are ignored and it goes to the catch block.

`.then()` and `.catch()`
```javascript
async function fetchApis() {
  try {
    const [api1Response, api2Response] = await Promise.all([
      fetch('https://api.example.com/api1'),
      fetch('https://api.example.com/api2')
    ]);

    if (!api1Response.ok) {
      throw new Error(`API 1 returned an error: ${api1Response.status}`);
    }
    if (!api2Response.ok) {
      throw new Error(`API 2 returned an error: ${api2Response.status}`);
    }

    const api1Data = await api1Response.json();
    const api2Data = await api2Response.json();

    console.log('API 1 data:', api1Data);
    console.log('API 2 data:', api2Data);
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
}

fetchApis();
```
`async/await`
```javascript
function fetchApis() {
  Promise.all([
    fetch('https://api.example.com/api1'),
    fetch('https://api.example.com/api2')
  ])
  .then((responses) => {
    const [api1Response, api2Response] = responses;

    if (!api1Response.ok) {
      throw new Error(`API 1 returned an error: ${api1Response.status}`);
    }
    if (!api2Response.ok) {
      throw new Error(`API 2 returned an error: ${api2Response.status}`);
    }

    return Promise.all([api1Response.json(), api2Response.json()]);
  })
  .then((data) => {
    const [api1Data, api2Data] = data;

    console.log('API 1 data:', api1Data);
    console.log('API 2 data:', api2Data);
  })
  .catch((error) => {
    console.error('There was a problem with the fetch operation:', error);
  });
}

fetchApis();
```



























I felt that I lacked an in-depth understanding of Asynchronous when I created the app fetching data...

My Learning about Promise, async/await, and Promise.all

I tried ten basic code challenges to revise JavaScript. When I made Next.js app, I was struggling with showing the data from external API by using the map method in JavaScript. I thought that basic knowledge is important to write JavaScript code practically. I solved ten problems from this [link](https://www.codecademy.com/resources/blog/10-javascript-code-challenges-for-beginners/). 

1) Print all even numbers from 0 – 10
Try to make the solution to this problem as efficiently as possible. Consider using loops that would allow you to type the fewest characters/commands. While you could simply print the even numbers, get creative and see how you could output them in a way that would work up to 10 or even up to 10,000 with little extra effort.
```javascript
// Pattern 1
let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const printAllEvenNumbers1 = () => {
  for (let i = 1; i < number.length; i++) {
    if (number[i] % 2 === 0) {
      console.log(number[i]);
    }
  }
};
printAllEvenNumbers1(number);

// Pattern 2
const printAllEvenNumbers2 = (number) => {
  for (let i = 1; i <= number; i++) {
    if (i % 2 == 0) {
      console.log(i);
    }
  }
};
printAllEvenNumbers2(10);
```
```
// Pattern 1 & 2
2
4
6
8
10
```

2) Print a table containing multiplication tables
Let's start with the tables that many of us had to memorize in school. Can you print a table that contains all the answers to the multiplication tables from 1 through 10? Like Challenge #1, can you create an efficient solution that you could easily expand should you need the 12 times table?

```javascript
const printMultiplicationTable = (number) => {
  for (let i = 1; i <= number; i++) {
    for (let j = 1; j <= number; j++) {
      console.log(i + "×" + j + "=" + i * j);
    }
  }
};

printMultiplicationTable(12);
```
```
'1×1=1'
'1×2=2'
'1×3=3'
   :
'12×10=120'
'12×11=132'
'12×12=144'
```

3) Create a length converter function
Creating a function is a skill that'll be useful in many settings, and as you progress, you'll be working on much more complicated functions than this one. But a function that converts units of measure can be pretty handy in multiple professions and industries. Let's start with a conversion from kilometers to miles. The function should include the input in kilometers and return the answer in miles.

```javascript
const createLengthConverter = (kilometers) => {
  let result = kilometers / 1.609344;
  return kilometers + "km = " + result.toFixed(6) + " mile";
};

createLengthConverter(1);
```
```
'1km = 0.621371 mile'
```
4) Calculate the sum of numbers within an array
You can create your own array of numbers but consider trying this problem with a few different sets to verify your solution. Have one array with negative and positive numbers and another with integers and decimals. You could also try using arrays of different lengths. If you're feeling comfortable with this, try the slightly more challenging bonus challenge below. Bonus intermediate challenge: Create a function that can return the sum of a particular column or row number in a table.

```javascript
let numbers = [-3, -2, -1, 1, 2, 3, 4, 5, 1.2];

const calculateSumOfNumbers = (array) => {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
    sum = array[i] + sum;
  }
  return sum;
};

calculateSumOfNumbers(numbers);
```
```
10.2
```

5) Create a function that reverses an array
This challenge is particularly helpful if you're planning to become a Data Scientist. Manipulating data is a significant part of the role, and building the foundations now will help you later down the road when you're working with large databases. Start small here and work your way up. Begin with an array of 5 numbers, and then try your program with a larger array to verify its success.

```javascript
// Pattern1
let numbers = [1, 2, 3, 4, 5];
const reverseArray1 = (array) => {
  let newNumbers = [];
  for (let i = array.length - 1; i >= 0; i--) {
    newNumbers.push(numbers[i]);
  }
  return newNumbers;
};

reverseArray1(numbers);

// Pattern2
let numbers = [1, 2, 3, 4, 5];

const reverseArray2 = (array) => {
  return array.reverse();
};

reverseArray2(numbers);
```
```
// Pattern 1 & 2
[ 5, 4, 3, 2, 1 ]
```

6) Sort an array from lowest to highest
You could create a function for this solution as well, but be sure to try your program with varying lengths and types of arrays. Try one with all integers, another with negative numbers, and another with decimals.

```javascript
// Pattern1
let numbers = [3, -2, 5, 4, 10, 6, 3, 1];
const sortArray1 = (array) => {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length; j++) {
      if (array[j] > array[j + 1]) {
        let current = array[j];
        array[j] = array[j + 1];
        array[j + 1] = current;
      }
    }
  }
  return numbers;
};

sortArray1(numbers);

// Pattern2
let numbers = [3, -2, 5, 4, 10, 6, 3, 1];

const sortArray2 = (array) => {
  return array.sort(compareNumbers);
};

const compareNumbers = (a, b) => {
  return a - b;
};

sortArray2(numbers);
```
```
// Pattern 1 & 2
[ -2, 1, 3, 3, 4, 5, 6, 10 ]
```

7) Create a function that filters out negative numbers
In this challenge, you'll have a function that takes an array as an input and returns an array. But if all goes according to plan, it'll remove the negative numbers. This is another example of a task that'll be useful when combing through data and looking for clever ways to eliminate "bad data."

```javascript
// Pattern1
let numbers = [3, -2, 5, 4, 10, 6, 3, 1];
const filterNegativeNumbers1 = (array) => {
  for (let i = 0; i < array.length; i++) {
    if (array[i] < 0) {
      array.splice(i, 1);
    }
  }
  return array;
};

filterNegativeNumbers1(numbers);

// Pattern2

let numbers = [3, -2, 5, 4, 10, 6, 3, 1];

const filterNegativeNumbers2 = (array) => {
  let result = array.filter(checkNegativeNumber);
  return result;
};

const checkNegativeNumber = (num) => {
  return num > 0;
};

filterNegativeNumbers2(numbers);
```
```
// Pattern 1 & 2
[ 3, 5, 4, 10, 6, 3, 1 ]
```

8) Remove the spaces found in a string
Yet another way to clean up data is to remove any errors or unnecessary spaces. This function will take in a string and then return it with all spaces removed. Think about if you were tasked with cleaning up customer data at your job. You could scale this function to clean up specific fields of data, such as zip codes.

```javascript
let myName = "Yuki K asugai";
const removeSpace = (str) => {
  return str.replace(/\s/g, "");
};

removeSpace(myName);
```
```
'YukiKasugai'
```

9) Return a Boolean if a number is divisible by 10
Here, you'll create a function that'll give you a "true" or "false" Boolean as its output. The inputted number should only return a "true" if it's divisible by 10. Otherwise, your program should return a "false" answer.

```javascript
const returnBoolean = (num) => {
  if (num % 10 === 0) {
    return true;
  } else {
    return false;
  }
};

returnBoolean(100);
```
```
true
```

10) Return the number of vowels in a string
Create a function that'll return an integer of the number of vowels found in a string. This is a great way to practice determining the features of a dataset. If you use JavaScript later in your career, you'll be well-prepared to determine what datasets (or just strings) consist of. If you feel like an extra challenge, consider returning the number of characters.

```javascript
let word = "Good morning everyone!";
const numberOfVowels = (str) => {
  let count = 0;
  const vowels = ["a", "e", "i", "o", "u"];
  for (const element of str.toLowerCase()) {
    if (vowels.includes(element)) {
      count++;
    }
  }
  return count;
};

numberOfVowels(word);
```
```
8
```
After finishing these code challenges, I feel that there is a difference between understanding and writing JavaScript and I need to keep writing JavaScript code to not forget how to handle arrays, strings, and objects. As I said, I am creating Next.js app now but sometimes I have no idea how I write the code. Of course, I can search for the appropriate code on Google, but I am not sure if the problem I face is short of writing JavaScript code, short of writing JSX code, or short of knowledge about React and Next.js. I realized it is necessary to revise while I learn a new language again so I will keep to it.


I tried ten basic code challenges to revise JavaScript. When I made Next.js app, I was struggling...

Ten Basic Code Challenges in JavaScript

Do you know what is the most practical way to organize the directories and files in the component directory? While I was creating my portfolio site, I am curious about those. I searched some React repositories on GitHub and also asked my developer's friends about those so I will show you guys three ways. 

The following file composition is my portfolio site app.
```
|_components
    |_Herosection
        |_herosection.jsx
        |_herosection.modules.css
    |_Navbar
    |_button
    
|_pages
    |_Home.jsx    
    |_Aboutme.jsx 
    |_Products.jsx 
    |_Articles.jsx 
```
I created each component directly under the component directory and then created each jsx file and css file in it. (I created my portfolio site by using Next.js) I searched open-source React and Next.js website repositories on GitHub and some of them are very similar. Let's see the Drift website's file composition.

**Pattern1**
```
|_components
    |_admin
    |_app
    |_auth
        |_auth.module.css
        |_index.tsx
    |_badges
    |_button-dropdown
      ・
　　　 ・
　　　 ・ 
```
This way has pros and cons.
**pros**; We can write the path of the file compactly when we use the component on each page file.
```
import Auth from "@components/auth"
```
**cons**; It will be in alphabetical order in the components directory. If the app has dozen of components, it takes a little time to look for those and we can not see which components are common or not.
[Website URL](https://drift.maxleiter.com/)
[GitHub](https://github.com/MaxLeiter/Drift/tree/main/client/components)
I also asked my developer's friends and they shows two ways.

**Pattern2**
```
|_components
   |_commons
     |_navbar
       |_navbar.jsx
       |_navbar.modules.css  
   |_utilities
     |_button
       |_button.jsx
       |_button.modules.css
   |_Home_components
     |_herosection
       |_herosection.jsx
       |_herosection.modules.css
   |_Aboutme_components
   |_Products_components
   |_Articles_components

|_pages
   |_Home.jsx    
   |_Aboutme.jsx 
   |_Products.jsx 
   |_Articles.jsx 
```
The utilities directory includes minimal components which I use on all pages. The commons directory has components that are mixed with a couple of minimal ones. In addition, each page directory has components by themselves. But some friends said that the definition between utilities and commons depends on the people. If you work with other members, it has the possibility to hover between those. Let's see another way.

**Pattern3**
```
|_commonComponents
    |_navbar
        |_navbar.jsx
        |_navbar.modules.css 
    |_button
        |_button.jsx
        |_button.modules.css

|_pageComponents
    |_Home_components
        |_herosection
            |_herosection.jsx
            |_herosection.modules.css
    |_Aboutme_components
    |_Products_components
    |_Articles_components

|_pages
    |_Home.jsx    
    |_Aboutme.jsx 
    |_Products.jsx 
    |_Articles.jsx 
```
There are two main types of component directories. (So far, pattern 1 & 2 have just one component directory.) It enables us to write the path of the file compactly and team members will not be confused. 

Therefore, I prefer pattern 3. It is important to have a clear file composition that everyone can understand when I work as a developer with other team members in the future. However, I'm still wondering if it is the best way so I really appreciate it if you suggest me more practical way in the comment field.

Do you know what is the most practical way to organize the directories and files in the component...

How to Organize the Files in the Components Practically in React and Next.js.

In Next.js, one of the important features is pre-rendering. On the way to understand what is pre-rendering, I also have to learn SSR, SSG, and ISR so I will write an article about those.

##1. SSR (Server Side Rendering)
To understand SSR, we have to know the difference between CSR and SSR. 
In CSR (Client Side Rendering), when a client makes an initial request, the server sends all file elements of a web page. Those are cached by the browser and then javascript runs on the browser to show the interactive page. React uses CSR but sometimes it is not useful because sending it and running takes a long time if the JavaScript file is so big. 
In SSR (Server Side Rendering), on the other hand, when a client makes an initial request, the server sends a fully rendered page to the client. It does not need to send it and run so SSR is faster than CSR. In addition, it has good benefits for SEO.

##2. SSG (Static Site Generation)
We can understand SSR is greater than CSR. However, even with server-side rendering, overhead is unavoidable since calculations are performed for each request from the client. To resolve that, there is SSG (Static Site Generation). In SSG, Rendering is done at the time of building the web application, and the HTML file for each page is generated at that time. When a client makes a request, it returns that HTML file. Even if the web page has data from external DB, API, and CMS, getting data is done at the build time. Especially, SSG is effective when placing a cache of HTML files on a CDN and returning the cache from a CDN close to each client. This architecture is called Jamstack. Jamstack websites are more secure because hackers can not access the server directly. Moreover, it can handle the crush of demand because it just returns HTML files when a client makes a request.  

According to [Vercel](https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering), SSR and SSG are called pre-rendering.

>Two forms of Pre-rendering
>Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

>-Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.

>-Server-side Rendering: The HTML is generated on each request.

##3. ISR (Incremental Static Regeneration)
SSG does not depend on the client's request because HTML for each page and the attached data were generated in ahead. However, there is a problem we can not get the latest external data if the data change at the data source after the build time. To solve this, Here is ISR (Incremental static regeneration). In ISR, it has a function of regenerating HTML by re-fetching data and re-rendering the page in the background at regular intervals in addition to the behavior of SSG explained so far. 


Nowadays, Next.js is popular among Front-End Developers because SSR, SSG, and ISR enable users to provide better UI than React. 

[reference link1](https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering)
[reference link2](https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed)
[reference link3](https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering)

In Next.js, one of the important features is pre-rendering. On the way to understand what is...

Can you explain SSR, SSG, and ISR in Next.js?

Nowadays, React is popular among Front-end developers. There are tons of reasons why they prefer React. One of those is the concept of Virtual Dom. I learned what is the virtual DOM so I am going to write it.
 Before React appears, web documents like HTML are loaded in web browsers to show users. They have tree-like structures.

![alt text](https://raw.githubusercontent.com/yuki-o1o5/dev.to/main/VirtualDominReact/IMG_4364AE9E5405-1.jpeg "Text 1")

When we would like to update something different, DOM (Document Object Model) works. This word is a little bit difficult for me so I think that Dom is an office to access each tag like `head`, `title`, `body`, `header`, `nav`, `main`, `p`, and `div`. 
 In JavaScript, If we want to change an element of `div` tag, we get `div` DOM and give it something different, and then the page has to re-render. In this way, DOM is changed directly and processed in the web browser. This process leads to being overloaded and the cost of re-rendering is high. 
 However, React can solve these problems because it uses the concept of a virtual DOM. React creates a virtual DOM to keep in memory whenever we render the user interface. If the next update occurs in the render, it compares the new version with the previous version and figures out the difference and the real DOM only changed the different points. It is called reconciliation. The updating is processed in the JavaScript engine and this process is implemented efficiently. The cost of re-rendering is low. Users also can see web pages more quickly than before.

![alt text](https://raw.githubusercontent.com/yuki-o1o5/dev.to/main/VirtualDominReact/IMG_FC1479FF53B4-1.jpeg "Text 2")

According to [this link](https://www.codecademy.com/article/react-virtual-dom), we can understand how virtual DOM works easily.

>In summary, here’s what happens when you try to update the DOM in React:

>1. The entire virtual DOM gets updated.
>2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
>3. The changed objects, and the changed objects only, get updated on the real DOM.
>4. Changes on the real DOM cause the screen to change.

The Virtual DOM enables pages to re-render productively. That's why React becomes more and more mainstream among Front-end web developers.

+ [reference link 1](https://blog.logrocket.com/what-virtual-dom-react/)
+ [reference link 2](https://www.youtube.com/watch?v=XKSYF2aZnkQ&list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k&index=2)







Nowadays, React is popular among Front-end developers. There are tons of reasons why they prefer...

What's So Great About Virtual Dom in React?

I'm going to create my portfolio website. Before doing that, I checked the influencers' websites. I will write what they have in common.

___
The below link is my reference websites

- Cassidy Williams
https://cassidoo.co/

- Jhey Tompkins
https://jhey.dev/

- Jason Lengstorf
https://www.jason.af/

- Sara Soueidan
https://www.sarasoueidan.com/

- RACH SMITH
https://rachsmith.com/
___

##Simple is Best

The contents of their websites are self-introduction, career histories, products, and contacts. They minimize their information to appeal so they have a few pages. Viewers can see their websites with as few clicks as possible. It enables viewers to see who they are and what kinds of skills they have easily. In terms of design, their background colors are simple like white, cream-yellow, and light gray. The line colors are mainly black. Then a point color or an animation is used as a decorative accent. Less information and less decoration give viewers comfortable feelings. 

##White space and Alignment
They make efficient use of white space and alignment. White space and alignment emphasize information. If you check [Cassidy William's website](https://cassidoo.co/), you can understand what I said. Her main page has the main contents situated in the middle and There is much white space outside of that. The contents have no outline but the alignment of the text gives us the impression it has an outline.

##Playful
The purpose of creating portfolio websites is to appeal their skills to potential clients and the company’s recruiters who are hiring however, they also do not forget appealing their sense of fun. Please check [Jason Lengstorf's website](https://www.jason.af/). On the upper right, you can see his face. If you click his head, the brain appears and we can see his website's content. This kind of playful mind offers great entertainment for views and we have a desire to know more about him.  

##Responsive and Dark mode
Of course, All influencers' websites that I checked are responsive so viewers can see websites via laptop, tablet, and smartphone perfectly. In addition, two-thirds of those have a dark mode button. For web developers who are used to dark mode while they are writing codes, it is getting more common.




I'm going to create my portfolio website. Before doing that, I checked the influencers' websites. I...

What is the Good Point about Influencer’s Websites

# What is "scope"?
The scope is the area in code from where a variable can be accessed. 
In JavaScript, there are two types of scope: Global scope and Local scope. Local Scope can be further divided into two types of scope: Function scope and Block scope.

- **Global Scope;**
    
    Global variables are those declared outside of a block `{}`
- **Local Scope;**

    Local variables are those declared inside of a block `{}`
    - **Function Scope**
    - **Block Scope**

##Global Scope
Global variables are those declared outside of a block `{}`.

In JavaScript, it is necessary that all codes are stored in the object and the object which is at the top of the hierarchy is the global object. Declaring a variable in Global Scope means that a property is attached to the global object. JavaScript runs on the web browser so the window object could be the global object.

```JavaScript
var a = 'Yuki';
let b = 'Kasugai';
const c = 'Japan';

function callMyname1 (){
  console.log(a);
  console.log(b);
  console.log(c);
}
callMyname1();
```
```
'Yuki'
'Kasugai'
'Japan'
```
I tried to see properties in the window object (= Declaring variables in Global Scope) then, but I can only access `var` variable. 

```JavaScript
var a = 'Yuki';
let b = 'Kasugai';
const c = 'Japan';

function callMyname2 (){
  console.log(window.a);
  console.log(window.b);
  console.log(window.c);
}
callMyname2();
```
```
'Yuki'
undefined
undefined
```
It means that `var` is globally scoped and attached to the window object, on the other hand, `let` and `const` are globally scoped but not attached to the window object.

##Local Scope
Local variables are those declared inside of a block `{}`. It can be further divided into two types of scope: Function scope and Block scope.

###Function Scope
In the following code, Both 3 variables:`var` `let` `const` and each `console.log` are declared inside of a block `{}`. I can access 3 variables.
```JavaScript
function callMyname3 (){
  var d = 'Yuki';
  let e = 'Kasugai';
  const f = 'Japan';
  console.log(d);
  console.log(e);
  console.log(f);
}
callMyname3();
```
```
'Yuki'
'Kasugai'
'Japan'
```
###Block Scope
In the following code, 3 variables `var` `let` `const` are declared in a curly brace `{}` which is inside of a block`{}`, and each `console.log` is outside of a curly brace which is inside of a block`{}`. Then, I can only access `var` variable.
```JavaScript
function callMyname4 (){
  if(true){
    var g = 'Yuki';
    let h = 'Kasugai';
    const i = 'Japan';
  }
  console.log(g);
  console.log(h);
  console.log(i);
}
callMyname4();
```
```
'Yuki'
```
It means that `var` variable is a Function scope and `let` and `const` variable are Block scope.
I tried to write `console.log(j)` outside of a block`{}`(= outside of the function) then I can not access it for sure.
```JavaScript
function callMyname5 (){
  if(true){
    var j = 'Yuki';
    let k = 'Kasugai';
    const l = 'Japan';
  }
}
console.log(j);
callMyname5();
```
```
ReferenceError: j is not defined
```
I summarized those topics in a table.

Keyword | Scope | Hoisting | Can be reassigned | Can be redeclared |
--- | --- | --- | --- | --- |
var | Globally scoped & Function Scope | Yes | Yes | Yes
let | Globally scoped & Block Scope | No | Yes | No
const | Globally scoped & Block Scope | No | No | No

[reference link1](https://www.freecodecamp.org/news/scope-and-closures-in-javascript/)

___

# What is "this" keyword?

>In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used
[By W3schools](https://www.w3schools.com/js/js_this.asp#:~:text=What%20is%20this%3F,this%20refers%20to%20the%20object.) 


###Alone
On global level, the keyword 'this' refers to global window object. 
First, I write `console.log(this)` on global scope in the following code, then the result refers to window object.
```JavaScript
console.log(this);
```
```
Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
```
###In a function
Next, I write `console.log(this)` in a function, then the result refers to window object as well. 
```JavaScript
function test(){
  console.log(this);
}

test();
```
```
Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
```
###In an object
In addition, I assign `this` to a property(name) in an object(myObject1), and the result also refers to window object. 
```JavaScript
var myObject1 = {
  name: this,
}

console.log(myObject1.name);
```
```
Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
```
###In a method
Lastly, I write `console.log(this)` in a method(myFunc) of an object(myObject2). Then, the result refers to a function (myObject2).
```JavaScript
var myObject2 = {
  name: this,
  myFunc: function(){
    console.log(this);
  }
}

myObject2.myFunc();
```
```
{name: Window, myFunc: ƒ}
```
Even if I add a method(age) later, the result refers to a function (myObject2).
```JavaScript
var myObject2 = {
  name: this,
  myFunc: function(){
    console.log(this);
  }
}

myObject2.age = function(){
  console.log(this);
}
myObject2.age();
```
```
{name: Window, myFunc: ƒ, age: ƒ}
```
###In a constructor function using the new operator
Moreover, we have to remember if we use constructor function using the new operator, the result refers to the first function(myFirstObject). It means that `this` in the constructor function refers to the first function(myFirstObject).
```JavaScript
function myFirstObject(name,id){
  this.name = name;
  this.id = id;
  }

var mySecondObject = new myFirstObject("yuki",100);

console.log(mySecondObject);
```
```
myFirstObject {name: 'yuki', id: 100}
```
[reference link2](https://www.sejuku.net/blog/29389)
[reference link3](https://www.youtube.com/watch?v=gvicrj31JOM)


What is "scope"?   The scope is the area in code from where a variable can be accessed.  In...

What are "Scope" and "This" Keyword in JavaScript?

##forEach()
> The forEach() method executes a provided function for each array element.
```javascript
const numbers = [1,2,3,4,5];

numbers.forEach(element => {
  console.log(element + 10);
});
```
```
11
12
13
14
15
```
The forEach just does execute the same function for each element of an array. It does not return anything. If we try to do the `console.log(resultForEach)` in the following code, `undefined` appears. 
```javascript
const numbers = [1,2,3,4,5];

const resultForEach = numbers.forEach(element => {
  return element * 10;
});

console.log(resultForEach);
```
```
undefined
```
[Reference link1](https://www.programiz.com/javascript/library/array/foreach)
___
##Map()
> The map() method creates a new array with the results of calling a function for every array element.
```javascript
const numbers = [1,2,3,4,5];

const resultMap = numbers.map(element => {
  console.log(element + 10);
});

```
```
11
12
13
14
15
```
The map() method shows us the same result as the forEach() method. But the return value appears if we try to do the `console.log(resultMap)` in the following code. It has a return value and can generate a new array. This is the big difference between the map() method and the forEach() method.
```javascript
const numbers = [1,2,3,4,5];

const resultMap = numbers.map(element => {
  return element + 10;
});
console.log(resultMap);
```
```
[ 11, 12, 13, 14, 15 ]
```
[Reference link2]
(https://www.programiz.com/javascript/library/array/map)
___
##Filter()
> The filter() method returns a new array with all elements that pass the test defined by the given function.
```javascript
const numbers = [1,2,3,4,5];

numbers.filter( element => {
  if (element % 2 == 0){
    return true;
  }
  else{
    return false;
  }
});
```
```
[ 2, 4 ]
```
The filter() method also can generate a new array that consists of only the element which satisfies a given condition.
[Reference link3](https://www.programiz.com/javascript/library/array/filter)
___
##Every() & Some()
- Every()

> The JavaScript Array every() method checks if all the array elements pass the given test function.
```javascript
const numbers = [1,2,3,4,5];

const resultEvery = numbers.every( element => {
  return element <= 5;
} );

console.log(resultEvery);
```
```
true
```
```javascript
const numbers = [1,2,3,4,5];

const resultEvery = numbers.every( element => {
  return element % 2 == 0;
} );

console.log(resultEvery);
```
```
false
```

- Some()

> The some() method tests whether any of the array elements pass the given test function.
```javascript
const numbers = [1,2,3,4,5];


const resultSome = numbers.some( element => {
  return element % 2 == 0;
} );

console.log(resultSome);
```
```
true
```
We should remember the every() method and the some() method as a set. The every() method requires that all elements meet the condition, on the other hand, some() method needs at least one element meets the condition. I wrote the same condition for every() method and the some() method but the results were different.
[Reference link4](https://www.programiz.com/javascript/library/array/every)
[Reference link5](https://www.programiz.com/javascript/library/array/some)
___
##Reduce()
> The reduce() method executes a reducer function on each element of the array and returns a single output value.

```javascript
const numbers = [1,2,3,4,5];

const resultReduce = numbers.reduce((accumulator,currentValue,currentIndex,array) => {
  return accumulator + currentValue;
});

console.log(resultReduce);
```
```
15
```
The reduce() method is more tricky than others. It can have 4 parameters. (we can skip writing currentIndex and array) It returns not a new array but one value.

Word | Meaning |
--- | --- |
accumulator | initial value or the previous result which was being executed | 
currentValue | the value which is being executed right now | 
currentIndex | the index which is being executed right now | 
array | array which is provided ahead |

* If initialValue is specified, 
 - accumulator = initialValue 
 - currentValue = the first element of the array
* If initialValue is omitted, 
 - the accumulator = the first element of the array
 - currentValue = the second element of the array

I am going to write what happens in the above code.

How many times | accumulator | currentValue | currentIndex | 
--- | --- | --- | --- | 
1st | 1 | 2 | 1 | 
2nd | 3 | 3 | 2 | 
3rd | 6 | 4 | 3 | 
4th | 10 | 5 | 4 | 
[Reference link6](https://www.programiz.com/javascript/library/array/reduce)
[Reference link7](https://qiita.com/chihiro/items/1047e40514a778c08baa)

forEach()    The forEach() method executes a provided function for each array...

Top 5 Practical Array Methods in JavaScript

## 1. The difference between `return` and `calling the function`


While studying functions, I was confused about the difference between `return` and `calling the function`. But I was able to understand after I likened the function to a practical example in our daily lives.
I would like to make a cup of café latte. There are two machines. One is an espresso machine and another is a steamed milk machine.

**☕️ Espresso machine is the first function.**
 - Coffee beans are the parameter.
 - Espresso is the return.
 -Calling the function is the action I turn on the button of the espresso machine.

**🥛 Steamed milk machine is the second function.**
 - Cold milk is the parameter.
 - Steamed milk is the return.
 - Calling the function is the action I turn on the button of the steamed milk machine.

In order to make a cup of café latte, I turned on an espresso machine (=calling the first function) and I got the espresso (=return). Then, I turned on the steamed milk machine(=calling the second function) and used the espresso (=return) to mix with steamed milk(=return).
If I didn’t have the espresso, I can not mix it with steamed milk so I can not make a cup of café latte, even if I turn on the steamed milk machine.
This is the way I understand the difference between those.
___


## 2. The difference between `return` and `console.log`

After I understood the difference between `return` and `calling the function`, I also got confused about the difference between "`return` and `console.log`. Because my teacher said if you make the function, you always should write `return`, however, sometimes, I do not need to write it instead of `console.log`, so I thought that both have the same role. Then, I tried to write the following code to compare the difference.

- **1st try**

I wrote the following code. If I commented out `return c;`, the result is the same.

```javascript
function sum() {
    let a = 2;
    let b = 3;
    let c = a + b;
    console.log("test a is " + c);
    return c;
  }
  sum();
```
- **2nd try**

I wrote the following code. If I commented out `return c;`, the result was changed and it's starting to make sense.
```javascript
function sum() {
    let a = 2;
    let b = 3;
    let c = a + b;
    console.log("test a is " + c);
    return c;
  }
  let d = sum();
  console.log("test b is " + d);
```
- In the console
```
test a is 5
test b is 5
```
- In the console (commented out `return c;`)
```
test a is 5
test b is undefined
```
`return c;` is crucial in this code because it specifies a value to be returned to the function caller. As you can see, If omitted, undefined is returned instead. `console.log` will not influence the flow of the code, on the other hand, `return` values will cause reactions there.

[Reference link1]
(https://stackoverflow.com/questions/21020608/difference-between-console-log-and-return-in-javascript)
___


## 3. Two types of Array
 
While I learned about array, I god that it has multiple ways to write. At first, it was challenging to distinguish those differences.

**ⅰ. Array of objects**
```
[{},{},{},{}] 
```
Here, we store objects because we want similar types of value. Objects store properties for particular entities.
For example; Student
```javascript
let studentsRecords = [
    {
      name: "John",
      rollNumber: 100,
    },
    {
      name: "Bob",
      rollNumber: 101,
    },
    {
      name: "Nick",
      rollNumber: 102,
    },
  ];
  console.table(studentsRecords);
```
**ⅱ. Nested array**
```  
[[],[],[],[]] 
```
On the other hand, here we have array inside another array. There is no direct relation between array and it has no properties.
```javascript
let nums = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];
console.table(nums);
```
At the moment, I can not imagine the practical situation, but the purpose is different, and most of the time, we use Array of objects.
[Reference link2](https://linuxhint.com/nested-array-working-in-javascript/)
___


## 4. For Loop vs While Loop
I'm also confused about these differences because the following code shows the same result.

**ⅰ. For Loop**
```javascript
for(let count = 0; count <=5; count++){
    console.log(count);
}
```
**ⅱ. While Loop**
```javascript
let i = 0;
while(i <= 5){
    console.log(i);
    i++;
}
```
According to one website,  
>For Loop: A for loop is an iteration method that is best used when you know the number of iterations ahead of time. It’s always followed by the initialization, expression and increment statements.
While Loop: A while loop is an iteration method that is best used when you don't know the number of iterations ahead of time. The contents of the loop are executed as long as the expression evaluates to true.

After I imagine practical examples in my daily life, It's starting to make sense.
I'm in the grocery store to buy tons of apples. 🍎
When I wanna know the cost of 100 apples, I use **For Loop** because I know the number of iterations ahead of time. On the other hand, when I wanna know the number of apples if I will pay 1000 dollars, I use **While Loop** because I don't know the number of iterations ahead of time. This is the way how do I pick between the two.
[Reference link3](https://builtin.com/software-engineering-perspectives/for-loop-vs-while-loop)
[Reference link4](https://byjusexamprep.com/difference-between-for-loop-and-while-loop-i)
___


##5. Loop with Array

When I use For Loop with Array, I have no idea about the meaning of this syntax.
```javascript
let fruitsArray = ["Apple", "Mango","Orange","Pineapple"];

for(let i = 0; i < fruitsArray.length; i++){
    console.log(fruitsArray[i]);
```
I got confused about which statement points to index or length so I wrote detail and tried to think one by one.
```
        index         0        1       2          3
let fruitsArray = ["Apple", "Mango","Orange","Pineapple"];
        length        1        2       3          4

for(let i(index) = 0; i(index) < fruitsArray.length(length); i(index)++){
    console.log(fruitsArray[i(index)]);
```
- In the console
```
i = 0, "Apples"
i = 1, "Mangoes"
i = 2, "Oranges"
i = 3, "Pineapples"
```
I changed `<` to `<=` and the result was changed. 
```
        index         0        1       2          3
let fruitsArray = ["Apple", "Mango","Orange","Pineapple"];
        length        1        2       3          4

for(let i(index) = 0; i(index) <= fruitsArray.length(length); i(index)++){
    console.log(fruitsArray[i(index)]);
}
```
- In the console
```
i = 0, "Apples"
i = 1, "Mangoes"
i = 2, "Oranges"
i = 3, "Pineapples"
i = 4, Undefined 
```
___

1. The difference between return and calling the function   While studying functions, I was...