👍 제어문이란?

• 프로그램에서 소스를 실행하는 순서는 처리한 결과값에 따라 달라지기도 하고 특정 부분의 소스를 건너뛰고 실행하기도 하는데 이렇게 실행순서를 결정하는 명령문을 '제어문'이라고 한다.

조건을 만족하는지 여부에 따라 코드를 제어할 수 있는 조건문
변수에 일치하는 경우의 값에 따라 코드를 제어할 수 있는 선택문
특정 코드를 여러 번 반복해서 실행할 수 있도록 하는 반복문

👉 비교연산자의 활용

• 사용자가 시험에 함격했는지를 비교하여 true, false로 결과값을 나타내보자.

<script>
	const pass = 60;
    const score = 90;
    
    const hasPassed = score >= pass;
    
    const el = document.getElementById("answer");
    el.innerHTML = "합격여부: " + hasPassed;
</script>

🤞 결과

👉 두 표현식을 비교하기

• 사용자가 시험에 두번 응시를 했다. 종전 기록을 넘어 최고 기록을 달성했는지 검사하는 코드를 제작해 보자.

<script>
	const score1 = 90;
    const score2 = 95;
    const highScore1 = 75;
    const highScore2 = 95;
    
    const comparison = score1 + score2 > highScore1 + highScore2;
    
    const el = document.getElementById("answer");
    el.innerHTML = "신기록 달성: " + comparison;
</script>

🤞 결과

👉 논리적 AND 연산자의 활용

• 사용자가 시험에 두번 응시를 했다. 사용자가 각 회차에 모두 합격했는지 검사하는 코드를 제작하여 보자.

<script>
	const score1 = 8;
    const score2 = 8;
    const pass1 = 6;
    const pass2 = 6;
    
    const passBoth = score1 >= pass1 && score2 >= pass2;
    
    const msg = "두 회차의 시험합격 여부: " + passBoth;
    
    const el = document.getElementById("answer");
    el.innerHTML = msg;
</script>

🤞 결과

👉 논리적 OR 및 논리 부정 연산자 활용

• 동일한 테스트에 대해 논리적 OR 연산자를 이용하여 사용자가 두 회차 중 어느 하나라도 합격했는지 여부를 판단하는 코드를 제작하여 보자.
  (사용자가 한 회차에 합격했다면 시험에 다시 응시할 필요가없다.)

<script>
	const score1 = 8;
    const score2 = 8;
    const pass1 = 6;
    const pass2 = 6;
    
    // 두 회차 모두 합격했기 떄문에
    const minPass = score1 >= pass1 || score2 >= pass2;
    
    // 부정연산자를 이용하여 값이 반대로 출력되게
    const msg = "재시험 필요여부: " + !minPass;
    
    const el = document.getElementById("answer");
    el.innerHTML = msg;
</script>

🤞 결과

👉 if문 문법

• 조건에 대한 값이 참일 경우 수행한다.

<script>
	let num = 10;
    let (num < 500) {
    	document.write('hello');
        }
    
    // 아래의 조건식은 거짓이기 때문에 출력이 되지 않음
    let num = 10;
    let (num > 500 ) {
    	document.wirte('world');
        }
</script>

🤞 결과

👉 조건문 - else문

• 조건에 대한 값이 거짓일 경우 실행한다.

if(조건식){
	실행문1;
    } else {
    실행문2;
    }

<script>
	const animal = 'kittty';
    let result = '';
    if(animal === 'kittty'){
        result = 'cute';
        } else {
        result = 'still nice';
        }
            
    document.write(result);
</script>

👉 else 문법

• 입력창을 만들어 숫자를 입력받아 짝수, 홀수인지 판멸하는 조건문을 제작해보자.

<script>
	const num = prompt("당신이 좋아하는 숫자는?","0");
    if(num % 2 == 0) {
    	document.write("당신이 좋아하는 숫자는 짝수입니다.");
        } else {
        document.write("당신이 좋아하는 숫자는 홀수입니다.");
        }
</script>

🤞 결과

