TIL 14 | 조건문, 선택문, 반복문

https://youtu.be/YBjufjBaxHo
드림코딩 by 엘리 님의 유튜브 강의를 보며 정리한 내용입니다.

1. Conditional operators: if

if, else if, else

const name= 'jennie';
if (name === 'jennie') {
  console.log('Welcome, Jennie!');
} else if (name === 'alec') {
  console.log('Nice to meet you Alec!');
} else {
  console.log('unknown');
} 

// Welcome, Jennie!

2. Ternary operator: ?

condition ? value1 : value2;

const name = 'jane';
console.log(name === 'jane' ? 'yes' : 'no');  // jane

🤚🏻 간혹 ternary operator를 계속 nesting 해서 쓰는 경우가 있는데, 그렇게 하면 코드의 가독성이 떨어지기 때문에 그런 경우라면 if 나, switch 를 쓰는게 더 좋다.
✨ ternary operator 은 간단한 상황에서만 쓴다.

3. Switch statement

switch case break

• 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; 
    // switch(안에 있는 값, 즉 browser값이) === 'IE' 이면 'go away!'실행하고 멈춘다(break)
  case 'Chrome':
    console.log('love you!');
    break;
  case 'Firefox':
    console.log('love you!');
    break;
  default:
    console.log('same all!');
    break;
}

// go away!

default 는 어떤 값도 일치하지 않을 경우 실행된다.

✨ Chrome이랑 Firefox는 똑같은 메세지를 출력하고 있기 때문에 반복할 필요 없이 case를 연달아서 붙여쓰면 자동적으로 묶어서 출력된다.

case 'Chrome' :
case 'Firefox' :
  console.log('love you!');
  break;

🤚🏻 if 문에서 else if, esle if 여러개를 반복 한다면 switch를 사용하는것을 고려하는게 좋다. 그리고 나중에 TS에서 정해져있는 타입을 검사하거나, enum 비슷한 애들을 검사 할때는 switch를 쓰는것이 가독성에 좋다 🙂

4. While loop

4-1. while

• while loop, while the condition is truthy, body code is executed.
• 조건문이 맞을때만 블럭을 실행하고 싶다면 → while loop 사용
• while (statement) { statement 가 false로 나오기 전까지 무한대로 반복해서 돈다.}

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

4-2. do while

• do while loop, body code is executed first, then check the condition.
• 블럭을 먼저 실행하고 싶다면 → do while loop 사용
• 먼저 do 안의 {블럭}을 실행한 다음에, 조건이 맞는지 안 맞는지를 검사한다.

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

// do while: 0

위 코드를 보면, i가 이미 0임에도 불구하고 do안의 블럭을 먼저 실행하기 때문에 do while: 0 이 출력이 되고 → 그러고 나서 검사해서 멈춘다.

5. For loop

for(begin; condition; step)

1. begin 은 처음 한번만 호출을 하고
2. 블럭을 실행하기 전에 condition 이 맞는지 안 맞는지 검사를 한 다음에
3. 이 블럭이 실행이 되면 step 을 실행한다.
   → condition 이 안 맞을 때까지 condition 과 step 만 무한대로 반복해서 실행된다.
   
   

① 기존에 존재하는 변수에 값을 할당하는 경우

for ( i = 3; i > 0; i--) {
  console.log(`for: ${i}`);
}
// for: 3
// for: 2
// for: 1

② inline variable declaration 이라고 하는데, for 안의 블럭에다가 let이라는 지역변수를 선언하여 작성하는 경우

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

③ nested loops
while 이나 for 같은 경우는 서로 nesting해서 작성할 수 있다.

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}, j: ${j}`);
  }
}

/*
i:0, j:0
i:0, j:1
i:0, j:2
.
.
.
i:9, j:7
i:9, j:8
i:9, j:9
*/

⚡️ break 는 loop를 완전히 끝내는 것이고,
⚡️ continue 는 지금차례만 skip하고 다시 다음 step으로 넘어간다.

ex 1 iterate from 0 to 10 and print only even numbers (use continue)

for (i = 0; i < 11; i++) {
  if (i % 2 !== 0){
    continue;
  }
  console.log(i);
}

ex 2 iterate from 0 to 10 and print numbers until reaching 8 (use break)

for (i = 0; i < 11; i++) {
  if ( i > 8 ){
    break;
  }
  console.log(i);
}