
javascript를 통해 비동기 코드를 처리하는 기본적인 방법으로는 Callback 함수, Promise, async/await 등이 있다. 하지만 다수의 비동기 요청의 실행이 필요한 경우 Promise.all()을 사용해볼 수 있다.

## **Promise.all()이란?**

여러 개의 Promise를 동시에 처리하고, 모든 Promise가 완료되었을 때 그 결과들을 반환하는 javascript의 메서드이다.

Promise.all()은 배열형태의 Promise들을 인자로 받고, 이 Promise들은 병렬적으로 실행된다. Promise.all()은 해당 Promise들의 결과를 배열로 반환한다.

**만약 하나라고 Promise가 거부되면, 첫 번째 거부된 Promise를 반환하고, 나머지 Promise들은 무시된다.**

## **Promise.all()을 사용하는 이유**

Promise.all()을 사용하면 병렬적으로 실행되는 Promise들을 효율적으로 관리하고, 모든 Promise의 결과를 한 번에 처리할 수 있다. 이는 비동기 작업을 동시에 처리하고 작업이 완료되었을 때 결과를 수집해야 하는 상황에서 유용하다.

예를 들어 3초가 소요되는 비동기 요청 a, 2초가 소요되는 비동기 요청 b, 1초가 소요되는 비동기요청 c를 async/await을 통해 순차적으로 처리하게 되는 경우 총 6초가 소요되지만, Promise.all()을 통해 이전 요청이 완료되는 것을 기다리지 않고 비동기적으로 병렬로 실행시킨다면 3초만에 실행을 완료시킬 수 있는 것이다.

```javascript

// acyns/await

cosnt test1 = async () =>{
	await a() // 3000ms
    await b() // 2000ms
    await c() // 1000ms
}
// 약 6초 소요

const test2 = async () =>{
	const [res1, res2, res3] = await Promise.all([
    	a(),
        b(),
        c()
    ])
    return [res1, res2, res3]
}
// 약 3초 소요

```

## **Promise.all() 사용 상황**

아래와 같이 특정 DB의 데이터를 연속적으로 도출하기 위해 async/await과 Promise.all()을 사용해봤다.

```javascript

// 1) async/await
async func1(){
	const community_with_likes = await community.map(async (item) => {
      const like_list = await this.communityLikesRepository.find({
        where: {
          community_id: item.community_id,
        },
      });
      return like_list;
    });
}

// 2) Promise.all()
async func2(){
	const community_with_likes = await Promise.all(
      community.map(async (item) => {
        const like_list = await this.communityLikesRepository.find({
          where: {
            community_id: item.community_id,
          },
        });
        return like_list;
      }),
    );
}

```

### **1. async/await**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOMvFZ%2FbtsgB32dgj6%2FbaANEHQzX0hxTVckIjOPiK%2Fimg.png)

async/await을 사용해 결과를 출력하려고 할 때는 위와 같이 원하는 방식대로 데이터가 출력되지 않았다.

### **2. Promise.all()**

하지만 Promise.all()을 사용해 결과를 도출하니 아래와 같이 원하는 결과값을 볼 수 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fo73VZ%2FbtsgCGeohNN%2F42YW4sTfKAiXcl3VeJgP51%2Fimg.png)

비동기 처리를 다루는 방법은 여러가지가 있지만, 내가 적용하고자 하는 작업의 특성에 맞게 알맞는 방법을 골라서 사용하는 것이 좋겠다.

---

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

https://code-masterjung.tistory.com/91


Promise.all()은 언제 쓰고 왜 쓰나요? - 여러 비동기 요청 한 번에 처리하기

javascript how to use promise.all


# Dynamic import란?

> import() 표현식으로 사용하며, 표현식은 모듈을 읽고 해당 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 Promise를 반환한다. 호출은 어디서나 가능하다.

# Dynamic import를 사용하는 이유

- 기존 import문은 정적인 방식으로, 정적으로 가져오는 경우 코드 로드 속도가 느려지고, 가져오는 코드가 필요할 가능성이 적거나 없을 수 있다.
- 정적으로 가져올 때 프로그램의 메모리 사용량이 크게 증가하고 가져오는 코드가 필요할 가능성이 낮다.
- import문에 동적 매개변수를 사용할 수 없다.

> 즉, 동적으로 import하는 것은 성능 향상과 필요한 경우에 맞춰 사용하는 것에 용이하다.

## 사용법