👉 else 문법2

• confirm을 이용하여 할인버튼을 클릭하면 '탈퇴처리가 되었습니다' 취소버튼을 클릭하면 '탈퇴 취소되었습니다.' 가 출력되게 제작해보자.

<script>
	const result = confirm("정말로 회원을 탈퇴하시겠습니까?");
    
    if(result) {
    	document.write("탈퇴 처리되었습니다!");
        } else {
        document.write("탈퇴 처리가 취소되었습니다!");
        }
</script>

🤞 결과

👉 조건문 - else if문

• 두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 사용한다.

	if(조건식 A){
    실행문 a;		// 조건식 A가 참일 때 실행한다.
    } else if (조건식 B) {
    실행문 b;		// 조건식 A가 거짓, 조건식 B가 참일 때 실행한다.
    } else {
    실행문 c;		// 조건식 A와 B가 모두 거짓일 때 실행한다.
    }

👉 조건문 - else if 문법

• 입력창에 '원하는 숫자를 입력하세요'를 질문하는 코드를 제작하여 보자.

  100이상 입력 : '입력한 숫자는 100이상입니다.'
  50~99 입력 : '입력한 숫자는 50이상 99이하입니다.'
  0~49 입력 : '입력한 숫자는 0이상, 49이하입니다.'
  0이하 입력 : '입력한 숫자는 음수입니다.'

<script>
	let num = prompt("원하는 숫자를 입력하세요.","");
    if(num >= 100){
    	document.write("입력한 숫자는 100 이상입니다.");
        } else if (num >= 50 && <= 99) {
        document.write("입력한 숫자는 50이상 99이하입니다.");
        } else if (num >= 0 && <= 49) {
        document.write("입력한 숫자는 0이상 49이하입니다.");
        } else {
        document.write("입력한 숫자는 음수입니다.");
        }
</script>

🤞 결과

👉 선택문 - swich

• 변수와 case의 값을 하나씩 비교하여 일치하는 case안에 있는 문장을 실행시킨다
• case 값에는 문자열, 숫자를 지정할 수도 있다.
• swich문은 if문과 다르게 특정 조건을 만족하였을 때 블록{}을 스스로 빠져나가지 못하기 때문에 break 명령어를 주어 블록{} 을 빠져나가도록 한다.
• default는 만족하는 조건이 없을 때 실행할 기본값으로 생략이 가능하다.
• Default에서는 break문을 사용하지 않는다.

swich(변수 또는 식){
	case 값1 :
    	실행할 문장 1;
        break;
    case 값2 :
    	실행할 문장 2;
        break;
    default:
    	실행할 문장3;
    }

👉 swich문 문법

// 기본문법 연습
<script>
	let subject = "javascript";
    swich (subject){
    	case "html";
        	subject += "은 1학점입니다."; //subject = subject + '은 1학점입니다.';
        	break;
    	case "css" :
    		subject += "은 2학점입니다."; //대입연산자로 줄임
            break;
        case "javascript" :
        	subject += "은 3학점입니다.";
            break;
        default :
        	subject += "해당 과목이 없습니다.";
    }
    document.write(subject, "<br>");
</script>

// 문자형으로 조건 지정
<script>
	let c = "A";
    
    swich (c) {
    	case "A" :
        	document.write("A라는 문자입니다." + "<br>");
            break;
        case "하" :
        	document.write("하 라는 문자입니다." + "<br>");
        	break;
        case "7" :
        	document.write("7 이라는 문자입니다." + "<br>");
            break;
        default :
        	document.write("해당되는 문자가 없습니다." + "<br>");
    }
</script>

// 숫자형으로 조건 지정
<script>
	let i = 365;
    
    swich (i) {
    	case 66 :
        	document.write("66이라는 정수입니다." + "<br>");
        	break;
        case 365 :
        	document.write("365라는 정수입니다." + "<br>");
        	break;
        case 1000 :
        	cdocument.write("1000이라는 정수입니다." + "<br>");
            break;
        default :
        	document.write("해당 숫자가 없습니다." + "<br>");
        }
