배꼽파지 않도록 잘 개발해요

[코드잇] 프로그래밍 핵심 개념 in JavaScript - ③ 제어문 본문

코드잇 Codeit/Front-End

[코드잇] 프로그래밍 핵심 개념 in JavaScript - ③ 제어문

꼽파 2023. 5. 2. 11:07

if 문

// if문 (if statement)
// 만약 (조건부분)이 충족되면, {동작부분}을 수행해라

if (조건부분) {
    동작부분
}
// if문 (if statement)
// 온도가 0도 이하면, 물이 언다를 출력

let temperature = 0;

if (temperature <= 0) {
    console.log('물이 업니다.');
}

// if문 (if statement)
// 온도가 0도 이하면, 물이 언다를 출력

let temperature = 10000;

if (temperature <= 0) {
    console.log('물이 업니다.');
} else {
    console.log('물이 얼지 않습니다.');
}
// else는 if의 조건부분에 해당하지 않는 경우 실행되는 내용을 의미함.

else if문

// if문 (if statement)
// 온도가 0도 이하면, 물이 언다를 출력

let temperature = 1;

if (temperature <= 0) {
    console.log('물이 업니다.');
} else {
    if (temperature < 100) {
        console.log('물이 얼지도 끓지도 않습니다.');
    } else {
        console.log('물이 끓습니다.');
    }
}
/*
else 안에 if 문을 한번 더 작성하면 된다
---> 중첩을 여러번 반복하면 '가독성'이 떨어짐!
*/

else 안에 if-else문을 반복하여 중첩 사용하면 가독성이 떨어질 수 있음. 

else 다음 바로 if문이 오는 경우 'else if'문을 사용하면 됨.

// else if 문 (if statement)
// 온도가 0도 이하면, 물이 언다를 출력

let temperature = 150;

if (temperature <= 0) {
    console.log('물이 업니다.');
} else if (temperature < 100) {
    console.log('물이 얼지도 끓지도 않습니다.');
} else {
    console.log('물이 끓습니다.');
}

// else if 문 (if statement)

let temperature = 150;

if (temperature <= 0) {
    console.log('물이 업니다.');
} else if (temperature < 100) {
    console.log('물이 얼지도 끓지도 않습니다.');
} else {
    if (temperature < 150) {
        console.log('물이 끓습니다.');
    } else {
        console.log('물이 모두 수증기가 되었습니다.');
    }
    }
/*
0이하 -> 물이 업니다
0초과 100미만 -> 물이 얼지도 끓지도 않습니다
100이상 150미만 -> 물이 끓습니다
150이상 -> 물이 모두 수증기가 되었습니다
*/

// else if 문 (if statement)

let temperature = 150;

// 가독성을 위해 코드를 수정함
// if -> else if -> else if -> else

if (temperature <= 0) {
    console.log('물이 업니다.');
} else if (temperature < 100) {
    console.log('물이 얼지도 끓지도 않습니다.');
} else if (temperature < 150) {
    console.log('물이 끓습니다.');
} else {
    console.log('물이 모두 수증기가 되었습니다.');
}
/*
0이하 -> 물이 업니다
0초과 100미만 -> 물이 얼지도 끓지도 않습니다
100이상 150미만 -> 물이 끓습니다
150이상 -> 물이 모두 수증기가 되었습니다
*/

switch문

// switch문 (switch statement)
/**
 * 당신은 등산을 하던 중 갑작스레 산불이 발생해 대피 중입니다.
 * 그러던 중 산중턱에서 다친 동물 4마리를 만났습니다.
 * 이미 체력이 많이 떨어진 당신,
 * 이 동물 중 단 한 마리만 구출할 수 있습니다.
 * 과연 당신의 선택은?
 * 1. 토끼, 2. 고양이, 3. 코알라, 4. 강아지
*/

// 무엇을 선택했는지에 따라 다른 결과를 확인할 수 있음.
// switch문 (switch statement)
switch (비교할_값) {
    case 조건값_1:
        동작부분; // 비교값과 조건값이 일치할 때 동작함
        break; // 조건값에 대한 동작을 마친 후, switch문을 빠져 나와라
    case 조건값_2:
        동작부분;
        break;
    default:
    // 비교할 값이 "모든 조건값과 일치하지 않을 때" 동작함
    // else문과 비슷하고, 필요할 경우 생략 가능함
        동작부분;
}
// switch문 (switch statement)

let myChoice = 2;

