while 문

while(조건식) {
조건식의 결과가 true인 동안 반복할 문장;
...
}

do {
조건식의 결과가 true인 동안 반복할 문장;
...
}while(조건식);

do ~ while문은 조건식의 결과가 처음부터 false인 경우라도 한 번은 {}에 문장을 실행함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while 문</title>
</head>
<body>
    <h2>while 문</h2>
    <script>
        while(true){
            let num = Number(prompt('숫자를 입력하세요'))
            if(num % 2 == 0){
                console.log('짝수입니다. 프로그램을 종료합니다.')
                break
            }
            console.log('홀수입니다. 계속 진행합니다.')
        }
    </script>
</body>
</html>

for 문

for(초기값; 조건식; 증감식){
조건식의 결과가 true인 동안 반복할 문장;
...
}

let sum = 0;
for(let i=1; i<=10; i++){
    sum += i;
}

while문 비교
let i=1;
let sum=0;
while(i <= 10){
    sum += i;
    i++;
}

for문의 무한루프
for(;;){
    ...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for 문</title>
</head>
<body>
    <h2>for 문</h2>
    <script>
        for(let i=1; i<=100; i++){
            if(i % 3 == 0){
                console.log('👏');
                continue;
            }
            console.log(i);
        }
    </script>
</body>
</html>

break 문

switch문 또는 반복중인(while, for) 루프 내에서 사용하여 해당 문장을 완전히 종료시키고 다음에 위치한 실행문으로 이동

continue 문

반복중인 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고 다음 반복문의 조건으로 넘어감

let num = 1;
while(num <= 10){
    console.log(num);
    num++;
    if (num == 5) continue;
    ...
    ...
}

문제

원하는 숫자를 입력받아 해당 숫자의 구구단을 출력하는 문서를 만들어보자.
(단, while문, for문으로 각각 출력)
prompt
원하는 단을 입력하세요. 4

console
4단
4 * 1 = 4
4 * 2 = 8
...
4 * 9 = 36

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구구단</title>
</head>
<body>
    <h2>구구단</h2>
    <script>
        console.log('for문')
        let dan = Number(prompt('원하는 단을 입력하세요.'))
        console.log(`${dan}단`)
        for(let i=1; i<=9; i++){
            console.log(`${dan} * ${i} = ${dan*i}`)
        }
        console.log('----------')
        console.log('while문')
        let num = 1
        console.log(`${dan}단`)
        while(num <= 9){
            console.log(`${dan} * ${num} = ${dan*num}`)
            num++;
        }
    </script>
</body>
</html>

배열(Array)

이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조)
배열을 구성하는 각각의 값을 배열요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함

배열 선언

let 변수명;

배열 초기화

변수명 = [요소1,요소2,요소3, ...];

let arr;
arr = [100, 200, 300];

배열 생성 함수

let 변수명 = Array(요소1, 요소2, 요소3, ...);

배열의 접근

let arr = [100, 200, 300];

arr[0] // 100
arr[1] // 200
arr[2] // 300

자바스크립트 배열의 특징

배열 요소의 타입이 고정되어 있지 않음
```
 let arr = [1, 1.5, '김사과', true];
```

배열 요소의 인덱스가 연속적이지 않아도 됨

 let arr;
 arr[0] = 1;
 arr[1] = 100;
 arr[4] = 10;
 // index 2, 3은 undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열1</title>
