[ 혼공스 ] 3주차 : 반복문

 

Chap 4. 반복문

1. 배열

• 여러 자료를 묶어서 활용할 수 있는 특수한 자료

 

1) 배열 만들기

[ 요소, 요소, 요소, ... , 요소 ]

• 배열(array) : 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료
• 대괄호를 사용해 생성하고 내부의 값을 쉼표(,)로 구분해 입력
• 요소(element) : 배열 내부에 들어 있는 값 (모든 자료형이 들어갈 수 있음)

2) 배열 요소에 접근하기

• 배열의 기본적인 조작은 문자열과 비슷함
• 각각의 요소에 접근하려면 배열 바로 뒤에 대괄호 [...]를 입력하고 그 안에 숫자를 넣는다.
• 이 때 요소의 순서를 index라고 한다.

배열[ 인덱스 ]

 

• 배열은 여러 개의 요소를 갖기 때문에 일반적으로 이름을 복수형으로 짓는다.
• 그리고 대괄호 안에 계산식을 넣을 수도 있음

 

3) 배열 요소 개수 확인하기

• 배열 내부에 들어 있는 요소의 개수를 확인할 때는 배열의 length 속성을 사용!
• 문자열에서 살펴봤던 length 속성과 비슷한 형태로 사용!

배열.length

4) 배열 뒷부분에 요소 추가하기

(1) push() 메소드를 사용해 배열 뒷부분에 요소 추가하기

• 배열 뒷부분에 요소를 추가할 때는 push() 메소드를 사용함

배열.push(요소)

 

(2) 인덱스를 사용해 배열 뒷부분에 요소 추가하기

• 자바스크립트에서 배열의 길이는 고정이 아님
• 3개의 요소를 가진 배열을 만든 뒤, 10번째 인덱스에 요소를 강제로 추가할 수 있음
• 이때 4~9번째 인덱스는 아무 것도 없는 empty가 됨

• length 속성을 사용한 방법

 

5) 배열 요소 제거하기

 

(1) 인덱스로 요소 제거하기

• splice()라는 메소드를 사용 (접합)
  • 제거할 때도 중간에 넣을 때도 사용 가능

배열.splice(인덱스, 제거할 요소의 개수)

 

(2) 값으로 요소 제거하기

• 값을 기반으로 요소를 제거할 땐 배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해서
  값의 위치를 추출한 뒤 splice() 메소드를 사용해 제거한다.

const 인덱스 = 배열.indexOf(요소) 배열.splice(인덱스, 1)

• indexOf() 메소드는 배열 내부에 요소가 있을 경우 인덱스를 리턴함
• 배열 내부에 요소가 없을 때는 -1을 리턴한다.

 

[ 문자열의 indexOf() 메소드 ]

• 문자열 내부에서 특정 문자열의 위치를 찾을 수 있음

• 백두산의 앞 글자인 '백'의 위치가 5번째 인덱스에 있으니 5를 출력

 

[ 배열 내부에서 특정 값을 가진 요소 모두 제거하기 ]

• indexOf()메소드와 splice()메소드는 배열 내부 요소를 하나만 제거할 수 있음
• 배열 내부에서 특정 값을 가진 요소를 모두 제거하고 싶을 때는 반복문을 사용하거나
• filter() 메소드를 사용해야함.
• 일반적으로 filter() 메소드를 많이 사용하며, 사용 방법은 다음과 같다.

 

 

6) 배열의 특정 위치에 요소 추가하기

• 배열의 특정 위치에 요소를 추가하는 코드는 자주 사용하지는 않지만 간혹 사용됨
• splice() 메소드를 사용한다.
• splunk() 메소드의 2번째 매개변수에 0을 입력하면 splice() 메소드는 아무 것도 제거 하지 않음
• 3번째 매개변수에 추가하고 싶은 요소를 입력

배열.splice(인덱스, 0, 요소)

 

