혼공스

혼공스 - 3주차!!

오쟝 2024. 1. 15. 11:08

배열은 여러 자료를 묶어서 활용할 수 있는 특수한 자료입니다! 

배열은 변수 = [요소1, 요소2, 요소3, 요소4 •••] 로 선언해 사용할 수 있습니다.

배열 요소에 접근하기 위해서는 배열[인덱스] 로 접근할 수 있습니다. 이때 인덱스는 0부터 시작합니다!

배열 요소의 개수는 배열.length 로 접근할 수 있습니다.

 

배열에 요소를 추가하고 싶을 때는 배열.push(요소)를 사용하거나 배열[인덱스] = '요소' 를 사용할 수 있습니다. push는 맨 뒤에 요소가 들어가는 반면 인덱스를 사용하게 되면 자신이 선택한 인덱스에 배열이 들어가게 됩니다.

만약 특정 위치에 요소를 넣고 싶으면 배열.splice(인덱스, 0, 요소) 를 사용하면 됩니다. 

 

배열의 요소를 제거하고 싶을 때는 배열.splice(인덱스, 제거할 요소의 개수) 를 사용할 수 있습니다. splice 단독으로 쓰게 되면 인덱스를 기준으로 요소를 제거하는 것입니다. 만약 요소를 기준으로 제거하고 싶으면 배열.indexOf(요소) 를 통해 요소의 인덱스를 확인한 후에 배열.splice() 를 사용하는 방법이 있습니다.

 

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

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

 

Chapter 4-1 마무리
1. 다음 배열들의 2번째 인덱스에 있는 값을 찾아보세요.
① ["1", "2", "3", "4"] -> ["3"]
② ["사과", '배", "바나나", "귤", "감"] -> ["바나나"]
③ [52, 273, 32, 103, 57] -> [32]
2. 다음 코드의 실행 결과를 예측해보세요.
> 4
> 5
3. 다음 표시된 함수들이 파괴적 처리를 하는지 비파괴적 처리를 하는지 구분해 맞는 것에 O 표시하세요.
① 비파괴적 처리
② 파괴적 처리
③ 비파괴적 처리
④ 비파괴적 처리

 

반복문은 배열 요소나 객체 요소를 하나하나 꺼내서 특정 문정을 실행할 때 사용합니다!

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

 

for ~ in 반복문은 반복 변수에 인덱스가 들어있습니다! 따라서 요소를 사용하기 위해서는 배열[i]와 같이 사용해야합니다.

그럴 때 for ~ of 반복문을 사용하게 되면 반복 변수에 요소가 들어갑니다!

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

 

for의 가장 기본적인 형태는 

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

 

기본 형태를 사용해 1부터 100까지 더하는 예제를 만들어봅시다!

<body>
    <script>
        let res = 0

        for(let i = 1; i<=100; i++){
            res += i;
        }
        console.log(`1~100까지 다 더한 값은 ${res}입니다.`)
    </script>
</body>

 

while 반복문은 불 표현식이 true인 동안 반복문을 실행합니다!

while(불 표현식) {
	문장
}

 

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

 

이렇게 하면 무한루프가 되어 끝나지 않습니다! 따라서 불 표현식을 적절하게 작성해야합니다.

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

 

confirm을 사용하면 true 또는 false의 결과를 내놓기 때문에 취소를 누르면 반복문이 중단됩니다.

 

반복문이 언제 끝나는지 확실하게 모르지만 특정 값이 되었을 때 끝내야한다! 그럴때는 break 키워드를 사용하면 됩니다!

<body>
    <script>
        for(let i = 0; true; i++){
            alert(`${i}번째입니다.`)

            const isContinue = confirm('계속하시겠습니까?')
            if(!isContinue) break 
        }
        alert('프로그램 종료')
    </script>
</body>

 

위의 while문과 똑같이 실행되지만 break 키워드를 사용했습니다!

 

특정 값에서 실행하지 않고 그냥 넘어가고 싶다! 그럴 때는 continue 키워드를 사용하면 됩니다!

<body>
    <script>
        let output = 0

        for(let i = 1; i<=10; i++){
            if(i%2 == 0) continue
            output += i
        }
        alert(`홀수의 합은 ${output}입니다.`)
    </script>
</body>

 

짝수면 continue를 사용해 아래 문장이 실행되지 않고 건너뛰게 했습니다! 

 

피라미드 1

<body>
    <script>
        let output = ''

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

 

피라미드 2

<body>
    <script>
        let output = ''

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

 

Chapter 4-2 마무리
1. 다음 프로그램의 실행 결과를 예측해보세요.
> 0, 1, 2, 3
> '사과', '배', '귤', '바나나'
2. 다음 프로그램의 실행 결과를 예측해보세요. 혹시 오류가 발생한다면 어디를 수정해야 할까요?
let i가 아니라 const i로 되어 있어 오류가 발생한다!
3. 1부터 100까지의 숫자를 곱한 값을 계산하는 프로그램을 만들어보세요. 그리고 코드를 실행해 나온 결과를 확인해 보세요.
<body>
    <script>
        let output = 1

        for(let i = 1; i<=100; i++){
            output *= i
        }
        console.log(`1~100의 숫자를 모두 곱하면, ${output}입니다`)
    </script>
</body>
4. 처음에는 조금 어려울 수 있겠지만, 활용 예제의 피라미드를 활용해서 다음과 같은 피라미드를 만들어보세요.
<body>
    <script>
        let output = ''
        const size = 5
        for(let i = 1; i<=size; i++){
            for(let j = size; j>i; j--){
                output += ' '
            }
            for(let k = 1; k<= i*2 - 1; k++){
                output += '*'
            }
            output += '\n'
        }
        for(let i = size - 1; i>=1; i--){
            for(let j = size; j>i; j--){
                output += ' '
            }
            for(let k = 1; k<= i * 2 - 1; k++){
                output += '*'
            }
            output += '\n'
        }
        console.log(output)
    </script>
</body>

 

3주차 끝!!! O(∩_∩)O

'혼공스' 카테고리의 다른 글

혼공단 11기 회고록  (1) 2024.02.05
혼공스 - 5주차 👍  (1) 2024.01.29
혼공스 - 4주차 ✨  (0) 2024.01.22
혼공스 - 2주차 (。・∀・)ノ゙  (1) 2024.01.08
혼공스 - 1주차! 🤓  (1) 2024.01.02