switch(myChoice) {
    case 1:
        console.log('토끼를 선택한 당신, ...')
        break;
    case 2:
        console.log('고양이를 선택한 당신, ...')  
        break;
    case 3:
        console.log('코알라를 선택한 당신, ...')
        break;
    case 4:
        console.log('강아지를 선택한 당신, ...');  
        break;
    default:
        console.log('1에서 4사이의 숫자를 선택해 주세요.')
}

break문을 지우면 어떻게 될까?

ctrl + D : 똑같은 모양으로 작성된 코드를 동시 선택 가능

// switch문 (switch statement)

let myChoice = 2;

switch(myChoice) {
    case 1:
        console.log('토끼를 선택한 당신, ...')
    case 2:
        console.log('고양이를 선택한 당신, ...')  
    case 3:
        console.log('코알라를 선택한 당신, ...')
    case 4:
        console.log('강아지를 선택한 당신, ...');  
    default:
        console.log('1에서 4사이의 숫자를 선택해 주세요.')
}
// break문이 없으면 아래에 있는 모든 동작을 실행하게 된다

break문을 지우면 모든 동작을 실행하게 된다.

switch문 vs if문

// switch문
switch(myChoice) {
    case 1:
      console.log('토끼를 선택한 당신, ...');
      break;
    case 2:
      console.log('고양이를 선택한 당신, ...');
      break;
    case 3:
      console.log('코알라를 선택한 당신, ...');
      break;
    case 4:
      console.log('강아지를 선택한 당신, ...');
      break;
    default:
      console.log('1에서 4사이의 숫자를 선택해 주세요.');
  }

// if문
if (myChoice === 1) {
    console.log('토끼를 선택한 당신, ...');
  } else if (myChoice === 2) {
    console.log('고양이를 선택한 당신, ...');
  } else if (myChoice === 3) {
    console.log('코알라를 선택한 당신, ...');
  } else if (myChoice === 4) {
    console.log('강아지를 선택한 당신, ...');
  } else {
    console.log('1에서 4사이의 숫자를 선택해 주세요.');
  }

if문과 switch문 모두 특정한 조건에 따라 다르게 동작하는 코드를 만들 수 있음.
- if문 : 어떤 넓은 범위를 만족하는 조건식을 만들 때 효과적임.
- switch문 : 특정한 값에 일치하는 조건을 만들 때 효과적임.

 

주의할 점은 switch문은 암묵적 형변환을 허용하지 않아서 등호 3개를 입력해야함.

let myChoice = '2';  // 숫자 2를 문자형으로 입력한 경우

switch(myChoice) {
  case 1:
    console.log('토끼를 선택한 당신, ...');
    break;
  case 2:
    console.log('고양이를 선택한 당신, ...');
    break;
  case 3:
    console.log('코알라를 선택한 당신, ...');
    break;
  case 4:
    console.log('강아지를 선택한 당신, ...');
    break;
  default:
    console.log('1에서 4사이의 숫자를 선택해 주세요.');
}

if (myChoice === 1) { // switch문은 암묵적 형변환을 하지 않아서 등호 3개를 붙여야 됨.
  console.log('토끼를 선택한 당신, ...');
} else if (myChoice === 2) {
  console.log('고양이를 선택한 당신, ...');
} else if (myChoice === 3) {
  console.log('코알라를 선택한 당신, ...');
} else if (myChoice === 4) {
  console.log('강아지를 선택한 당신, ...');
} else {
  console.log('1에서 4사이의 숫자를 선택해 주세요.');
}

switch문에서는 default문이 실행되었고, if문에서는 else문이 실행된 것을 알 수 있음.

그럼 if문에서 조건식에 등호 2개만 사용하면 어떻게 될까?

let myChoice = '2'; // 숫자 2를 문자형으로 입력한 경우

switch(myChoice) {
  case 1:
    console.log('토끼를 선택한 당신, ...');
    break;
  case 2:
    console.log('고양이를 선택한 당신, ...');
    break;
  case 3:
    console.log('코알라를 선택한 당신, ...');
    break;
  case 4:
    console.log('강아지를 선택한 당신, ...');
    break;
  default:
    console.log('1에서 4사이의 숫자를 선택해 주세요.');
}

if (myChoice == 1) { // 등호 2개로 동등비교만 함.
  console.log('토끼를 선택한 당신, ...');
} else if (myChoice == 2) {
  console.log('고양이를 선택한 당신, ...');
} else if (myChoice == 3) {
  console.log('코알라를 선택한 당신, ...');
} else if (myChoice == 4) {
  console.log('강아지를 선택한 당신, ...');
} else {
  console.log('1에서 4사이의 숫자를 선택해 주세요.');
}

