혼자서 공부하는 자바스크립트 Chapter 04 반복문

01. 배열

• 여러개의 변수를 한 번에 선언해 다룰 수 있는 자료형을 배열이라고 합니다.
• 배열 내부에 있는 값을 요소라고 합니다.
• 비파괴적 처리란 처리 후에 원본 내용이 변경되지 않는 처리를 의미합니다.
• 파괴적 처리란 처리 후에 원본 내용이 변경되는 처리를 의미합니다.

확인 문제

1. 다음 배열들의 2번째 인덱스에 있는 값을 찾아보세요.
   1. ["1","2","3","4"]
   2. ["사과", "배", "바나나", "귤", "감"]
   3. [52,273,32,103,57]
2. 다음 코드의 실행 결과를 예측해 보세요.

   <script>
   	const array = [1, 2, 3, 4];
   
   	console.log(array.length);
   	console.log(array.push(5));
   </script>

3. 다음 표시된 함수들이 파괴적 처리를 하는지 비파괴적 처리를 하는지 구분해 맞는 것에 O표시하세요.

   1. const strA = "사과,배,바나나,귤"
      
      strA.split(",")
      
      strA

   2. const arrayB = ["사과","배","바나나","귤"]
      
      arrayB.push("감")
      
      arrayB

   3. const arrayC = [1,2,3,4,5]
      
      arrayC.map((x) => x * x)
      
      arrayC

   4. const strD = "  여백이 포함된 메세지  "
      
      strD .trim()
      
      strD

코멘트

1. 인덱스는 0부터 세므로 배열에서 세번째 값이 2번 인덱스의 값이다.
   1. ["1","2","3","4"] = > 3
   2. ["사과", "배", "바나나", "귤", "감"] => “바나나”
   3. [52,273,32,103,57] => 32
2. 아래와 같이 출력된다.

   <script>
   	const array = [1, 2, 3, 4];
   	
   	console.log(array.length);
   	console.log(array.push(5));
   </script>
   
   > 4 // 배열의 길이를 출력한다. 
   > 5 // 배열의 마지막에 5라는 값을 추가하고 그 값을 출력한다.
   

3. 원본이 유지되면 비파괴적 처리이다. 따라서 주석과 같다.

   1. const strA = "사과,배,바나나,귤"
      
      strA.split(",")
      
      strA 
      
      // "사과,배,바나나,귤"로 값이 변하지 않아 비파괴적 처리
      

   2. const arrayB = ["사과","배","바나나","귤"]
      
      arrayB.push("감")
      
      arrayB
      
      // ["사과","배","바나나","귤","감"] 값이 변하였으므로 파괴적 처리
      

   3. const arrayC = [1,2,3,4,5]
      
      arrayC.map((x) => x * x)
      
      arrayC
      
      // [1,2,3,4,5] 값이 변화하지 않으므로 비파괴적 처리
      

   4. const strD = "  여백이 포함된 메세지  "
      
      strD.trim()
      
      strD
      // "  여백이 포함된 메세지  " 값이 변화하지 않았으므로 비파괴적 처리
      

---

02. 반복문

• for in 반복문은 배열의 인덱스를 기반으로 반복할 때 사용합니다.
• for of 반복문은 배열의 값을 기반으로 반복할 때 사용합니다.
• for 반복문은 횟수를 기반으로 반복할 때 사용합니다.
• while 반복문은 조건을 기반으로 반복할 때 사용합니다.
• break 키워드는 switch 조건문이나 반복문을 벗어날 때 사용합니다.
• continue 키워드는 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행합니다.

확인 문제

1. 다음 프로그램의 실행 결과를 예측해 보세요.

   <script>
   	const array = ['사과','배','귤','바나나']
   
   	console.log('# for in 반복문')
   	for (const i in array) {
   		console.log(i)
   	}
   
   	console.log('# for of 반복문')
   	for (const i of array) {
   		console.log(i)
   	}
   </script>

