[혼공JS📒] Chapter04. 반복문

velog에 넣을 짤 찾는 재미로 공부하는듯한..
옴마나 드디어 반복문이다.. 공부하는 부분이 조금 더 어려워지고 복잡해지는만큼 배우는 재미도 더해지는 것 같다.
자바스크립트 3주차 시작! 빠빠샤!._.

3주차	Chapter	기본 미션	선택 미션
3주차	Chapter04	비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기	p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기

✅ 기본 미션

비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기

• 비파괴적 처리
  -비파괴적 처리 : 처리 후에 원본 내용이 변경되지 않음
  -예시

> const a = '안녕'; => 변수 선언
> const b = '하세요';

> const c = a + b; => 문자열을 연결하는 처리

> c
"안녕하세요"

> a
"안녕" => 원본 내용이 변경되지 않음
> b
"하세요" => 원본 내용이 변경되지 않음

• 장점 : 자료를 보호할 수 있음
• 단점 : 메모리를 절약할 수 없음

• 파괴적 처리
  -파괴적 처리 : 처리 후에 원본 내용이 변경
  -예시

> const array = ["사과", "배", "바나나"]; => 변수 선언

> array.push("귤"); => 배열 뒷부분에 추가하는 처리를 함
4

> array
(4) ["사과", "배", "바나나", "귤"] => 원본(array)내용이 변경됨

• 장점 : 배열과 같이 거대해질 수 있는 자료는 메모리를 절약할 수 있음
• 단점 : 원본이 사라지기 때문에 위험

✅ 선택 미션

p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기
-파괴적 처리를 하는지 비파괴적 처리를 하는 구분하여라

① [파괴적 처리 / 비파괴적 처리⭕]

> const strA = "사과, 배, 바나나, 귤"
undefined

> strA.split(",")
(4) ["사과", "배", "바나나", "귤"]

> strA
"사과, 배, 바나나, 귤"

설명
strA의 내용이 바뀌지 않았음

② [파괴적 처리⭕ / 비파괴적 처리]

> const arrayB = ["사과", "배", "바나나", "귤"]
undefined

> arrayB.push("감")
5

> arrayB
["사과", "배", "바나나", "귤", "감"]

설명
arrayB의 내용이 바뀜

③ [파괴적 처리 / 비파괴적 처리⭕]

> const arrayC = [1, 2, 3, 4, 5]
undefined

> arrayC.map((x) => x*x)
(5) [1, 4, 9, 16, 25]

> arrayC
[1, 2, 3, 4, 5]

설명
arrayC의 내용이 바뀌지 않음

④ [파괴적 처리 / 비파괴적 처리⭕]

> const strD = " 여백이 포함된 메시지  "
undefined

> strD.trim()
"여백이 포함된 메시지"

> strD
" 여백이 포함된 메시지  "

설명
strD의 내용이 바뀌지 않음

04-1. 배열

1. 배열 만들기

• 배열 : 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형
• 요소 : 배열 내부에 들어 있는 값
• 대괄호[...]를 사용해 생성
• 내부의 값을 쉼표(,)로 구분해 입력
• 사용방법
  [요소, 요소, 요소, ..., 요소]

예시

> const array = [273, 'String', true, function () {}, {}, [273, 103]];
undefined

> array 
  (6) [273, "String", true, f, {...}, Array(2)]
  --- ------------------------------------------
   ↓                      ↓       
요소개수                  요소          

2. 배열 요소에 접근하기

• 인덱스 : 요소의 순서 ( *자주 사용하는 용어이니 꼭 기억!)
• 가장 앞에 있는 요소를 0번째로 표현
• 사용방법
  배열[인덱스]

예시

> const numbers = [273, 52, 103, 32];
undefined

> numbers[0]
273

> numbers[1]
52

> numbers[1+1] => numbers[2]와 같은 뜻
103

> numbers[1*3] => numbers[3]과 같은 뜻
32

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

• 배열 내부에 들어 있는 요소의 개수를 확인할 때는 length 사용
• 사용방법
  배열.length

예시

> const fruits = ['배', '사과', '키위', '바나나']; => 배열 생성
undefined

> fruits.length 
4 => 배열 fruits에 4개의 요소가 들어있으므로 4 출력

> fruits[fruits.length-1]
"바나나" => fruits[4-1], 배열의 3번째 요소인 "바나나"출력

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

• push() 메소드를 사용해 배열 뒷부분에 요소 추가하기
  -배열 뒷부분에 요소를 추가할 때는 push() 메소드 사용
  -사용방법
  배열.push(요소)

예시

> const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']; => 배열 생성
undefined

> todos
(3) ["우유 구매", "업무 메일 확인하기", "필라테스 수업"]

> todos.push('저녁 식사 준비하기');
4 => 요소가 추가되어 기존 요소 개수에서 추가된 요소 개수 출력 전 요소 개수인 3에서 하나가 추가되어서 4 출력

> todos.push('피아노 연습하기');
4 => 요소가 추가되어 기존 요소 개수에서 추가된 요소 개수 출력 전 요소 개수인 4에서 하나가 추가되어서 5 출력