</script>

// 문자형으로 조건 지정
<script>
	let ipad = "ipad mini6";
    
    swich (ipad) {
    	case "ipad Air" :
        	document.write("30만원대 입니다." + "<br>");
            break;
        case "ipad mini6 :
        	document.write("40만원대 입니다." + "<br>");
            break;
        case "ipad Pro" :
        	document.write("50만원대 입니다." + "<br>");
            break;
        default :
        	document.write("해당되는 내용이 없습니다." + "<br>");
        }
</script>

🤞 결과

👉 swich 문 활용

• 질의응답 창을 통해 포털 검색 사이트 이름을 입력받고, 입력한 이름에 해당하는 사이트로 이동하도록 제작하여 보자.

<script>
	const site = prompt("네이버, 다음, 네이트, 구글 중 즐겨 사용하는 포털 검색 사이트는 ?","");
    let url;
    
    swich (site) {
    	case "구글" :
        	url = "www.google.com";
            break;
    	case "다음" :
        	url = "www.daum.net";
            break;
    	case "네이버" :
        	url = "www.naver.com";
            break;
    	case "네이트" :
        	url = "www.nate.com";
            break;
    	default :
        	alert("보기 중에 없는 사이트입니다.");
        }
        
    if (url) location.href = "http://" + url; //location은 url정보를 가져오는 객체
</script>

🤞 결과

👉 swich(가위바위보 게임)

