자바스크립트 반복문 정복하기

1. for문

• 가장 일반적인 여러 언어들에서 많이 사용되는 반복문.
• 원하는 시작점에서 끝점까지 또는, 중간에 break가 가능.

• 예시

  	for (let i = 0; i < 3; i++)
     {
     	console.log(hi);
     }
     # 결과 : hi\n hi\n hi\n
     # \n은 enter를 의미

2. forEach

• 배열을 순회하므로 중간에 break문을 사용할 수 없음.
• 만약 특정한 부분에서 멈추고 싶다면 for문을 사용해야 함.
• for문보다 속도가 빠름.

• 예시

     const a = [1, 2, 3, 7, 6, 10];
  	 a.forEach(data => {
     	console.log(data);
     }); 
     # 배열의 모든 값을 도는데, 그 하나하나의 값들은 data라는 이름으로 가져오겠다는 의미.
     # data는 사용자 지정 변수명으로 아무 이름이나 적어도 상관 없음.
     # 결과 : 1\n 2\n 3\n 7\n 6\n 10\n

3. map

• 실행결과를 모은 새 배열을 리턴.
• 따로 return 값을 주지 않으면, 원본 배열 길이 만큼의 undefined가 담긴 배열이 return.
• 원본 배열 값은 변하지 않음.
• forEach와 마찬가지로 break 사용 불가.
• 배열 순회 후 새 배열을 얻고 싶은 경우 추천.

• 예시

  	const a = [1, 2, 3, 7, 6, 10];
  	 b = a.map(data => {
     	console.log(data);
        return (data + 1);
     });
     console.log(b);
    # forEach와 동일하지만, return을 통해 새 배열을 받아올 수 있음.
    # console.log(data)결과 : 1\n 2\n 3\n 7\n 6\n 10\n
    # console.log(b)결과 : 2\n 3\n 4\n 8\n 7\n 11\n

4. reduce

• 덧셈에 주로 사용.
• return 값이 누적값 자리에 들어감.
• 초기값이 없으면
  • 누적값은 0번째 인덱스 값
  • 현재값은 1번째 인덱스 값
• return 값이 없으면
  • 처음 누적값은 초기값 또는 0번 인덱스 값을 가지게 됨.
  • 2번째 부터 누적값은 undifined
• 최종 return 값 : 마지막 누적값 + 마지막 현재값

• 초기값이 없는 경우 예시

  		const a = [1, 2, 3, 7, 6, 10];
    //a.reduce((누적값, 현재값, 인덱스, 요소) => {return}, 초기값);
    b = a.reduce((sum, cur, i) => {
    	console.log(sum, cur, i);
        return sum + cur;
    })
    console.log("b = " + b);

  • 결과 :

• 초기값이 있는 경우 예시

   const a = [1, 2, 3, 7, 6, 10];
    a.reduce((sum, cur, i) => {
       console.log(sum, cur, i);
        return sum + cur;
    }, 0);

  • 결과 :

• Tip1. 초기값을 배열로 두는 등 많은 부분 활용도 가능

   const a = [1, 2, 3, 7, 6, 10];
   const b = a.reduce((sum, cur, i) => {
       if (cur % 2) sum.push(cur);
       return sum;
   }, []);
   console.log(b);
   # 결과 : [1, 3, 7]

• Tip2. 만약 배열 값이 한개일 경우 (reduce 함수 안쪽은 실행되지 않음.)

  const a = [1];
    const b = a.reduce((a, cur) => {
        console.log(a, cur);
        return a + cur});
    console.log("b = " + b);
    # 결과 : b = 1
    # return에 어떤 값을 넣더라도 b는 a[0]값이 나옴.

reduce 참고 : https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d