2. 다음 프로그램의 실행 결과를 예측해 보세요. 혹시 오류가 발생한다면 어디를 수정해야할까요?

   <script>
   	const array = []
   	for (const i = 0; i < 3; i++) {
   		array.push((i+1) * 3)
   	}
   	console.log(array)
   </script>

3. 1부터 100까지 숫자를 곱한 값을 계산하는 프로그램을 만들어 보세요. 그리고 코드를 실행해 나온 결과를 확인해 보세요.

   <script>
   	let output = 1
   
   
   
   	console.log(`1~100의 숫자를 모두 곱하면, ${output}입니다.`)
   </script>

4. 처음에는 조금 어려울 수 있겠지만, 활용 예제의 피라미드를 활용해서 다음과 같은 피라미드를 만들어 보세요.

   <script>
   	// 변수를 선언합니다.
   	let output = ''
   	const size = 5
   
   	// 반복합니다.
   
   
   	//출력합니다.
   	console.log(output)
   
   </script>
   
       *
      ***
     *****
    *******
   *********
    *******
     *****
      ***
       *

코멘트

1. for in 반복문의 i는 인덱스, for of 반복문의 i는 배열의 요소를 참조한다. 아래와 같이 출력된다.

   # for in 반복문
   0
   1
   2
   3
   # for of 반복문
   사과
   배
   귤
   바나나

2. for 문을 사용할때 let을 이용해서 변수를 선언해야한다. 따라서 아래와 같이 수정해야한다.

   <script>
   	const array = []
   	for (let i = 0; i < 3; i++) {
   		array.push((i+1) * 3)
   	}
   	console.log(array)
   </script>
   
   > (3) [3, 6, 9]

3. for 반복문을 이용해서 1부터 100까지 곱하는 코드를 작성하면 다음과 같다.

   <script>
   	let output = 1
   	
   	for (let i = 1; i <= 100; i++) {
   		output = output * i
   		console.log(`${i}, ${output}`)
   	}
   	
   	console.log(`1~100의 숫자를 모두 곱하면, ${output}입니다.`)
   </script>
   
   > 1~100의 숫자를 모두 곱하면, 9.33262154439441e+157입니다.
   // 값이 너무 커서 지수형으로 출력되는 것 같다.
   

4. 주석으로 대체

   <script>
   	let output = ''
   	const size = 5
   
   	for (let i = 1; i <= size; i++) {
   		// 별이 증가하는 5줄을 만들기 위한 반복문
   		for (let j = size; j > i; j--) {
   			// 줄이 바뀔 때마다 여백이 줄어드는 반복문
   			output += " ";
   		}
   		for (let k = 0; k < 2 * i - 1; k++) {
   			// 줄이 바뀔 때마다 별이 증가하는 반복문
   			output += "*";
   		}
   		// 매 루프마다 줄 바꿈을 추가하는 코드
   		output += "\n";
   	}
   	for (let l = size-1; l > 0; l--) {
   		// 별이 감소하는 4줄을 만들기 위한 반복문
   		for (let h = size; h > l; h--) {
   			// 여백이 점점 증가하는 반복문
   			output += " ";
   		}
   		for (let m = 0; m < 2 * l - 1; m++) {
   			// 별이 점점 감소하는 반복문
   			output += "*";
   		}
   		// 매 루프마다 줄 바꿈을 추가하는 코드
   		output += "\n";
   	}
   	console.log(output);
   </script>
   
   
   ---------------
   // repeat() 메소드를 활용한 코드
   
   for (let i = 1; i <= size; i++) {
     const spaces = ' '.repeat(size - i);
     const stars = '*'.repeat(2 * i - 1);
     output += spaces + stars + '\n';
   }
   
   for (let i = size - 1; i > 0; i--) {
     const spaces = ' '.repeat(size - i);
     const stars = '*'.repeat(2 * i - 1);
     output += spaces + stars + '\n';
   }
   
   console.log(output);