<script>
	const game = prompt("가위, 바위, 보 중 선택하세요!","");
    let gameNum;
    
    swich (game){
    	case "가위" :
        	gameNum = 1;
            break;
        case "바위" :
        	gameNum = 2;
            break;
        case "보" :
        	gameNum = 3;
            break;
        defult :
        	alert("잘못 입력하셨습니다.");
            location.reload(); //새로고침(F5)
            
    const com = Math.ceil(Math.random() * 3); //가장 큰 정수로 올림, 점수 1, 2, 3의 랜덤값 생성
    
    // 컴퓨터 랜덤값 출력
    document.wrtie('<img src="images/math_img_' + com + '.jpg">');
    
    // 사용자랑 컴퓨터랑 비교해서 맞았는지 틀렸는지 출력
    if (gameNum == com){
    	document.write('<img src="imges/game_1.jpg">');
        } else {
        document.write('<img src="imges/game_2.jpg">');
        }
</script>

🤞 결과

👉 타입 강제와 약한 형식화

• 만일 자바스크립트가 알지 못하는 데이터 타입을 사용하면 자바스크립트는 오류를 발생시키지 않는 가능한 작업을 수행하려고 시도한다.
• 자바스크립트는 내부적으로 데이터 타입을 변환하여 작업을 완료할 수 있다. 이를 강제 타입(type coercoin)이라고 한다.
• 예를들어 '1'>0 이라는 구분을 실행할 때 문자열 '1'은 숫자 1로 변환될 수 있어 결과값을 true로 평가된다.
• 자바스크립트는 약한 형식화(weak typing)를 사용한다고 말할 수 있는데, 그 이유는 값의 데이터 타입이 바뀔 수 있기 때문이다.
• 타입 강제는 코드를 실행하는 도중 의도하지 않은 값을 만들어낼 수 있다. 두 변수가 가지고 있는 값을 검사할 때에는 ===와 !==처럼 데이터 타입이 모두 일치하는 비교연산자를 사용하는 편이 좋다.

👉 true 또는 false로 취급되는 값들

• 타입 강제 덕분에 자바스크립트에서 사용하는 모든 값들은 true 또는 false로 취급될 수 있다.

[false로 취급될 수 있는 값들]

값	설명
const highScore = false;	전형적인 불리언 false
const highScore = 0;	숫자 0
const highScore = '';	NaN(not a number, 숫자가 아님)
const highScore = 10/'score';	빈 값
const highScore;	아직 값을 대입하지 않은 변수

[true로 취급될 수 있는 값들]

값	설명
const highScore = true;	전형적인 불리언 true
const highScore = 1;	0이 아닌 다른 숫자
const highScore = 'carrot';	내용을 가진 문자열
const highScore = 10/5;	계산된 숫자
const highScore = '0';	문자열로 표현된 숫자 0
const highScore = "false";	문자열로 표현된 false

👉 반복문의 의미와 종류

• 루프는 조건을 검사하여 이 조건이 true이면 코드 블록을 실행한다. 그런 후 조건을 다시 검사하여 이 조건이 여전히 true이면 리턴하여 해당 코드 블록을 다시 실행한다. 이런 동작은 false를 리턴할 때 까지 계속하여 반복한다.

for - 일정한 횟수만큼 코드를 반복 실행해야 한다면 for루프가 가장 적합하다. 가장 일반적으로 사용되는 루프다. for루프의 조건식은 횟수를 세는 카운터이며 이를 통해 몇 번의 루프가 실행되어야 하는지를 명확하게 결정할 수 있다.

while - 반복 실행할 횟수를 정확히 알지 못한다면 while루프를 사용하는 것이 좋다. 이 루프는 카운터 대신 다른 조건식을 사용하며, 코드 블록의 실행은 이 조건식이 true를 리턴하는 한 계속 반복된다.

do while - 일단 한 번 실행한 후 조건을 검사하여 참인동안 계속 반복 실행한다. 즉 조건식이 false를 리턴하더라도 우선 코드블록은 한 번 실행한 후 루프를 시작한다.
조건에 따라 while 문은 한 번도 실행되지 않을 수 있지만, do while은 한 번은 무조건 실행된다는 차이점이 있다.

👉 루프의 핵심 개념

키워드

• break : 이 키워드는 자바스크립트 해석기에 루프를 종료하고 루프 바깥의 다음 코드를 계속해서 실행할 수 있도록 지시한다. (이 키워드는 함수 내에서도 사용할 수 있다.)
• continue : 이 키워드는 자바스크립트 해석기에 루프 내의 코드 블록의 실행을 여기서 중단하고 다시 조건식을 검사하도록 지시한다. (조건식이 여전히 true를 리턴하면 코드 블록이 다시 실행된다.)

루프와 배열

• 루프는 배열의 각 아이템에 대해 동일한 코드를 반복 실행할 때 유용하다.
• 배열에 저장된 각 아이템을 페이지에 출력하는 경우가 좋은 예라고 할 수 있다.
• 스크립트를 작성하는 시점에는 배열에 얼마나 많은 아이템이 저장되어 있는지 알지 못할 수도 있지만, 코드가 실행될 때는 루프 내에서 배열의 전체 아이템 개수를 검사할 수 있다. 그리고 그값을 이용하여 코드를 몇 번이나 반복 실행할 것인지를 결정할 수 있다.
• 그렇게 해서 루프가 필요한 만큼 실행되고 나면 루프가 종료된다.

성능 이슈

• 중요하게 짚고 넘어갈 사항 중 하나는 브라우저가 자바스크립트를 실행할 때는 스크립트의 실행이 완료되기 전까지 다른 작업을 일절 하지 않는다는 점이다.
• 만일 루프가 반복되는 횟수가 그리 크지 않다면 별다른 이슈가 되지 않을 것이다. 많다면 페이지의 로딩 시간이 길어지게 될 것이다.
• 루프의 조건식이 false를 리턴하지 않고 계속해서 true만 리턴하는 상황을 무한루프(infinite loop)라고 부르는데, 이런 경우에는 브라우저의 메모리가 꽉 찰 때까지 계속해서 코드가 반복 실행된다. (결국 스크립트가 깨지게 된다.)
• 루프의 바깥에는 어떤 변수든 선언할 수 있으며, 루프 내에서 변경되지 않는 변수는 반드시 루프 바깥에 선언해야 한다. 만일 루프 내에서 변수를 선언하면 이 변수는 루프가 실행될 때마다 다시 초기화하여 불필요하게 리소스를 낭비하게 된다.

👉 while

	초기값;
    while(조건식) {
    	실행문;
        증가감식;
    }

• 조건식을 만족할 때 까지 코드를 여러 회 반복하며 실행한다.
• 반복문 중에 하나로 지정된 조건이 참인 동안 실행한다.
• 주로 반복 횟수가 정확하게 정해지지 않은 경우 사용한다.
• 조건이 거짓이 되지 않으면 무한 반복하므로 탈출 조건을 지정해주어야 한다.

👉 while 문법

• 반복문 연습 문구 10번 출력하는 코드를 제작하여 보자.

<script>
	let i = 0;
    while (i > 10) {
    	document.write("반복문 연습 <br>");
        i++;
    }
</script>

🤞 결과

👉 while문으로 더하기 만들기

• 1부터 7더하기를 while문으로 제작해보자.
  1부터 100더하기를 while문으로 제작해보자.

<script>
	// 1부터 7더하기
    let n = 1;
    let sum = 0;
    while (n < 8) {
    	sum += n; // sum = sum + n;
        n++;
   	}
    document.write(sum, '<br>');
    
    // 1부터 100더하기
    let sum2 = 0;
    let i = 1;
    while(i < 101) {
    	sum2 += i;
        i++;
    }
    
    document.write("정답은 : ", sum2, "입니다");
</script>

🤞 결과

👉 while문 숫자색상출력

• 20부터 10까지의 숫자 2중 짝수 일 경우에는 파란색으로 출력되고, 홀수일 경우에는 빨간색으로 출력하는 코드를 제작하여 보자.

<script>
	let i = 20;
    while (i >= 10) {
    	if(i % 2 == 0) {
        	document.write("<p class='blue'>" + i + "</p>");
        } else {
            document.wrtie("<p class='red'>" + i + "</p>");
        }
        i++;
    }
</script>

🤞 결과

👉 for

• 조건식을 만족할 때까지 특정 코드를 반복하여 실행한다.
• while문과 사용법이 같으나 사용하기 편해 빈도수가 높다.
• for문안에 if문을 사용할 수 있고 for 문이 들어갈 수 있다.

for (let i = 0; i < 10; i++;) 
       초기값    조건식  증가감식

초기값 - 루프가 처음 실행될 때 i란 이름을 가지며 카운터 처럼 동작한다.
조건식 - 루프는 카운터가 일정한 값에 도달할 때까지 계속해서 실행된다. 변수 i가 0으로 루프는 실행을 멈추기까지 10번 실행된다.
증가감식 - 루프는 중괄호 내의 코드를 실행할 때마다 카운터의 값에 1을 더한다. 변수 i에 ++연산자를 이용하여 1을 더한다.

루프의 실행

for (let i = 0; i < 10; i++) {
	document.write(i);
    }

👉 for 문법

• 반복문 연습 1~ 반복문연습 10 출력을 for문을 이용해 코드를 제작해 보자

<script>
	for (let i = 1; i <= 10; i++) {
    	document.write("반복문 연습" + i, "<br>");
    }
</script>

🤞 결과

👉 for문으로 1부터 100까지 더하기

• 1부터 100까지 더하는 코드를 for문으로 제작해보자.

<script>
	let sum = 0;
    for(let i = 1; i < 100; i++) {
    	sum += i;
    }
    document.wrtie("정답은: ", sum, "입니다.", "<br>");
</script>

🤞 결과

👉 for문 활용

• scores = [24, 32, 17] 배열의 아이템 개수만큼 for문을 활용하여 '응시회차'를 출력하는 코드를 제작해보자.

<script>
	const scores = [24, 32, 17];
    const arrayLength = score.length;
    let roundNumber = 0;
    let msg = "";
    
    for (let i = 0; i < arrayLength; i++) {
    	roundNumber = i + 1;
        msg += "응시회차 " + roundNumber + " : ";
        msg += score[i] + "<br>";
    }
    
    document.getElementById("answer").innerHTML = msg;
</script>

🤞 결과

👉 break문

• while문 또는 for문에서 break문을 실행하면 조건식과 상관없이 강제로 종료한다.

for(초깃값; 조건식; 증감식) {
	break; //반복문을 강제로 종료
    자바스크립트 코드;
    }
    
    
var 변수 = 초기값;
while(조건식) {
	break; //반복문을 강제 종료
    자바스크립트 코드;
    증감식;
    }

👉 break문법

• 1부터 10까지의 출력문에서 break로 i값이 6이면 강제종료가 되게 출력하는 코드를 만들어보자

<script>
	for(let i = 1; i < 10; i++) {
    	if(i === 6) {
        	break;
        }
        document.write('coding' + i + '<br>");
    }
</script>

🤞 결과

👉 continue문

• 반복문에서만 사용한다. continue문에 다음에 오는 코드는 무시하고 코드를 실행하는 방법

for (초기값; 조건식; 증가감) {
	continue;
    자바스크립트 코드;
    } // continue다음에 오는 코드는 무시하고 바로 증가감식을 실행하라.
    
var 변수 = 초기값;
while(조건식) {
	증감식;
    continue;
    자바스크립트 코드;
    } // continue다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건식 검사를 실행하라.

👉 continue문법

• i의 값이 5와 같으면 무시하고 출력하는 코드를 제작하자.

<script>
	for (let i = 0; i < 10; i++) {
    	if (i === 5) {
        	continue;
        }
        document.write('coding test' + i + '<br />'
    }
</script>

🤞 결과

👉 for of 루프

• ES6의 새로운 유형의 루프.
  배열에 많이 사용되는데, 배열의 요소 개수만큼 반복하고, 반복 때마다 각 요소들을 사용할 수 있는 변수가 주어지는 독특한 반복문이라고 할 수 있다.

FOR (변수 OR 배열) {
	반복동작부분
    }

👉 for of 문법

<script>
	const fruits = ['apple','banana','orange'];
    for (const fruit of fruits){
    	console.log(fruit);
    } 
    // 배열의 lenght가 3이니까 3번 반복하면서 변수 fruit에 요소들이 순서대로 할당된 것이다. 
    // index를 가져오지는 못하기 때문에 index가 필요한 경우라면 다른 메서드를 활용해야 한다.
</script> 

🤞 결과

👉 Object.keys() 객체에 대한 반복

• 특정 객체를 대상으로 key값들만 뽑아서 배열로 반환하는 메서드이다.

Object.keys(obj);

👉 Object.keys 문법

• javascript객체 (object)의 키(key)와 값(value)을 배열로 얻기

<script>
	const car = {
    	maker : 'BMW',
        quantity : 100,
        option : true,
    }
    //전체 키를 배열로 얻는 코드
    document.write(Object.keys(car) + '<br>');
    
    //전체 값을 배열로 얻는 코드
    document.write(Object.values(car) + '<br>');
    
    //배열에 대해서 각 구성 항목을 참조하는 코드
    for (const 1 of Object.values(car){
    	document.write(i);
    }
</script>

🤞 결과

👉 for in 루프

• 모든 객체에서 사용이 가능하다. 객체의 key값에 접근할 수 있지만 value값에 접근하는 방법은 제공하지 않는다. 반복 중에는 객체의 속성을 추가, 수정, 삭제하지 않는 것이 좋다.

for (변수 in 객체) {
	반복동작부분
    }

👉 for in 문법

<script>
	const car = {
    	maker: 'BMW',
        color: 'red',
        year: '2022',
    }
    
    for (const prop in car) {
    	console.log(prop, car[prop])
</script>

🤞 결과

👉 for of와 for in의 차이

• for in은 배열의 속성 목록을 반환하는 반면, for of는 배열의 원소 목록을 반환한다.

<script>
	let list = [4, 5, 6];
    
    //for in은 키의 목록을 반환한다.
    for (let i in list) {
    	console.log(i);
    }
    
    //for of는 값을 반환한다.
    for (let j of list) {
    	console.log(j);
    }
</script>

🤞 결과