[JS005] JS의 조건문과 반복문

고정원·2021년 6월 26일
0

1/100_JS

목록 보기
3/9
post-thumbnail

문제5의 코드
📍 a+=i 은 a = a+i와 동일한 표현이다.

i값이 1부터 시작하고 한 번 순환할 때마다 2씩 증가하니까 for문이 총 두 번 순환한다.

  • 1번째 순환에서 a += i(a = a + i) → a = 10 + 1 // 11
  • 2번째 순환에서 a +=i(a = a + i) → a = 11 + 3 // 14
    a = 14 , b = 2
    → console.log(a+b);는 16

조건문 Conditional operators

1. if, else if, else

if (조건) { codeA} else {codeB}
만약 조건이 true면, 코드 A를 실행하고, 아니면 코드 B를 실행한다.

const nickName = 'jeongwon';
//만약 닉네임이 jeongwon이면, 콘솔에 jeongwon을 찍고
if (nickName === 'jeongwon') {
    console.log('Welcome, jeongwon');
//만약 닉네임이 coder이면 콘솔에 coder를 찍고
} else if (nickName === 'coder') {
    console.log('You are amazing coder');
//아니면 unknown을 콘솔에 찍는다.
} else{
    console.log('unknown');
}

2. Ternary operator : ?

condition ? value1 : value2;
물음표(?)앞의 조건이 true면 yes 실행, 아니면 : no 실행

// 닉네임이 garden이면 ? Yes 아니면 No
console.log(nickName === 'garden' ? 'yes' : 'no'); 

3. Switch statement

2가지 보다 많은 다수의 조건에 따른 특정 코드를 수행하는 경우에는 Switch문을 사용한다.

  • use for multiple if checks
  • use for enum-like value check
  • use for multiple type checks in TS
const browser = 'IE';
switch (browser){
    case 'IE':
        console.log('go away!');
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('love you!');
        break;
    <!--case 'Firefox':
        console.log('love you!');
        break;-->
    default:
        console.log('small all!');
        break;    
}

반복문 Loops

1. while

while loop, while the condition is truthy,
body code is executed.

let i =3;
while (i >0) {
    console.log(`while: ${i}`);
    i--;
}

위 while문 실행결과

2. do...while

do { codeA } while { 조건 }
A코드를 먼저 실행하고 조건을 체크한다.

do{
    console.log(`do while: ${i}`);
    i --;
} while (i > 0);

💡{ code }을 먼저 실행하고 싶으면 do while, 조건문이 맞을때만 실행하고 싶으면 While

3.for loop, for(begin; condition; step)

for loop은 처음 한번만 begin을 호출하고, 블럭{ }실행전 컨디션이 맞는지 확인하고, 블럭이 다 실행이 되면 그 다음 스텝을 진행한다. 그래서 컨디션이 안맞을때까지 condition ⇄ step을 반복한다.

MDN공식문서
for ([initialization]; [condition]; [final-expression])
{ statement }

  • initialization
    식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용var 또는 let 키워드를 사용해 새로운 변수 선언 가능하다.
    -var 키워드로 변수선언
    : 반복문에 제한되지 않고, for 문과 같은 범위scope에 위치.
    -let 키워드로 변수 선언
    : 반복문의 지역 변수
  • condition
    매 반복마다 평가할 식. 평가 결과가 참이라면 statement를 실행한다.이 식을 넣지 않았을 때 계산 결과는 언제나 참이 된다. 계산 결과가 거짓이라면 for 문의 바로 다음 식으로 건너 뛴다.
  • final-expression
    매 반복 후 평가할 식. 다음번 condition 평가 이전에 발생한다. 주로 카운터 변수를 증감하거나 바꿀 때 사용한다.
  • statement
    조건의 평가 결과가 참일 때 실행하는 문. 여러 문을 반복 실행하려면 블럭문({ ... })으로 묶어야 한다. 아무것도 실행하지 않으려면 공백문 (;)을 사용하면 된다.
for (i =3; i>0; i--){
    console.log(`for:${i}`);  
}

for ( let i =3; i>0; i--){
    // inline variable declaration
    console.log(`for:${i}`);  
}

//nested loops - cpu에 그닥 좋지 않음 
for (let i =0; i < 10; i++){
    for (let j =0; j < 10; j++) {
    console.log(`i: ${i}, j:${j}`);  
    }
}

📍 for 반복문의 3개 식([initialization]; [condition]; [final-expression])은 모두 선택 사항이다.
단,condition 블럭을 생략하는 경우, 반복문 본문에 무한 반복을 탈출할 수 있는 장치를 추가해야 합니다.

var i = 0;

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

세 가지 모두 생략할 수도 있습니다. 위와 같이 break 문을 사용해 반복을 탈출할 수 있도록 추가하고, 변수를 수정해 탈출 조건이 언젠가 참이 되도록 해야 합니다.

💡⁉ 반복문을 언제까지 반복할 것인가?! 멈춰!!

break; continue;
: 둘다 반복문의 실행을 중단 시키지만,

  • break는 조건문이 true인, 충족된 시점에서 영원히 종료되는 것이고,
  • continue는 조건문이 충족되는 시점에서만 실행을 중단시키고 이후의 구문은 계속 실행된다.

마무리

  • 조건문은 각 조건이 충족할 때, 특정 작업을 수행하도록 한다.
  • 반복문은 조건이 ture인 동안(조건이 false가 될 때까지)은 특정작업을 계~속 반복한다.
  • 따라서 반복문의 경우 언제 반복문을 종료시킬지 정해줘야 한다.

[참고자료]

conditionals - JavaScript | MDN
for - JavaScript | MDN
드림코딩 by 엘리

profile
해결문제에 대해 즐겁게 대화 할 수 있는 프론트엔드 개발자

0개의 댓글