[ 더 알아보기 ] 자료의 비파괴와 파괴

• 자바스크립트는 자료 처리를 위해서 다양한 연산자 , 함수, 메소드를 제공
• 자료 처리 연산자, 함수, 메소드는 처리 후 원본의 상태 변화에 따라 크게 비파괴적 처리와 파괴적 처리로 구분 가능

 

(1) 비파괴적 처리

• 처리 후에 원본 내용이 변경되지 않는다.

• c를 만든 후에 a와 b의 원본 내용이 변하지 않음

 

(2) 파괴적 처리

• 처리 후에 원본 내용이 변경된다.

• push() 메소드를 실행한 뒤 array이 변경됨!

과거에는 컴퓨터 메모리가 많이 부족했다. 따라서 최대한 메모리를 절약하는 방식으로 설계되었고

배열처럼 크기가 어느 정도인지 모르는 대상의 원본과 결과를 모두 메모리에 저장하는 것을 위험함.

따라서 대부분 파괴적 처리로 이루어졌지만 원본이 사라지는 위험을 안고 있음

메모리가 여유로운 현대에는 비파괴적 처리를 우선함

[선택 미션]

3-1 ) 처음 입력한 strA와 마지막 strA의 출력 값이 서로 같음

3-2 ) 처음 입력한 arrayB와 마지막 arrayB 의 출력 값이 서로 다름

3-3 ) 처음 입력한 arrayC와 마지막 arrayC 의 출력 값이 서로 다름

3-4 ) 처음 입력한 str()와 마지막 a str()의 출력 값이 서로 다름

 

2. 반복문

1) for in 반복문

• 배열과 함께 사용할 수 있는 반복문
• 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다.

for in 반복문

<script>     const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']     for (const i in todos) {         console.log(`${i}번째 할 일: ${todos[i]}`)     } </script>

 

2) for of 반복문

• 반복 변수에 인덱스가 들어감
• 반복문 내부에 요소를 사용하려면 fruits[i]와 같은 형태로 사용하며, 안정성을 위해 몇 가지 코드를 더 추가 한다.
• 요소의 값을 반복할 때 안정적으로 사용할 수 있다.

for of 반복문

<script>     const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']     for (const todo of todos) {         console.log(`오늘의 할 일: ${todo}`)     } </script>

오늘의 할 일: 우유 구매 4-2-2.html:4 오늘의 할 일: 업무 메일 확인하기 4-2-2.html:4 오늘의 할 일: 필라테스 수업 4-2-2.html:4

3) for 반복문

• 특정 횟수만큼 반복하고 싶을 때 사용하는 범용적이 반복문

for 반복문 기본

<script>     for (let i = 0; i < 5; i++) {         console.log(`${i}번째 반복입니다.`)     } </script>

0번째 반복입니다. 4-2-3.html:3 1번째 반복입니다. 4-2-3.html:3 2번째 반복입니다. 4-2-3.html:3 3번째 반복입니다. 4-2-3.html:3 4번째 반복입니다.

1부터 N까지 더하기