</head>
<body>
    <h2>배열1</h2>
    <script>
        const user = [1, 'apple', '김사과', 20, '서울 서초구']
        console.log(user)

        console.log(user[0])
        console.log(user[1])
        console.log(user[2])
        console.log(user[3])
        console.log(user[4])
        console.log(user[5])

        user[4] = '서울 강남구'
        console.log(user[4])

        console.log(user.length)

        for(let i=0; i<user.length; i++){
            console.log(user[i])
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열2</title>
</head>
<body>
    <h2>배열2</h2>
    <script>
        const user = [1, 'apple', '김사과', 20, '서울 서초구']

        // push(): 배열의 요소를 추가
        user.push('여자');
        console.log(user)

        // pop(): 배열의 마지막 인덱스 번호에 있는 값을 제거후 리턴
        let temp = user.pop()
        console.log(user)
        console.log(temp)

        // shift(): 배열의 첫번째 인덱스 번호에 있는 값을 제거후 리턴
        console.log(user)
        temp = user.shift()
        console.log(user)
        console.log(temp)
        console.log('-----------')

        // concat(): 두 배열의 요소를 합침
        const profile = ['여자', 'A형', 'istp']
        result = user.concat(profile)
        console.log(result)
        console.log('-----------')

        // join(): 배열 요소 사이에 원하는 문자를 삽입
        result = user.join('🤣')
        console.log(result)
        console.log(typeof(user))
        console.log(typeof(result))
        console.log('-----------')

        const arr = ['a', 'z', 'c', 'f', 'r']
        // sort(): 배열의 요소를 오름차순
        arr.sort()
        console.log(arr)

        // reverse(): 배열을 역순으로 재배치
        arr.reverse()
        console.log(arr)

    </script>
</body>
</html>

배열을 이용한 반복

for in 문
변수에 배열의 인덱스 또는 객체의 key가 저장되며 반복

const arr = [10, 20, 30]
const user = {userid:'apple', name:'김사과', age:20}

// 예)
for(let i in arr){
    ...// i: 0, 1, 2 (i에는 인덱스 번호가 저장)
}

for(let i in user){
    ...// i: userid, name, age (i에는 키가 저장)
}

for of 문
변수에 배열의 value가 저장되며 반복

예)
for(let v of arr) {
    ... // v: 10, 20, 30
}

forEach 문
베열에서만 사용 가능하며 요소의 개수만큼 반복

    변수.forEach(function(변수1, 변수2, 변수3)){
        ...
    }

    변수1: value가 저장
    변수2: index가 저장
    변수3: 모든 배열요소가 저장
    * 변수2, 변수3은 생략가능

예)
const arr = [10, 20, 30]

arr.forEach(function(v, i, a){
    console.log(v); // 10, 20, 30
    console.log(i); // 0, 1, 2
    console.log(a); // [10, 20, 30], [10, 20, 30], [10, 20, 30]
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열3</title>
</head>
<body>
    <h2>배열3</h2>
    <script>
        const userArr = [1, 'apple', '김사과', 20, '서울서초구']
        const userObj = {userid: 'apple', name:'김사과', age:20}

        // for in 배열
        for(let i in userArr){
            console.log(`i:${i}, userArr[${i}]: ${userArr[i]}`)
        }

        console.log('----------')

        // for in 객체
        for(let i in userObj){
            console.log(`i:${i}, userArr[${i}]: ${userObj[i]}`)
        }
        console.log('----------')

        // for of 배열
        for(let v of userArr){
            console.log(`v:${v}`)
        }

        console.log('----------')

        // // for of 객체
        // Uncaught TypeError: userObj is not iterable
        // for(let v of userObj){
        //     console.log(`v:${v}`)
        // }
        console.log('----------')

        // forEach
        userArr.forEach(function(v, i, arr){
            console.log(`v:${v}, i:${i}, arr:${arr}`)
        })
    </script>
</body>
</html>

'코딩 > Web' 카테고리의 다른 글

자바스크립트 객체 (0)	2024.04.17
자바스크립트 함수 (1)	2024.04.16
자바스크립트 JavaScript (1)	2024.04.15
CSS 우선순위와 Custom Properties, 애니메이션 (1)	2024.04.12
CSS 미디어 쿼리 (0)	2024.04.11

개발일지

자바스크립트 반복문과 배열

while 문

for 문

break 문

continue 문

문제

배열(Array)

배열 선언

배열 초기화

배열 생성 함수

배열의 접근

자바스크립트 배열의 특징

배열을 이용한 반복

'코딩 > Web' 카테고리의 다른 글

티스토리툴바

자바스크립트 반복문과 배열

while 문

for 문

break 문

continue 문

문제

배열(Array)

배열 선언

배열 초기화

배열 생성 함수

배열의 접근

자바스크립트 배열의 특징

배열을 이용한 반복

'코딩 > Web' 카테고리의 다른 글

관련글

티스토리툴바