JavaScript 핵심 개념 정리(제어문)

📌 if문

✔️ 어떤 특별한 조건에 따라 코드를 실행할지 말지 결정하는 문법
→ 만약 조건부분이 충족되면 동작 1 부분을 수행해라, 아니면 동작 2 부분을 수행해라.

 if (조건) {
	동작1 
} else {
	동작2
};

예시 👇🏻

let temperature = 0;

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

출력 👇🏻

물이 업니다.

📌 else if문

✔️ 일반적인 if문 보다 더 많은 조건을 사용하고 싶을 때 사용한다.

예시 👇🏻

let temperature = 140;

if ( temperature <= 0 ) {
  console.log('물이 업니다.');
} else {
  if ( temperature < 100 ) {
    console.log('물이 얼지도 끓지도 않습니다.');
  }else{
  console.log('물이 얼지 않습니다.')
  };
};
//가독성이 떨어진다.

if (temperature <= 0 ){
  console.log('물이 업니다.');
} else if (temperature < 100) {
  console.log('물이 얼지도 끓지도 않습니다.');
} else  if (temperature < 150) {
  console.log('물이 끓습니다.');
} else {
  console.log('물이 모두 수증기가 되었습니다.');
}
//훨씬 간결하고 가독성이 좋다.

결과 👇🏻

물이 끓습니다.

📌 Switch문

✔️ 어떤 값을 입력했는지에 따라 다르게 동작하는 문법

switch (비교할_값) {
  case 조건값_1:
    동작부분;
    break; //switch문을 빠져나와라
  case 조건값_2:
    동작부분;
    break;
  default:
  //비교할 값이 모든 조건하고 안맞을 때 동작할 코드 작성(else문같은 것), 필요에 따라서 생략이 가능하다
    동작부분;
}

→ break : switch문은 조건값과 일치하는 경우를 찾은 후 break를 만나기 전까지 그 아래 모든 동작을 실행한다. 좀 더 안전하게 switch문을 사용할 수 있다.

switch문과 if문 비교

switch문 👇🏻

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 사이의 숫자를 선택해주세요.');
}

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문

⭐ switch문은 값을 비교할 때 자료형을 엄격하게 구분하고 if문은 대체할 때는 반드시 등호 3개로 일치비교를 해야한다.

📌 for문(반복문)

✔️ 자바스크립트에서 가장 많이 사용되는 반복문 -> for문
✔️ 종료되려면 조건이 안맞아야한다.

for (초기화부분; 조건부분; 추가동작부분 ){
  동작부분
}

→ 조건이 충족이 되면 반복해서 동작해준다.

☑️ 초기화부분 : for문이 시작되면 가장 먼저 한번만 실행되는 동작부분
☑️ 조건부분 : if문과 동일하게 boolean형태로 평가해서 true가 나오면 동작부분을 실행해준다.
☑️ 추가동작부분 : 조건부분이 true로 판단됐을 때 동작부분이 실행되고 추가로 동작할 부분을 실행해준다.

예시 👇🏻

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

출력 👇🏻

1. 코드잇 최고
2. 코드잇 최고
3. 코드잇 최고
4. 코드잇 최고
5. 코드잇 최고
6. 코드잇 최고
7. 코드잇 최고
8. 코드잇 최고
9. 코드잇 최고
10. 코드잇 최고

✔️ 추가 동작 부분을 꼭 채울 필요는 없다.
→ 추가 동작 부분에서 i를 1씩 증가시키는 부분이 동작부분에 들어가도 문제 없다. 하지만 추가동작부분이 있기 때문에 동작부분에서는 실제로 반복하고자하는 내용들만 집중하고 어떤 조건과 관련된 부분은 이 소괄호에 집중하면서 좀 더 목적에 맞는 코드를 작성할 수 있게 된다.

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

✔️ 초기화 부분에서 생성한 변수는 for문의 로컬 변수이다.
→ for반복문의 초기화 부분에서 생성한 변수는 for문 안에서의 로컬 변수(지역 변수) 가 된다. for문 안에서 생성한 로컬 변수이기 때문에 for문이 종료되고 나서 for반복문 밖에서 변수를 사용하려고 하면 오류가 발생한다.

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

console.log(i); //Error!
```

✔️ 초기화 부분도 반드시 채울 필요는 없다.

```
let i = 1;

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

✔️ 초기화 부분에서 추가 동작 부분을 동시에 생략할 수 있을까 -> YES!

```
let  i = 0;
for (; i < 6 ; ) {
console.log(i);
i ++
}

//무한반복문 만들기
for(;;){
console.log(3);
}
```

📌 while문(반복문)

✔️ for문과 다르게 초기화부분이 없어서 반복문 밖에서 글로벌 변수를 선언해야 한다.
✔️ 조건부분이 false가 되면 반복문 종료( = 종료되려면 조건이 안맞아야한다.)
✔️ 조건부분과 맞게되면 값을 return한다.