필요한 함수들을 정의하고, 필요한 곳에서 import하여 원하는 방식대로 적용해준다.

예시 코드

```javascript
// someFn.js

export const greeting = () => {
  console.log("어서오시고");
};

export const importMe = () => {
  console.log("다이나믹 임포트를 해주세요");
};

export const easy = () => {
  console.log("쉽죠?");
};

export const add = (a, b) => console.log(a + b);
```

```javascript
// use import()
export const DynamicImport = () => {
  // async / await 방식
  const loadGreeting = async () => {
    const DI = await import("./someFn.js");
    DI.greeting();
  };
  const loadImportMe = async () => {
    const DI = await import("./someFn.js");

    DI.importMe();
  };
  const loadEasy = async () => {
    const DI = await import("./someFn.js");
    DI.easy();
  };

  const loadAddAwait = async (a, b) => {
    const DI = await import("./someFn.js");
    return DI.add(a, b);
  };
  // 기본 방식
  const loadAdd = (a, b) => {
    const DI = import("./someFn.js")
      .then(module => {
        module.add(a, b);
      })
      .catch(err => err);
    return DI;
  };

  return (
    <div>
      <p>DynamicImport component</p>
      <button onClick={loadGreeting}>loadGreeting</button>
      <button onClick={loadImportMe}>loadImportMe</button>
      <button onClick={loadEasy}>loadEasy</button>
      <button onClick={() => loadAdd(1, 2)}>loadAdd</button>
      <button onClick={() => loadAddAwait(5, 5)}>loadAddAwait</button>
    </div>
  );
};
```

## Promise를 반환하기 때문에 async/await을 통한 사용도 가능하다.

위 코드를 통해 생성한 버튼들을 모두 한 번씩 클릭해주면 아래와 같이 사용되는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyOVoT%2Fbtr4v801voG%2FmX38iUM5zpLCGKZ5nkyWYK%2Fimg.png)

> 참고사항 : Dynamic import는 일반 스크립트에서도 동작하기 때문에 script type="module"이 없어도 된다.

### 주의사항 : import()는 함수 호출과 문법이 유사해 보이지만 함수 호출이 아니다. super()처럼 괄호를 사용하는 특별한 문법 중 하나이다. 따라서 import를 변수에 복사하거나 call/apply 등의 사용은 불가능하다.

---

참조

MDN : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

Modern js : https://ko.javascript.info/modules-dynamic-imports


Dynamic import를 사용해 동적으로 모듈 가져오기

javascript dynamic import


# jest란?

> 단순성에 중점을 둔 javascript 테스트 프레임워크로, babel, Typescript, node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동한다.

본 포스팅은 React 환경을 기준으로 작성되었다.

## 1. jest 설치

```bash
npm install --save-dev jest @babel/preset-env
# or
yarn add --dev jest @babel/preset-env
```

node.js 환경에서 import 등의 ES6 문법을 사용하기 위해 @babel/preset-env도 함께 설치해준다.

## 2. 루트 경로에 babel.config.js 파일 생성

```javascript
module.exports = {
  presets: [
    "@babel/preset-env",
    // typescript를 사용하는 경우 yarn add --dev @babel/preset-typescript 설치 후
    // 아래와 같이 preset을 추가해준다.
    // "@babel/preset-typescript"
  ],
};
```

babel config 파일까지 생성이 완료됐다면 test 파일을 사용할 준비가 다 된 것이다.

## 3. jest가 인식하는 test file 이름

- {filename}.test.js
- {filename}.spec.js

## 4. 테스트 실행

jest 커맨드만으로도 테스트 코드를 진행할 수 있지만, 다른 플래그와 함께 사용할 수 있다.

```bash
--coverage # 프로젝트의 테스트 커버리지를 함께 나타내준다.
--watch # 대상 코드나 테스트 코드에 변경이 생기면 테스트를 다시 실행한다.

# ex) yarn jest --watch --coverage
```

jest만 실행한 터미널

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmEHBz%2Fbtr4t9fB6IJ%2Fl1JqzgbkjoBxDREUdoSgzK%2Fimg.png)

--coverage와 함께 실행한 터미널

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPTj6f%2Fbtr4vjvmeEt%2Ft5NIYNk6kzRJ4PQ1IQA48k%2Fimg.png)

> 참고 : jest는 테스트 코드 내에서 오류가 발생할 때만 테스트를 fail시키기 때문에 test("",()=>{})와 같이 테스트 코드가 비어있더라도 테스트를 통과할 수 있다.

