📚 스터디 명 : 모던할-수-있는거-맞는거니
📅 스터디 5주차 :
2023 / 12 / 07 (목) PM 5:00 ~ 6:00
📖4주차 스터디 목표 범위 :
모던자바스크립트 Deep Dive
08장 제어문 (page.93 ~ page.107)
👨🏻‍💻 진행 순서 :
스터디 그룹원들(총4명)과 모던 자바스크립트를 한 주간 읽고,
학습한 내용 정리 글 1~2분간 발표 진행

👨🏻‍💻 학습 내용

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나
반복 실행(반복문)할 때 사용한다.
제어문에는 대표적으로
조건문 : if..else , else if / switch
반복문 : for / while
break문 , continue 문이 있다.
일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다.
그러나 제어문을 활용한다면 코드의 실행 흐름을 인위적으로 제어할 수 있다.
하지만 코드의 실행 순서가 변경된다는 것은 단순히 위에서 아래로 순차적으로 진행하는 직관적인 코드의 흐름을 혼란스럽게 만들고 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다.
이런 단점을 보완해줄 forEach , map ,filter,reduce같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려고 노력한다.

📌 조건문

if..else

<script>
if (조건식1){
//조건식1이 true라면 코드 블록 실행
}else{
//조건식1이 거짓이면 else 코드 블록 실행
}
</script>

if...else문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

<script>
// if...else문
let x = 2;
let result;

if(x % 2){
 result = '홀수';
}else{
 result = '짝수';
}

console.log(result);

// 삼항 조건 연산자
// 조건식 ? '조건식이 true라면 이 값을 출력' : '조건식이 false라면 이 값을 출력';
let x = 2;

let result = x % 2 ? '홀수' : '짝수';
console.log(result);
</script>

2 를 2로 나누었을 때 나머지 결과 값은 0이다.
0은 false로 암묵적 강제 변환된다.
0은 짝수에 포함된다.
그러므로 문자열 값 짝수를 반환해준다.
만약 경우의 수가 세가지라면 아래 예제코드 처럼 작성을 할 수 있습니다.

<script>
let x = 2 ;
let result = x ? (x % 2 ? '홀수' : '짝수'):'숫자아님';
console.log(result);// 짝수
</script>

삼항조건연산자는 문이 아닌 표현식이기 때문에 변수에 삼항조건연산자를 할당 할수 있다.
조건에 따라 단순히 값을 결정하여 변수에 할당 하는 경우 가독성이 좋은 삼항 조건 연산자를 사용한다.
하지만 여러 줄의 문이 필요하다면 if..else를 사용하는 편이 가독성이 좋다고 한다.

else if

<script>
if (조건식1){
//조건식1이 true라면 if 코드 블록 실행
}else if(조건식2){
//조건식1이 false고 조건식2가 true라면 else if 코드 블록 실행
}else {
// 조건식1, 조건식2 둘다 거짓이라면 else 코드 블록 실행
}
</script>

💡else if문과 else문은 옵션이다. 즉 , 사용할 수도 있고 사용하지 않아도 된다. if문과 else문은 2번 이상 사용할 수 없고 else if문은 여러 번 사용이 가능하다.
만약 코드 블록 내의 문이 하나뿐이라면 중괄호를 생략 할 수 있다.

<script>
if (조건식1) //조건식1이 true라면 if 코드 블록 실행;
else if(조건식2) //조건식1이 false고 조건식2가 true라면 else if 코드 블록 실행;
else  // 조건식1, 조건식2 둘다 거짓이라면 else 코드 블록 실행;
</script>

switch

<script>
switch (표현식){
case 표현식1:
switch 문의 표현식과 포현식1이 일치하면 실행될 문;
break;
case 표현식2:
switch 문의 표현식과 포현식2가 일치하면 실행될 문;
break;
default:
switch 문의 표현식과 일치하는 case가 없을 때 실행될 문;
}
</script>