while (조건부분){
 동작부분
}

✔️ for문과 while문의 차이점

let i = 30;

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

console.log(i);

⭐ while문은 반복문 밖에서 글로벌 변수를 가지고 조건을 평가하고 반복문 안에서도 변수를 다룬다. 반복문이 다 실행된 뒤에 반복문 밖에서도 변수를 사용한다. 사용빈도는 for문이 더 많고 for문은 조건비교에 사용되는 값을 반복문 내부(지역변수)로 사용한다.

📌 break와 continue

✔️ break : 반복문에서 활용하면 반복문의 조건부분과 상관없이 반복문이 실행되는 도중에 빠쟈 나올 수 있다. (반복문 전체를 빠져나온다.)
✔️ continue : 필요에 따라 동작부분을 한번 건너뛰는 것, continue 다음에 올 코드들은 실행되지 않고 다음 단계로 넘어간다.

break 예시 👇🏻

let i = 1;

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

→ 처음에 i가 1인 상태로 반복문 실행이 되는데 i를 출력하고 i를 증가시키기만하고 break를 만나면서 반복문을 빠져나온다. 그래서 1만 출력한다.

while문을 for문을 바꿔보기 👇🏻

let i = 1;

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

출력 👇🏻

1
2
3
4
5
6
7

while문 for문으로 변경 👇🏻

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

⭐⭐⭐⭐⭐⭐⭐순서 생각해보기!

1️⃣let i = 1;

2️⃣while ( i <= 10 ){ 
  3️⃣console.log(i);
  4️⃣if ( i === 7 ){ 
 5️⃣ break;
  }
 6️⃣ i ++ ;
}

1. let i = 1; / i라는 변수에 1값을 넣어줬어
2. while 반복문의 조건은 i ≤ 10 이거야
3. console.log(i) 가 일단 1을 콘솔에 찍어줘
4. if문을 만나서 조건을 또 만났어, i 가 7이녜 아니잖아 그럼 넘어가
5. i 가 7이 아니기 때문에 break도 넘어가
6. 그 다음 증감연산자를 만났기 때문에 i가 2가 돼, 이제 다시 2번으로 올라가, 반복해
7. 그러다가 i가 7이 됐어. 그러면 if문에서 조건이 맞았기 때문에 break에 의해서 바로 빠져나와. 그런데 그전에 이미 console.log(i)가 있기 때문에 7까지 찍히고 끝나는거야. while문이 반복문이라는 걸 잊지마

continue 예시

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

1. 변수 i 선언
2. 변수 i 가 조건 부분에서 평가되고 조건이 맞으면 동작부분을 수행한다.
3. if문의 조건을 확인한다.
   if문의 조건이 false인 것들을 건너뛴다.
4. 추가동작 부분으로 넘어간다.

출력 👇🏻

1
3
5
7
9

⭐⭐⭐⭐⭐⭐⭐순서 생각해보기!

for ( 1️⃣let i = 1; 2️⃣i <= 10; 3️⃣i++ ) {
  4️⃣if ( i % 2 === 0 ){
    5️⃣continue;
  }
 6️⃣ console.log(i);
}

1. for문이니까 변수 i 의 기본값은 1이야
2. 조건은 i가 10이하여야해
3. 추가동작할 것은 증감연산자여야해
4. 현재 i의 값은 1이야, 그러면 if문의 조건을 보면 i가 짝수이녜 아니잖아.
5. continue, i가 짝수가 아니니까 계속 동작해
6. console.log에 1을 찍어, 이제 다시 위로 올라가서 추가동작을 진행해
7. 그러면 i 가 2가 되잖아, if문의 조건이 2의 짝수녜 맞잖아 그러면 그다음 동작인 console.log(i)를 건너뛰어 , 계속 반복해

같은 예시 문 while문으로 변경하기👇🏻

let i = 1;

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

✔️ while문은 for문과 다르게 추가동작부분이 없다. continue가 실행되서 동작 부분을 건너뛰게 되면 바로 조건부분으로 넘어간다. 그래서 미리 i를 증가시켜준 것! 만약 i를 증가시켜주지 않으면 i가 2인채로 무한히 반복하는 코드가 된다.

✔️ 코드 이해해보기

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

출력 👇🏻

2
4
6
8
10
.
짝수만 출력
.
50

1. 변수 i 의 기본값은 1이야, i는 50이하의 값, 추가동작은 증감연산자
2. 아직 i는 1이야, 긍대 if에서 i가 홀수녜.. 맞잖아 그럼 건너뛰어
3. 그러면 다음 동작인 console.log를 건너뛰어, 그다음 증감연산자를 해줘 그럼 2잖아
4. 2가 나왔어, if에서 홀수녜 아니잖아 그럼 console.log를 찍어줘 다시 증감연산자를 해줘
5. 그렇다면 이 반복문은 짝수만 출력해주는 반복문이네