<script>     let output = 0     for (let i=1; i<=100; i++) {         output += i     }     console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다.`) </script>

1~100까지 숫자를 모두 더하면 5050입니다.

 

(1) for 반복문과 함께 배열 사용하기

• 보통 배열의 length 속성만큼 반복을 돌리는 형태로 사용

for 반복문과 배열

<script>     const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']     for (let i = 0; i < todos.length; i++) {         console.log(`${i}번째 할 일: ${todos[i]}`)     } </script>

0번째 할 일: 우유 구매 4-2-5.html:5 1번째 할 일: 업무 메일 확인하기 4-2-5.html:5 2번째 할 일: 필라테스 수업

for 반복문으로 배열을 반대로 출력하기

<script>     const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']     for (let i = todos.length -1; i >=0; i--) {         console.log(`${i}번째 할 일: ${todos[i]}`)     }     </script>

2번째 할 일: 필라테스 수업 4-2-6.html:5 1번째 할 일: 업무 메일 확인하기 4-2-6.html:5 0번째 할 일: 우유 구매

 

 

4) while 반복문

• if 조건문과 형태가 매우 비슷
• if 와 차이점은 문장을 한 번만 실행하고 끝나는 것이 아니라 불 표현식이 true면 계속해서 문장을 실행

• 조건이 변하지 않는다면 무한히 반복 실행하므로 조건을 거짓으로 만들 수 있는 내용이 문장에 포함되어야 함
• 반복문이 무한 반복 되는 것 -> 무한 루프 (infinite loop)

무한 반복문

<script>     let i =0     while (true) {         alert(`${i}번째 반복입니다.`)         i =i+1     } </script>

while 반복문 기본

<script>     let i = 0     while (confirm('계속 진행하시겠습니까?')) {         alert(`${i}번째 반복입니다.`)         i=i+1     } </script>

• confirm() 함수 : 사용자에게 확인을 받는 대화상자가 실행됨
• 사용자가 [확인] 버튼을 클릭하면 true가 되어 반복문을 계속해서 반복
• 사용자가 [취소] 버튼을 클릭하면 false로 바뀌어 반복을 종료

 

(1) while 반복문과 함께 배열 사용하기

배열과 함께 사용하기

<script>     let i = 0     const array = [1,2,3,4,5]     while ( i < array.length) {         console.log(`${i} : ${array[i]}`)         i++     } </script>

0 : 1 4-2-9.html:6 1 : 2 4-2-9.html:6 2 : 3 4-2-9.html:6 3 : 4 4-2-9.html:6 4 : 5

 

5) break 키워드

• switch 조건문이나 반복문을 벗어날 때 사용하는 키워드
• while 반복문은 조건이 항상 참이므로 무한 반복
• 무한 루프는 break 키워드를 사용해야 벗어날 수 있음

break 키워드 활용

<script>     for (let i = 0; true; i++) {         alert(i + '번째 반복문입니다.')         const inContinue = confirm('계속 하시겠습니까?')         if (!isContinue) {             break         }     }     alert('프로그램 종료') </script>

 

6) continue 키워드

• 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행

continue 키워드의 활용 (1)

<script>     for (let i = 0; i < 5; i++) {         continue         alert(i)             } </script>

alert()함수를 실행하지 않음

continue 키워드의 활용 (2)

<script>     let output=0     for (let i =1; i<=10; i++) {         if (i%2 ==1){             continue         }         output += i     }     alert(output) </script>

30

 

[ 누적 예제 ] 중첩 반복문을 사용하는 피라미드

• 반복문을 여러 겹 중첩해 사용한 반복문
• n-차원 처리를 할 때 사용함
• 1차원 배열 :: 배열이 한 겹으로 감싸진 배열
• 2차원 배열 :: 배열이 두 겹으로 감싸진 배

- 중첩 반복문 사용하기(1)

중접 반복문 사용하기 (1)

<script>     let output = ''     for (let i=1; i<10; i++) {         for (let j=1; j<i; j++){         output += '*'         }         output += '\n'     }     console.log(output) </script>

- 중첩 반복문 사용하기(2)

중첩 반복문 사용하기(2)

<script>     let output=''     for (let i=1; i <15; i++){         for (let j = 15; j>i; j--) {             output += ' '         }         for (let k=0; k<2*i-1;k++){             output += '*'         }         output += '\n'     }     console.log(output) </script>

<script>     let output=''     const size = 5     for (let i=1; i <= size; i++){         for (let j = size; j>i; j--) {             output += ' '         }         for (let k=0; k<2*i-1;k++){             output += '*'         }         output += '\n'     }     for (let i = size -1; i>0; i--){         for (let j = size; j>i; j--){             output += ' '         }         for (let k=0; k<2*i-1; k++){             output += '*'         }         output += '\n'     }     console.log(output) </script>