## 5. 테스트 코드 패턴

### AAA 패턴 (Arrange - Act - Assert)

- A 조건에서 B를 실행했을때 예상한 결과가 C가 나오는가? 라는 흐름의 패턴이다.

예제

```javascript
// 기존 함수
export const add = (a, b) => {
  return a + b;
};

// somefn.spec.js - 테스트코드 함수

import { add } from "./someFn";

test("add 함수 테스트: result = a+b", () => {
  // 조건
  const a = 2;
  const b = 3;
  const result = 5;

  // 실행
  const actResult = add(a, b);

  // 평가
  expect(actResult).toBe(result);
});
```

평가 부분의 코드는 .toBe()라는 matcher 함수를 통해 actResult를 실행했을 때 result가 나올 것이라는 기대를 갖고 코드를 평가하게 된다.

아래와 같이 여러 함수를 한 테스트 코드 안에 넣을 수도 있지만, 리팩토링 시 불편한 경험을 할 수 있기 때문에 상황에 맞게 사용해주는 것이 좋을 것 같다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FckHjWD%2Fbtr4t5Eptqn%2FccX4fWxWW6GZ9edDMtjdAK%2Fimg.png)

주요 matcher 함수

- toBe() : 원시형 데이터 비교
- toEqual() : 참조형 데이터를 깊은 비교를 통해 비교
- toBeTruthy() : 값이 참인지 검사
- toContain() : 특정 요소가 배열 안에 존재하는지 검사
- not : 다른 matcher 함수 앞에 체이닝해 사용하며, 해당 값의 반대값이 참인지 검사 (not은 함수가 아닌 property)