> todos
["우유 구매", "업무 메일 확인하기", "필라테스 수업", "저녁 식사 준비하기", "피아노 연습하기"] => 뒷부분에 2개의 요소가 추가됨

• 인덱스를 사용해 배열 뒷부분에 요소 추가하기
  -자바스크립트에서는 배열의 길이가 고정이 아님

예시

> const fruitsA = ['사과', '배', '바나나']; => 3개 요소를 가진 배열 생성
Undefined

> fruitsA[10] = '귤'; => 배열 10번째 인덱스에 "귤"을 추가
"귤"

> fruitsA
(11) ["사과", "배", "바나나", emptyx7, "귤"] => 아무것도 없는 4~9번째 인덱스는 empty

5. 배열 요소 제거하기

첫째, 인덱스를 기반으로 제거하는 경우
둘째, 값을 기반으로 제거하는 경우

• 인덱스로 요소 제거하기
  -배열의 특정 인덱스에 있는 요소를 제거할 때는 splice() 메소드 사용
  -splice() 메소드는 요소를 제거할 때뿐만 아니라 요소를 중간에 넣을 때도 사용할 수 있음
  -사용방법
  배열.splice(인덱스, 제거할 요소의 개수)

예시

> const itemsA = ['사과', '배', '바나나']; => 배열 생성
undefined

> itemsA.splice(2,1); => 배열의 2번째 인덱스로부터 1개 요소 제거
["바나나"] => 제거된 요소가 배열로 리턴

> itemsA => 배열의 값을 확인해보면 요소가 제거된 것을 알 수 있음
(2) ["사과", "배"]

• 값으로 요소 제거하기
  -값을 기반으로 요소를 제거할 때는 배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해서 값의 위치를 추출한 뒤 splice() 메소드를 사용해 제거
  -indexOf() 메소드는 배열 내부에 요소가 있을 경우 인덱스를 리턴, 배열 내부에 없을 때는 -1 리턴
  -사용방법
  const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)

예시

> const itemsB = ['사과', '배', '바나나']; => 배열 생성
undefined

> const index = itemsB.indexOf('바나나'); => 바나나가 있는 인덱스 위치를 index에 저장
undefined

> index => 배열 내부에 바나나가 있으므로 해당 요소의 인덱스 출력
2

> itemsB.splice(index,1); => 배열의 2번째 인덱스에 있는 1개의 요소 제거
["바나나"] => 제거된 요소가 배열로 리턴

> itemsB => 배열에서 바나나가 제거됨
(2) ["사과", "배"]

> itemsB.indexOf('바나나'); => 배열에 바나나가 없으므로 -1 출력
-1

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

• 배열의 특정 위치(인덱스)에 요소를 추가할 때는 splice()메소드를 사용
• splice() 메소드의 2번째 매개변수에 0을 입력하면 splice() 메소드는 아무것도 제거하지 않으며, 3번째 매개변수에 추가하고 싶은 요소 입력
• 사용방법
  배열.splice(인덱스, 0, 요소)

예시

> const itemsC = ["사과", "귤", "바나나", "오렌지"]; => 배열 생성
undefined

> itemsC.splice(1, 0, "양파"); 
[]

> itemsC => 1번째 인덱스에 양파가 추가됨
(2) ["사과", "양파", "귤", "바나나", "오렌지"]

👍 마무리

1. 다음 배열들 2번째 인덱스에 있는 값은?
① ["1", "2", "3", "4"] => 3
② ["사과", "배", "바나나", "귤", "감"] => 바나나
③ [52, 273, 32, 103, 57] => 32

설명
배열은 인덱스가 0부터 시작하기 때문에 각각 3, 바나나, 32가 답이다

2. 다음 코드의 실행 결과는?

<script>
  const array = [1, 2, 3, 4]

  console.log(array.length);	
  console.log(array.push(5));
</script>

실행결과 : 4, 5

설명
console.log(array.length) : array 배열의 길이는 4이기 때문에 4가 출력됨

3. 파괴적 처리를 하는지 비파괴적 처리를 하는지 구분

선택미션으로!

04-2. 반복문

1. for in 반복문

• for in 반복문 : 배열 요소를 하나하나 꺼내서 특정 문자를 실행할 때 사용
• 사용 방법

for (const 반복 변수 in 배열 또는 객체) {
  문장
}

• for 반복문의 반복 변수에는 요소의 인덱스들이 들어옴. 이를 활용해 배열 요소에 접근할 수 있음

• 예시

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

실행 결과
0번째 할 일 : 우유 구매
1번째 할 일 : 업무 메일 확인하기
2번쨰 할 일 : 필라테스 수업

2. for of 반복문

• for of 반복문 : 요소의 값을 반복할 때 안정적으로 사용할 수 있음
• 사용 방법

for (const 반복 변수 of 배열 또는 객체) {
  문장
}

• for in 반복문과는 다르게 반복 변수에 요소의 값이 들어감

• 예시

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

실행 결과
오늘의 할 일 : 우유 구매
오늘의 할 일 : 업무 메일 확인하기
오늘의 할 일 : 필라테스 수업

3. for 반복문