switch문에서는 default문이 실행되었고,

if문에서는 myChoice가 2일때의 조건문(첫번째 else if문)이 실행되었음을 알 수 있음.

즉, if문의 조건을 switch문으로 작성할 경우 엄격한 형변환을 위해 조건식에 등호 3개를 사용해야 한다는 말임. 

 

switch문은 값들을 비교할 때 자료형을 엄격하게 구분하고,

if문으로 대체할 때는 반드시 등호 3개로 일치비교를 해야함.

for문

// 반복문 (loop statement)
// 코드잇 최고! x 10 --> 어떻게 할까요?

// 1. 복붙을 10번 한다
console.log('코드잇 최고!');
console.log('코드잇 최고!');
console.log('코드잇 최고!');
console.log('코드잇 최고!');
console.log('코드잇 최고!');
console.log('코드잇 최고!');
console.log('코드잇 최고!');
console.log('코드잇 최고!');
console.log('코드잇 최고!');
console.log('코드잇 최고!');
// 죽음....! 역시 이런 건 컴퓨터가 해야함.
// for 반복문 (loop statement)
for (초기화부분; 조건부분; 추가동작부분) {
    동작부분
}

/*
 if문과 차이점
if문 : 동작을 한번만 수행하고 끝남
for문 : 조건부분이 충족되면, 계속해서 동작부분을 반복함.
*/

초기화부분 : 처음 시작할 때 딱 한번만 실행되는 부분

조건부분 : if문과 동일하게 boolean형태로 판단 후 true가 나오면 '동작부분'의 내용을 실행함.

추가동작부분 : 동작부분 실행 후 추가동작부분을 실행함.

// for 반복문 (loop statement)
// '코드잇 최고!'라는 문장을 10번 출력하는 for문

for (let i = 1; i <= 10; i++) {
    console.log('코드잇 최고!');
}

반복문을 만들 때 가장 먼저 생각해야할 것?

→ 얼마나 반복해야하는가?

 

초기화부분 :

반복의 횟수를 저장하는 역할이 변수 i인 것임.

for문에서 i는 주로 반복횟수를 저장하는 변수로 사용함. 

 

조건부분 :

10번 반복이니까 i <= 10

 

추가동작부분 :

변수의 값을 하나씩 증가시키는 코드를 추가동작 부분에 작성함.

// for 반복문 (loop statement)
// '코드잇 최고!'라는 문장을 10번 출력하는 for문

for (let i = 1; i <= 10; i++) {
    console.log(`${i}코드잇 최고!`);
}
// 반복하는 횟수에 맞는 숫자를 표시하기 위해 ${i} 작성

가장 먼저 초기화 부분이 실행됨. 변수 i가 선언됨.

→ 조건부분이 평가됨.

     처음에는 i가 1이니까 true가 되어 동작부분이 실행됨. (i = 1)

→ '1 코드잇 최고'가 출력됨.

→  i가 하나 증가함. i가 2가 됨.

→  초기화부분은 건너뛰고, 조건부분으로 넘어감.

      조건부분이 false가 될 때까지 계속 반복.

→ 조건부분이 평가됨.

i = 2

'2 코드잇 최고'가 출력됨.

.

.

.

i = 11이 되는 지점에서 false가 되어 반복이 종료됨.

 

• 추가동작부분을 꼭 채울 필요는 없음.

// 추가동작부분이 없음
for (let i = 1; i <= 10;) {
  console.log(`${i} 코드잇 최고!`);
  i++; // 동작부분에서 i를 증가시킴
}

추가동작부분을 생략하고, 동작부분에 반복횟수를 증가시켜도 제대로 작동됨.

그렇지만 동작부분에서는 실제로 반복하고자하는 내용들만 집중하고, 어떤 조건과 관련된 부분은 이 소괄호에 집중하면서 좀 더 목적에 맞는 코드를 작성할 수 있음.

 

• 초기화부분에서 사용하는 변수는 for문의 로컬변수임.

for (let i = 1; i <= 10; i++) {
    console.log(`${i} 코드잇 최고!`);
  }
 
  console.log(i); // Error !!
// i는 for문의 로컬변수임을 알 수 있음

초기화변수를 for반복문 바깥에서 출력하려고 하면 에러가 남.

 

