[혼공 JS] 3주차

3주차도 화이팅!!
이제부터 공부한 내용을 여기에 다 적어보려 합니다..
(6시간 걸림ㅜㅜ)

📗기본 미션

의미

• 비파괴적 처리 : 처리 후에 원본 내용이 변경되지 않습니다.

• 파괴적 처리 : 처리 후에 원본 내용이 변경됩니다.

장단점

• 비파괴적 처리 장점 : 자료보호에는 좋다.
• 비파괴적 처리 단점 : 불필요한 메모리 차지가 있다.

• 파괴적 처리 장점 : 메모리를 절약할 수 있다.
• 파괴적 처리 단점 : 원본이 사라지기 때문에 위험하다.

📗선택 미션

1. [파괴적 처리 / 비파괴적 처리]

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

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

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

설명 : strA의 내용이 바뀌지 않았다.

2. [파괴적 처리 / 비파괴적 처리]

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

> arrayB.push("감")
5

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

설명 : arrayB의 내용이 바뀌었다.

3. [파괴적 처리 / 비파괴적 처리]

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

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

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

설명 : arrayC의 내용이 바뀌지 않았다.

4. [파괴적 처리 / 비파괴적 처리]

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

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

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

설명 : strD의 내용이 바뀌지 않았다.

04-1. 배열

배열 : 은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형

• 배열은 대괄호[..]를 사용해 생성하고로 내부의 값을 쉼표( , )로 구분해 입력.
• 요소 => 내부의 값
• 인덱스 => 요소의 순서

배열[인덱스]

> const number = [273,52,103,32]
undefined

> number[0]
273

> number[1]
52

• 배열 내부에 요소의 개수를 확인할 때는 length 속성을 사용

배열.length

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

> fruits.length
4    	          -> 배열 fruits에 4개의 요소가 들어있어 4

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

• 배열 뒷부분에 요소 추가 => push() 메소드 사용

배열.push(요소)

> const todo=['우유 구매','업무 메일 확인하기','필라테스 수업']
undefined

> todo.push('저녁 먹기')
4

> todo
["우유 구매","업무 메일 확인하기","필라테스 수업","저녁 먹기"]

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

• 인덱스로 요소를 제거할 때는 splice() 메소드 사용
  splice 라는 단어는 ' 접합 ' 이라는 의미입니다.

접합은 다양하게 활용된다. 일부를 제거한 뒤 붙이는 것과, 중간에 다른 요소를 넣고 붙이는 것도 접합이다.

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

> const itemsA = ['사과','배','바나나']
undefined

> itemsA.splice(2,1)
["바나나"]

> itemsA
(2) ["사과","배"]

• 값으로 요소를 제거할 때는 indexOf() 메소드 사용
  const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스,1)
  배열 내부에 요소가 없을 때는 -1 리턴

> const itemsB = ['사과','배','바나나']
undefined

> const index = itemsB.indexOf('바나나')
undefined

> index
2

> itemsB.splice(index,1)
["바나나"]

> itemsB
["사과","배"]

> itemsB.index('바나나')
-1			-> 바나나는 배열에 없으므로 -1 출력

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

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

> const itemsD = ["사과","귤","바나나","오렌지"]
undefined

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

> itemsD
(5) ["사과","양파","귤","바나나","오렌지"]

04-2. 반복문

반복문 : 무한히 반복하고 싶을 때 활용하는 것

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

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

• for of 반복문 : for in은 반복 변수에 인덱스가 들어갑니다. 하지만 for of는 안정성을 위해 요소의 값을 반복할 때 안정적으로 사용

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

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

<script>
    let output = 0
    for(let i = 1; i<= 100; i++){
        output += i

    }
    alert(`1~100까지 숫자를 모두 더하면 ${output}입니다.`)
</script>

while 반복문 : true 이면 무한루프가 실행하므로 조건을 거짓으로 만들 수 있는 내용이 문장에 포함되어야 한다.

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

<script>
    let i = 0
    while(confirm('계속 진행하시겠습니까?')){
        //사용자가 [확인] 버튼을 클릭하면 true가 되어 계속 반복
        alert(`${i}번째 반복`)
        i = i + 1
    }
   
</script>

while 반복문의 조건식에 confirm() 함수를 넣었다.
confirm() 함수를 입력하면 사용자에게 확인을 받는 대화상자가 실행됨. 사용자가 버튼을 클릭하면 true가 되어 계속 반복
취소 버튼을 클릭시 false로 바뀌어 종료

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

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

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

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

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

중첩 반복문 사용하기
제일 싫어했던 별찍기...

<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>

이렇게 해서 Chapter 04 반복문을 끝냈습니다!! 반복문을 배울 때 조건문 다음으로 싫어했던 파트입니다.. 다시 복습하게 되니 그 때 힘들게 코드짰던 기억이 새록새록 떠오르네요..

반복문하면 별찍기가 제일 먼저 떠오르는데 그래도 나름 출력된 화면 보면 뿌듯하더라구요 ㅎㅎ