공식 문서에서 더 자세하게 확인해볼 수 있다. (https://jestjs.io/docs/using-matchers)

## 6. 테스트 코드를 통해 할 수 있는 것

- 내가 작성한 함수들이 내가 원하는대로 작동하는지 확인할 수 있다.
- 테스트 코드 작성을 통해 TDD 방식의 개발 방법론을 적용할 수 있다.

## TDD란?

> TDD는 테스트 주도 개발(Test Driven Development)을 뜻하며, 테스트 케이스를 우선적으로 설계해 개발을 진행하는 방법론이다.

### 1. 테스트 케이스를 우선적으로 설계하고,

### 2. 함수를 테스트 케이스에 맞춰 제작하며,

### 3. 로직을 개선하며 1~3을 반복한다.

즉, 실패-성공-리팩토링의 반복으로 볼 수 있다.

TDD의 예시

https://velog.io/@velopert/TDD%EC%9D%98-%EC%86%8C%EA%B0%9C

---

참조 : https://jestjs.io/


javascript jest test code


# 1. 숫자열을 문자열로 바꾸기

```javascript

// 숫자는 숫자+""만 해줘도 (혹은 다른 문자를 더해줘도) 문자열로 바뀐다.

let a = 1234
console.log(a) // a는 숫자 1234
let b = a+""
console.log(b) // b는 문자 '1234'
let c = 1234.toString()
console.log(c) // c는 문자 '1234

```

# 2. 문자열을 숫자열로 바꾸기

```javascript

//s는 String
Number(s)로 문자열을 숫자로 변환 - 인자를 바꿀 수 없으면(ex. 123입니다) NaN을 리턴한다.
parseInt(s)로 문자열을 숫자로 변환 - 정수나 NaN을 리턴한다.
parseFloat(s)로 문자열을 숫자로 변환 - 부동 소수점 숫자를 반환한다.

// parseFloat 예제

function circumference(r) {
  return parseFloat(r) * 2.0 * Math.PI;
}

console.log(circumference(4.567));
// 28.695307297889173

console.log(circumference('4.567abcdefgh'));
// 28.695307297889173

console.log(circumference('abcdefgh'));
// NaN


```

# 3. 문자열 다루기

```javascript

String.trim() - 문자열의 공백을 제거
      .trimStart() - 문자열 왼쪽 공백 제거
      .trimEnd() - 오른쪽 공백 제거
      .slice(0,-1) - 문자열에서 텍스트를 추출하고 새 문자열을 반환
      .split('') - 문자열 String을 ()안 인자(''등)로 나눠 각 글자별로 배열 생성
       		// ex) let name=hanbbi; name.split('') // [ 'h', 'a', 'n', 'b', 'b', 'i' ]
      .join('') 배열 내 요소들을 인자를 통해 이어준다.
      .replace("인자1","인자2") - 문자 내 맨 처음 발견된 인자1을 찾아 인자2로 바꿔준다.
      .replace("인자1","인자2") - 문자 내 모든 인자1을 찾아 인자2로 바꿔준다.
      .repeat() - 해당 문자를 ()번 반복
      .includes() - 문자열이 특정 문자열을 포함하는지 확인
      .charAt(0) - 스트링의 0번째 글자 가져오기(result = string)
      .substring(0,5) - 스트링의 0~4번째 글자 가져오기

```


javascript basic 1 num str


# Javascript 날짜 다루기

## 날짜 계산

```javascript
// 날짜 예제
// Sunday - Saturday : 0 - 6
const someday = new Date("2022-01-23");
// 날짜 형식은 자유로움 ('january 23 ,2022') 처럼 사용 가능

const day1 = someday.getDay();
console.log(day1); //  22.01.23은 일요일이므로, 0 반환

// 날짜 추출
let today = new Date(); // 인자가 비어있는 경우 현재 날짜/시간 반환

let year = today?.getFullYear();
console.log(year); // 123 - 2023년 반환값 (2022년 반환값 = 122)

let month = today?.getMonth() + 1; // javascript에서는 1월을 0부터 계산해주기 떄문에 + 1을 해준다.
console.log(month); // 3

let day = today?.getDate();
console.log(day); // 6

let hour = today?.getHour();
console.log(hour); // 현재 시간 추출

let minutes = today?.getMinutes();
console.log(minutes); // 현재 분 추출

let seconds = today?.getSeconds();
console.log(seconds); // 현재 초 추출
```


javascript basic 2 date


# Javascript Math 메서드

## 1. 소수점 표현

```javascript
// n = Number
Math.ceil(n); // 올림
Math.floor(n); // 내림
Math.round(n); // 반올림
Math.toFixed(n); // 소수점 n의 자릿수까지 표현 / 매개변수가 없으면 1의자릿수 반환

// .toFixed 예제
let num = 10.987654321;

num.toFixed(); // 11
num.toFixed(1); // 11.0
num.toFixed(2); // 10.99
num.toFixed(3); // 10.988
num.toFixed(4); // 10.9877
num.toFixed(5); // 10.98765
num.toFixed(10); // 10.9876543210
num.toFixed(14); // 10.98765432100000
```

## 2. 계산/정수 처리

```javascript
Math.abs(); // 절대값 반환
Math.max(); // 인자 중 가장 큰 값 반환 ex. Math.max(1,2,3) - 3 , Math.max([4,5,6]) - 6
Math.min(); // 인자 중 가장 작은 값 반환 - Math.max 반대
Math.pow(x, y); // 인자간 거듭제곱 값 반환 === x**y와 동일
Math.random(); // 0이상 1미만 랜덤값 반환
Math.sqrt(); // 제곱근 반환
```


javascript basic 3 math


# JavaScript 배열 다뤄보기

## 1. 배열 수정

```javascript
let Arr = [1, 2, 3, 4, 5];

// Arr배열의 0번째를 123으로 수정
Arr[0] = 123; // Arr = [123,2,3,4,5]
```

## 2. 배열 정렬 (Array.sort())

array.sort()는 매개변수가 입력되지 않으면 유니코드 순서에 따라 정렬된다.

또한 sort()는 원본 array를 참조하기 때문에 sort()를 통한 정렬은 원본 array도 동일하게 변경된다.

### 숫자 배열 정렬

```javascript
let arr = [1, 3, 2, 4];

arr.sort(); // [1,2,3,4]
arr.sort((a, b) => a - b); // [1,2,3,4]
arr.sort((a, b) => b - a); // [4,3,2,1]
```

### 문자 배열 정렬 (대소문자 구분x)

```javascript
let arr3 = ["jon", "awre", "gwgw", "zgfzg"];

// 오름차순
arr.sort(function (a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();

  if (upperCaseA > upperCaseB) return 1;
  if (upperCaseA < upperCaseB) return -1;
  if (upperCaseA === upperCaseB) return 0;
}); // ['awre', 'gwgw', 'jon', 'zgfzg']

// 내림차순
arr.sort(function (a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();

  if (upperCaseA < upperCaseB) return 1;
  if (upperCaseA > upperCaseB) return -1;
  if (upperCaseA === upperCaseB) return 0;
}); // ['zgfzg', 'jon', 'gwgw', 'awre']
```

### 영어가 아닌 한글 등의 문자 정렬

```javascript
let arr = ["가", "나", "바", "다"];

arr1.sort((a, b) => a.localeCompare(b)); // ['가', '나', '다', '바']
arr1.sort((a, b) => b.localeCompare(a)); // ['바', '다', '나', '가']
```

## 3. 배열 메서드

```javascript

let Arr = [1,2,3,4,5]

    // 배열의 마지막에 새로운 요소를 추가 / 변경된 배열의 길이를 반환
Arr.push(12) // Arr = [1,2,3,4,5,12] / 6

	// 배열의 마지막 요소를 제거 / 한 후, 제거한 요소를 반환
   .pop() // Arr = [1,2,3,4] / 5

   // 배열의 첫 번째 자리에 새로운 요소를 추가/ 변경된 배열의 길이를 반환
   .unshift(12) // Arr = [12,1,2,3,4,5] / 6

   // 배열의 첫 번째 요소를 제거 /  제거한 요소를 반환
   .shift() // Arr = [2,3,4,5] / 1

   // 배열의 1번째 index부터 2개 원소 제거
   .splice(1, 2) // Arr = [1, 4, 5] / [2, 3] 제거됨

   // 배열 반전
   .reverse() 배열 반전 // [5,4,3,2,1]

   // 배열 계산
   //Arr.reduce((이전결과, 현재요소)=>이전결과+현재요소, 초기값)
   // 초기값이 없는 경우 acc = Arr[0] , cur = Arr[1] 이 된다.
   .reduce((acc,cur)=>acc+cur) 배열 계산 // 15

    // 배열 추출
    // .slice(x, y) x이상 y미만 index에 해당하는 배열 추출
    // 매개변수가 x밖에 없다면 x 이상 index에 해당하는 배열 추출
    // 매개변수가 음수인 경우 ex. (-2) 라면, 배열 끝에서 2번째 index 이상의 배열 추출
    .slice(0, 2) // [1,2]

```


javascript basic 4 array 1


# 고차함수와 메서드를 통해 JavaScript 배열 다뤄보기

## 고차함수란?

> 함수를 인자로 받거나, 함수를 반환함으로써 작동하는 함수로, .map() , .filter() , .forEach() , .reduce() 등이 있다.

### 참고

아래의 메서드들은 모두 원본 배열에 영향을 주지 않는다.

또한 함수 안의 화살표 함수 arr.filter/map/...((element)=>(element>2)) 와 같이 괄호()를 이용하면 return을 해줄 필요가 없지만, arr.filter/map/...((element)=>{return element > 2}) 처럼 중괄호를 사용하면 return을 꼭 해줘야 한다.

### Array.filter()

특정 조건을 부합하는 값만 모아서 새로운 배열을 만들어준다.

```javascript
// ex
const arr = ["a", "b", "b", "c"];
const filtered = arr.filter(element => element != "b"); // arr의 원소는 b가 아닌 값으로 거른다.
console.log(arr); // ['a', 'b', 'b', 'c']
console.log(filtered); // ['a', 'c']

const arr_num = [0, 1, 2, 3, 4, 5];
const new_array = arr_num.filter(element => element > 3); // arr_num의 원소는 3을 초과한다
console.log(new_array); // [ 4, 5 ]
```

### Array.map()

반복문처럼 사용 가능. 원본 배열을 흐트러뜨리지 않고, 새로운 배열을 반환한다.

단, key 값 같은 경우에는 값이 재할당되기 때문에 원본과 비교하는 의미가 없다. (ex. 리액트 사용 시)

```javascript
const array_num = [0, 1, 2, 3, 4, 5]; // arr_n은 상수이지만
const new_arr_num = array_num.map(
  element => element * 10, // 요렇게 map으로 *10을 돌려주면
);
console.log(new_arr_num); // [ 0, 10, 20, 30, 40, 50 ] // 원본 배열 변경 없이 새 배열이 잘 만들어진다.
```

### Array.concat()

두 배열을 합친다. 단, 중복 제거는 하지 않는다.

```javascript
const array_num = [0, 1, 2, 3, 4, 5];
const new_array = [4, 5];
const merge = array_num.concat(new_array);
console.log(merge); // [0, 1, 2, 3, 4, 5, 4, 5]
```

### Array.from()

배열로 만들어준다.

```javascript
const my_name = "vihan9";
const my_name_array = Array.from(my_name);
console.log(my_name_array); // [ 'v', 'i', 'h', 'a', 'n', '9' ]

// 조건을 넣어 배열을 만들고 싶다면? ex
const my_name_array = Array.from({ length: 4 }, (item, index) => index);
console.log(my_name_array); // [ 0, 1, 2, 3 ] // length가 4인 배열을 만들어준다.

// 어떤 배열을 index 값 배열로 바꾸고 싶다면? ex
const my_name = "vihan9";
const num_array = Array.from(my_name, (item, index) => index);
console.log(num_array); // [ 0, 1, 2, 3, 4, 5 ]
```

### Array.find()

숫자열 배열의 특정 값을 찾아주며, 조건에 맞는 첫 번째 값을 호출해준다.

```javascript
const arr_num = [0, 1, 2, 3, 4, 5];
const find_num = arr_num.find(v => v > 3);
console.log(find_num); // 4 // 3을 초과하는 첫 값인 4를 출력한다.
```

### indexOf()

배열에서 지정된 요소를 찾을 수 있는 첫 번째 반환하고, 존재하지 않으면 -1을 반환한다.

```javascript
const comment = "오늘도 오류 없는 하루가 되게 해주세요";
const searchStr = "오류";
const searchStr2 = "해주세요";

const indexOfFirst = comment.indexOf(searchStr);
const indexOfFirst2 = comment.indexOf(searchStr2);

console.log(indexOfFirst); // 4 // 오류는 4번째 인덱스부터 시작한다.
console.log(indexOfFirst2); // 17 // 해주세요는 17번째 인덱스부터 시작한다.
```


javascript basic 4 array 2


# for문 사용법

## for문

```javascript

const arr = [1,2,3,4,5,6,7,8,9,10];

const newArr = []
 (초기값(i=0) ; 조건(i가 10 미만까지 반복) ; 증감문(i는 1씩 증가한다.))
for(let i = 0;i<arr.length;i++){
    newArr.push(arr[i])
}
// console.log
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

// 원한다면 조건문을 통해 반복 중단 가능
for(~~){
	if(a===b){
    	braek
    }
}

// for문은 i를 통해 반복할 횟수를 설정하여 원하는 반복작업을 // 실행하게 해준다.

```

## for ~ of

```javascript
let test1 = [1, 2, 3, 4, 5];

let test2 = [4, 5, 6, 7, 8];

// test1 배열 안의 모든 요소를 순회
for (const items of test1) {
  test2.push(items);
}
console.log(test2); // [4, 5, 6, 7, 8, 1, 2, 3, 4, 5]
```

## for ~~ in

```javascript
const obj = { a: 1, b: 2, c: 3 };

// 오브젝트 안의 모든 객체 순회
for (const property in obj) {
  console.log(`${property}: ${obj[property]}`);
}

// "a: 1"
// "b: 2"
// "c: 3"
```

## while

while문의 첫 괄호() 안의 값이 true인 경우 반복해서 실행된다.

```javascript
let n = 0;

// n이 3 미만인 경우는 반복하여 실행
while (n < 3) {
  n++;
}

console.log(n); // 3
```

# 배열 메서드 반복문처럼 사용하기

## Array.forEach()

forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.

```javascript

const arr = [1,2,3,4,5,6,7,8,9,10];

// element라는 이름은 중요하지 않다. 상황에 맞는 이름을 사용하는 것이 중요하다.
arr.forEach((element)=>console.log(element));

// console.log
1 2 3 4 5 6 7 8 9 10

// 간단 예제

arr.forEach((element)=>console.log(element*10)); // 10 20 30 40 --- 80 90 100

// for문처럼 화살표 함수 오른쪽 부분에 push 등과 같은 메서드를 통해 새 배열을 만들어줄 수도 있다.
const newArr = [];
arr.forEach((item)=>{newArr.push(item)});
// newArr =
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

```

## .map()

forEach와 유사하게 배열 안의 각 요소들에게 콜백 함수를 적용시킨다.

```javascript
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let ex = arr.map(item => item * 10)[
  //console.log(ex)
  (10, 20, 30, 40, 50, 60, 70, 80, 90, 100)
];

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let ex = arr.map((item, index) => item * 10 + `(${index}번째)`)[
  //console.log(ex)
  ("10(0번째)",
  "20(1번째)",
  "30(2번째)",
  "40(3번째)",
  "50(4번째)",
  "60(5번째)",
  "70(6번째)",
  "80(7번째)",
  "90(8번째)",
  "100(9번째)")
];
```