if...else문은 논리적 참,거짓으로 실행할 코드 블록을 결정할 때 사용한다면
switch문은 참,거짓보다 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.
주의할점은 switch문은 break문을 사용하지않으면 폴스루라는 현상이 발생한다. 폴스루란 표현식과 맞는 case를 찾았다고 하지만 break문을 사용하지 않으면
break문을 찾을 때 까지 값을 재 할당한다고한다.
폴스루 현상을 방지하려면 위 예제 코드처럼 case 다음에 꼭 break문을 선언해줘야한다.

조건이 너무 많은 경우 if...else보다 switch문을 사용하는편이 좋다.

📌 반복문

반복문은 조건식의 평가 결과가 true인 경우 코드 블록을 실행한다.
조건식이 false가 될 때 까지 조건식을 다시 평가하여 계속해서 true인 경우 코드 블록을 실행한다.
반복문은 for , while , do..while문을 제공한다.

for

for문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.
for문의 실행 순서를 정확히 이해하는것이 중요하다.

<script>
  for (시작; 조건문; 증감문){
   문장
  }
 </script>    

for 문 내에 for 문을 중첩해 사용할 수 있다. 이를 중첩for문이라고 한다.

<script>
  for (시작; 조건문; 증감문){
   for (시작; 조건문; 증감문){
    문장
   }
  }
 </script>

while

while문은 주어진 조건식의 평가 결과가 true면 코드 블록을 계속해서 반복 실행한다.
for문은 횟수가 명확할 때 주로 사용하고 while문은 반복 횟수가 불명확할 때 주로 사용한다.
while문은 조건문의 평가 결과가 거짓이 되면 코드 블록을 실행하지 않고 종료한다.
만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 논리적 참,거짓을 구별한다.
조건식의 평가 결과가 언제나 참이면 무한루프가 발생하므로 break문을 선언해줘야한다.

<script>
let i = 0;
while (i < 3) { // 0, 1, 2 출력
 console.log(i);
  i++;
}
</script>

do...while

do...while문은 코드 블록을 먼저 실행하고 조건식을 평가한다
따라서 코드 블록은 무조건 최소한 한 번 이상 실행하고싶을 때 do...while문을 활용한다.

<script>
var i = 0;
do {
  alert(i);
  i++;
} while (i < 10)
/*do..while 문법은 조건이 truthy 인지 아닌지에 상관없이, 
본문을 최소한 한 번이라도 실행하고 싶을 때만 사용해야 한다. 
대다수의 상황에선 do..while보다 while(…) {…}이 적합하다.*/
</script>

📌 break문과 continue문

switch문과 같이 while문 안에도 break;를 반복문을 넣으면 중단할 수 있다.

<script>
var i = 0;
while (i < 10) {
  if (i > 5) {
    break;
  }
  alert(i);
  i++;
}
</script>

0부터 9까지 alert해야하는데 5까지만 alert하고 중단된다.

다음은 break과 비슷한 것으로 continue가 있다.

<script>
var i = 0;
while (i < 10) {
  i++;
  if (i % 2 === 0) {
    continue;
  }
  alert(i);
}
</script>

반복문을 끝까지 돌기는 하지만, continue가 있으면 그 아랫부분은 실행하지 않고 다음 반복문으로 넘어간다. continue는 반복문의 공통된 수행 작업에서 예외를 두고 싶을 때 사용하면 좋다.

💡 5주차 느낀점 3가지

"React 책을 구매 했는데 JS의 필요성을 많이 느꼈다. "
"이번주 토요일부터 팀 프로젝트를 진행하는데 많이 부족한 상태인것 같아 큰일이다."
"모던자바스크립트 전체 대략 900페이지 이상인데 이제 9분의1을 읽었다..
스터디 진행 전 날에만 정해진 범위 내용만 읽고있었다.개인적으로 더 읽어보고 복습 느낌으로 스터디를 진행해야겠다."