• for 반복문 : 특정 횟수만큼 반복하고 싶을 때 사용하는 범용적인 반복문
• 사용 방법

for (let i = 0; i < 반복 횟수; i++) {
  문장
}

• 예시(for 반복문 기본)

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

실행 결과
0번째 반복입니다.
1번째 반복입니다.
2번째 반복입니다.
3번째 반복입니다.
4번째 반복입니다.

• 예시(1부터 N까지 더하기)

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

실행 결과
1 ~ 100까지의 숫자를 모두 더하면 5050입니다.

• for 반복문과 함께 배열 사용하기
  -for 반복문은 배열과 조합할 수 있음
  -예시(1부터 N까지 더하기)

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

실행 결과
0번째 할 일 : 우유 구매
1번째 할 일 : 업무 메일 확인하기
2번째 할 일 : 필라테스 수업

4. while 반복문

• while 반복문 : if 조건문과 형태가 매우 비슷한 반복문
• if 조건문과 다른 점은 문장을 한 번만 실행하고 끝나는 것이 아니라 불 표현식이 true면 계속해서 문장을 실행
• 무한 루프 : 반복문이 무한 반복되는 것
• 사용 방법

while (불 표현식) {
  문장
}

• 예시

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

• while 반복문과 함께 배열 사용하기
  -예시

let i = 0;
const array = [1, 2, 3, 4, 5]

while(i < array.length) {
  console.log(`${i} : ${array[i]}`)
  i++
}

실행 결과
0 : 1
1 : 2
2 : 3
3 : 4
4 : 5

5. break 키워드

• break 키워드 : switch 조건문이나 반복문을 벗어날 때 사용하는 키워드
• 무한 루프는 break 키워드를 사용해야 벗어날 수 있습니다.
• 사용 방법

while (true) {
  
}break

• 예시

//반복문
for(let i = 0; true; i++) {
  alert(i + '번째 반복문입니다.')
  
  //진행 여부를 물어봄
  const isContinue = confirm('계속 하시겠습니까?')
  if (!isContinue) {
    break
  }
}

//프로그램 종료 확인
alert('프로그램 종료')

6. continue 키워드

• continue 키워드 : 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행
• 예시1

//반복문
for(let i = 0; i < 5; i++) {
  //현재 반복 작업을 중지하고 다음 반복 작업 수행
  continue
  alert(i)
}

• 예시2

//변수 선언
let output = 0;

//반복문
for(let i = 1; i <= 10; i++) {
  //조건문
  if(i%2===1) {
    //홀수면 현재 반복을 중지하고 다음 반복 수행
    continue
  }
  output += i
}

alert(output) => 조건문을 사용해 홀수일 때는 continue키워드를 만나 바로 다음 반복 작업으로 넘어가므로 짝수합만 구해짐

실행 결과
30

7. 중첩 반목문을 사용하는 피라미드

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        let output = ' ';

        for(let i = 0; i < 9; i++) {
            for(let j = 0; j < i; j++) {
                output += '*';
            }
            output += '\n';
        }

        alert(output);
    </script>
</head>
<body>
    
</body>
</html>

👍 마무리

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>

<실행 결과>
# for in 반복문
0
1
2
3
# for of 반복문
사과
배
귤
바나나

설명
for in 반복문의 i는 배열 인덱스를 출력, for of 반복문의 i는 배열 값 출력

2. 다음 프로그램의 실행 결과를 예측, 오류가 발생한다면 어디를 수정해야 하는가?

<script>
  const array = []
  for(const i = 0; i < 3; i++) { => const를 let으로 고쳐야 함
    array.push((i + 1) * 3)
  }
  console.log(array)
</script>

<실행 결과>
3, 6, 9

설명
for 반복문의 반복 변수는 let키워드로 변수를 선언해야 한다

3. 1부터 100까지의 숫자를 곱한 값을 계산하는 프로그램 작성

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        let output = 1;

        for(let i = 1; i <= 100; i++) {
            output *= i;
        }

        alert(`1~100의 숫자를 모두 곱하면, ${output}입니다.`);
    </script>
</head>
<body>
    
</body>
</html>

4. 피라미드 만들기

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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 < i*2-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 < i*2-1; k++) {
                output += '*';
            }
            output += '\n';
        }

        alert(output);
    </script>
</head>
<body>
    
</body>
</html>

오예!!!!!!!!!!!!! 드디어 끝났다 흙흙..
반복문을 시작하니 드디어 제대로 된 공부를 시작하는 느낌이다. 다시 한 번 복습을 해보니 학교에서 배웠던 것들이 기억이 나면서 좀 더 쉽고 즐겁게 공부한 것 같다. 마지막에 별찍기 나왔을 때는 오우.. 왓쌉.. 오우예.. 별찍기 처음 할 때의 악몽이 떠오르면서 나도 모르게 다음장으로 넘겨버릴 뻔했다. 마지막 피라미드 찍기는 좀 어려워서 답지를 좀 참고하긴 했지만 처음 피라미드 찍기를 했던 때보다는 실력이 좀 는것 같아서 살짝 뿌듯했다. b(￣▽￣)d 남은 혼공JS 공부도 빠샤!