• 초기화 부분도 채울 필요가 없으나 반드시 세미콜론(;)을 쓰자.

// for 안에 초기화변수를 선언하는 대신 for 바깥에 미리 변수를 선언함.
let i = 1;
for (; i <= 10; i++) {
  console.log(`${i} 코드잇 최고!`);
}
// for반복문에서 세미콜론은 구분하는 용도
// → 무조건 2개가 있어야 함

for문 소괄호 안에 반드시 세미콜론 2개를 사용해야함.

 

• 1부터 100까지 짝수만 출력하기

/*
i를 1부터 100까지 반복
2로 나눴을 때 나머지 0일 때만 i를 출력
*/

for ( let i = 1; i <= 100; i++ ){
  if (i % 2 === 0) {
    console.log(i);
  }
}

/*
i를 1부터 50까지 반복하면서
i에 2를 곱한다
*/

for (let i = 1; i <= 50; i++ ) {
      console.log(i * 2);
}

/*
i를 2부터 100까지 반복하면서
i를 2씩 증가시킨다
*/

for (let i = 2; i <= 100; i += 2 ) {
    console.log(i);
}

 

• 주어진 높이(height)에 맞게 '*'로 삼각형을 그려주는 함수 printTriangle을 완성하기

function printTriangle(height) {
    // i를 높이만큼 반복하여
    // 반복할 때마다 i만큼의 별이 나오게 함
    for (i = 1; i <= height; i++) {
       console.log('*'.repeat(i));
    }
}
function printTriangle(height) {
    // message = 한 줄에 출력되는 별  
    // i는 반복횟수
    let message = '';
    for (let i = 0; i < height; i++) {
      message += '*';
      console.log(message);
    }
  }

/*
height = 3이라고 하면
i = 0 일때 *
i = 1 일때 **
i = 2 일때 ***
*/

// 테스트 코드
console.log('높이: 1');
printTriangle(1);

console.log('높이: 3');
printTriangle(3);

console.log('높이: 5');
printTriangle(5);

while문

// while문 (while statement)
while (조건부분) {
    동작부분
}    
// while문 (while statement)
// 특별한 경우가 아니라면 while문과 for문은 대체가 가능함.

let i = 1;
while (i <= 10) {
    console.log(`${i} 코드잇 최고!`);
    i++;
}
// 반복에 필요한 횟수 -> 글로벌변수 생성
// 반복할 동작 ->  while문 안에서 동작부분 작성

for (let i = 1; i <= 10; i++) {
    console.log(`${i} 코드잇 최고!`)
}

// 가독성 측면에서는 for문이 좋다
// while문 (while statement)

let i = 30;

while ( i % 7 !== 0) {
    i++;
}

console.log(i);

/*
30이상의 수에서 7로 나눴을 때
나머지가 0이 아니면(true) 1을 증가시키는 것을 반복하다가
나머지가 0이 된다면(false) 반복을 멈춤
*/
 

반복문 밖의 글로벌변수를 가지고 조건을 평가함.

반복문 안에서도 이 변수를 다루고 있음.

반복문이 다 실행된 다음에 반복문 밖에서 이 값을 사용하고 있음.

 

이 코드를 for문으로도 만들 수 있으나, for문은 보통 조건비교에 사용되는 값을 반복문 내부에서만 사용하고, 반복문 외부에서는 사용불가능함.

 

반복문 밖에서도 변수를 사용해야할 경우에는 while문을 사용하는 것이 좋음.

for문보다 사용빈도가 낮지만, 상황에 따라 while문을 활용해야할 수도 있음.

 

• while 반복문을 사용하여 1 이상 100 이하의 홀수를 모두 출력하기

// i를 1부터 100까지 반복하면서 i를 출력하기

let i = 1;

while (i <= 100) {
  console.log(i); // 출력
  i++;            // i가 1씩 증가
}

// i를 2로 나눴을 때 나머지가 0일 때 i를 출력

let i = 1;

while (i <= 100) {
  if (i % 2 === 1) {
    console.log(i);
  }
  i++;
}

// i를 1부터 50까지 반복하면서 i * 2 - 1을 출력하는 방법

let i = 1;

while (i <= 50) {
  console.log(i * 2 - 1);
  i++;
}

//  i를 1부터 100까지 반복하면서 i를 2씩 증가시키는 방법

let i = 1;

while (i <= 100) {
  console.log(i);
  i += 2;
}

 

• while문을 활용해서 정수 180의 약수를 모두 출력하고, 총 몇 개의 약수가 있는지 출력하기

