[인프런] Javascript 입문

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런] Javascript 입문 - 반복문1 본문

프로그래밍/Javascript 자바스크립트

[인프런] Javascript 입문 - 반복문1

비비 bibi 2020. 10. 6. 17:41

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

조건문, 반복문을 합쳐 '제어문 Control Statement'이라고 하며,
제어문은 로직, 알고리즘을 짤 때 가장 중요한 구문이다.
반복문은 비슷한 일은 반복적으로 처리하기 위한 명령문입니다.

반복문 = loop
조건문 = conditional statement

while 반복문

while(조건) { console.log("참일때 실행됨"); }

while 조건문이 참true일 때만 구문이 실행됨.
거짓false이면 while조건문을 빠져나옴.
즉, 조건문이 false가 될 때까지 while조건문을 계속 반복해서 실행한다.
while 조건문 검증-참-실행-검증-참-실행-검증-참-실행..-검증-거짓-종료.

while(조건) { 
console.log("참일때 실행됨");
}

※ 무한루프

<script>
var n = 1;
while (n<10){
    console.log(n);
}
</script>

n=1이고, n은 항상 10보다 작으므로, 위의 while문은 종료되지 못하고 무한히 반복되게 된다.
-> 잘못 짜진 코드이다!

var n = 1; while(n <= 100) { console.log("Hi " + n); n++; }

var n = 1;
while(n <= 100) {
  console.log("Hi " + n);
  n++; 
}

-> Hi 1, Hi 2, Hi 3 .. Hi 100 까지 출력하는 코드.

예제

while 문을 사용해서 1에서 100까지의 합을 구해 봅시다. -> 스스로 해 보기!

내가 짠 코드 (결과 = 5151)

// 예제 : while 문을 사용해서 1부터 100까지의 합을 구하기
    var n = 0;
    var num = 0;
    while (n <= 100) {
        n++;
        num = num + n;
    }
    console.log(num);

답안 (=5050)

var sum = 0;
var n = 1;
while (n<=100){
  sum = sum + n;
  console.log(n,sum);
  n++;
}

document.write();
-> () 내의 값을 웹페이지에 출력하는 함수.

자주 사용하는 패턴

var i = 0; //(1)
while (i <= 100) { //(2)
  console.log(i); //(3)
  i++; //(4) 
}

var i = 0; //(1)
-> 변수 초기화

while (i <= 100) { //(2)
-> 조건 검사

console.log(i); //(3)
i++; //(4)
-> 조건이 참일 때 실행할 구문

}

=> 위 while문을 가장 많이 사용해서, 이를 짧게 줄이고자 for문이 등장함.

그래서 for가 등장함

위의 while 코드와 완전히 똑같음.

for (var i = 0; i <= 100; i++) { 
	console.log(i); 
}

for (var i = 0;
-> 변수 초기화

i <= 100;
-> 조건 검사

i++)
-> 변수에 반복 실행할 명령

{ console.log(i); }
-> 조건이 참일 때 실행할 구문

즉..

for ( ① ; ② ; ④ ) {
③;
}

형태일 때 ①-②-③-④-②-③-④-②-③-④.. 순으로 반복되다가 ② 조건에 맞지 않을 때 종료됨.

위의 while예제 코드는 for문으로 아래와 같이 작성할 수 있음

var sum = 0;
for (var n = 1; n <= 100; n++){
  sum += n;
  console.log(n,sum);
}
document.write('1부터 100까지의 합은' +sum+'입니다.');

※ 복합대입연산자
(참고 : m.blog.naver.com/PostView.nhn?blogId=magnking&logNo=220972187134&proxyReferer=https:%2F%2Fwww.google.com%2F)

+=, -=, *=, /= 등으로 사용 (+=를 가장 많이 사용)

value += 10;
value = value + 10;
// 위의 코드와 아래 코드는 같은 의미이다.

// 마찬가지로..

value -= 10;
value = value - 10;

value *= 10 ;
value = value * 10;

value /= 10;
value = value / 10;

// 두 줄씩 각각 같은 의미로 쓰인다.

추가 설명

반복문은 자주 사용하는 형태가 있습니다.

n 회 코드 실행
특정 조건을 만족시킬 때까지 코드 실행
배열 안의 원소들 각각에 대해 코드 실행

예제

사용자가 입력한 수들의 갯수와 합을 구하는 프로그램을 작성해 봅시다. (단 0을 입력받으면 입력 종료)
1에서 100까지 짝수의 합을 구해 봅시다.
100, 99, 98, .. 0 까지 출력하는 프로그램을 작성해 봅시다.

내가 푼 코드

사실 문제 자체를 이해 못 했다.. ;;
아래 코드는 동작하지 않는 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>반복문 예제1</h2>
<script>
    var n = Number(prompt('숫자를 입력하세요'));
    var sum = 0;
    if (n === 0) {
        alert('입력 종료');
    } else if (n != 0) {
        console.log('숫자의 길이는 ' + n.length + '입니다.')
        for (var i = 0; i <= n.length; i++) {
            console.log(n.length);
            each_num = n.slice(i, i + 1);
            console.log(each_num)
            sum += each_num
            console.log('입력한 숫자는'+each_num+'합계는'+sum);
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>반복문 예제2</h2>
<script>
    var sum = 0;
    for (var i = 1; i<=100; i++) {
        if (i%2===0) {
            sum += i;
            console.log(i, sum);
        }
    };
    document.write('1부터 100까지 짝수의 합은'+sum+'입니다.');
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>반복문 예제3</h2>
<script>
    for (var i = 100; i>=0 ; i--){
        console.log(i)
    }
</script>
</body>
</html>

예제 풀이

https://gist.github.com/honux77/eff05449a401304aed7b95d8d91b18db

JS loop example

JS loop example. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

1번 오답노트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>반복문 예제1</h2>
<script>
    var sum = 0;
    var n = -1;
    // <- n=0은 종료조건으로 while 조건문에 false가 되기 때문에, prompt창이 뜨지 않는다.
    // 그래서 n=0이 아닌 임의의 수로 시작.
    var count = -1;
    // <- 0입력은 종료의 역할이기 때문에 0입력분은 제외해야. 그래서 -1부터 시작
    while(n != 0) {
        n = Number(prompt("숫자를 입력해 주세요(0 = 종료)"));
        sum += n;
        count++;
        console.log(count, n, sum);
    }
    document.write("입력한 " +  count + "수의 합은 " +  sum + "입니다.");
</script>
</body>
</html>

2번 오답노트

-> 코드가 완전히 똑같다! 예에~👏👏

3번 오답노트

-> 해답 코드가 없다! 😅

저작자표시 비영리 변경금지

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

[인프런] Javascript입문 - 공부시작(20.10.01) (0)	2020.10.07
[인프런] Javascript입문 - 연습문제2(소수 판별 프로그램) (0)	2020.10.07
[인프런] Javascript 입문 - if 조건문 (0)	2020.10.06
[인프런] Javascript입문 - 연습문제1 (0)	2020.10.04
[인프런] Javascript입문 - 변수, 연산자 및 기타 (0)	2020.10.02

'프로그래밍/Javascript 자바스크립트' Related Articles