const N = 180;

let i = 1;
let count = 0;
while ( i <= 180 ) {
 if ( N % i == 0 ) {
  console.log(i)
  count++;
 }
  i++;
// * 주의 : while문 안에서 증가해야함. 안 그러면 무한루프
}

console.log(`180의 약수는 총 ${count}개입니다.`)

/*
1. 180이하 자연수 (약수를 찾아야 하는 수) = 변수 i를 선언
2. i가 1부터 180까지 반복해야함 -> while의 조건문
3. 180의 약수를 찾아야 하므로
-> N(180)을 i로 나눴을 때 나머지가 0이 되는지 조건이 필요함
-> if문 작성
4. 나누어 떨어지는 수 i를 출력
-> i는 while문 안에서 1개씩 증가
5. 반복횟수는 count 변수를 선언하기
-> i가 증가할 때마다 count가 하나씩 증가하도록 하면 됨.
(count는 while문 밖에서 출력 가능함)
*/

break와 continue

break : 반복문 전체를 빠져 나옴.

contiunue : 해당 코드를 한번 건너뛰고 다음 단계로 넘어감.

// break와 continue

let i = 1;
// while문으로 1부터 10까지 반복
while (i <= 10) {
    console.log(i);
    i++;
}
// break와 continue

let i = 1;
// while문으로 1부터 10까지 반복
while (i <= 10) {
    console.log(i);
    i++;
    break; // 1만 출력됨
}
// i = 1에서 시작하고 1번 반복 후 break로 빠져나감
// break와 continue

// i가 1부터 7일때까지만 반복함
// while문으로 작성

let i = 1;

while (i <= 10) {
    console.log(i);
    if (i === 7) {
        break;
    }
    i++;
}

// for문으로 작성
for (let i = 1; i <= 10; i++ ) {
    console.log(i);
    if (i === 7) {
        break;
    }
}

// break와 continue
/*
i가 1부터 10까지일 때 반복함
i가 2로 나누었을 때 나머지 0인 경우
-> 즉 i가 짝수인 경우를 모두 건너뜀
*/

// for문

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

// while문

let i = 1;

while (i <= 10) {
    if (i % 2 === 0) {
        i++; // 추가동작부분이 없어서 적어 줘야됨.
        continue;
    }
    console.log(i);
    i++;
}

구구단 만들기

// 구구단 만들기

// for문
for ( let i = 1; i <= 9; i++) {
    for (k = 1; k <= 9; k++) {
      KuKu = i * k
      console.log(`${i} * ${k} = ${KuKu}`)
    }
  }

// while문

let i = 1;

while ( i <= 9) {
    let j = 1;
    while ( j <= 9) {
        GuGu = i * j
        console.log(`${i} * ${j} = ${GuGu}`);
        j++;
    }
    i++;
}

/* 주의할 점 :
while 안에 j를 선언해야
i가 1일 때 j는 1부터 9까지 반복후
다시 i가 2일 때 j가 1이 되어야 함.
그니까 선언 자체를 while문 안에다 해야 됨.
*/

피보나치 수열

// 피보나치 수열

let A = 1;
let B = 1;

for (let i = 1; i <= 48; i++ ) {
  if ( i == 1 ) {
    console.log(i);
    console.log(i);
  }
  let C = A + B;
  console.log(C);
  A = B;
  B = C;
}

/*

1, 1, 2, 3, 5, 8 ...
앞에 1이 똑같이 2개 있어서
맨 처음 i=0일때는 그냥 1이 2개 나오도록 함. 귀찮으니까.

i=1인 경우부터 변수 3개를 활용해서 반복문 진행됨.
A
B
C = B + A
이런 흐름으로 감.

*/
728x90

'코드잇 Codeit > Front-End' 카테고리의 다른 글

코드잇 javaScript 기초 - 프로그래밍과 데이터 in JavaScript ③ 자료형 심화  (0) 2023.05.04
코드잇 javaScript 기초 - 프로그래밍과 데이터 in JavaScript ② 배열  (1) 2023.05.04
[코드잇] 프로그래밍과 데이터 in JavaScript - ① 객체  (0) 2023.05.03
[코드잇] 프로그래밍 핵심 개념 in JavaScript - ② 추상화  (0) 2023.04.30
[코드잇] 프로그래밍 핵심 개념 in JavaScript - ① 자료형  (0) 2023.04.28
'코드잇 Codeit/Front-End' Related Articles more