TIL 20 | JS(제어문)

모던자바스크립트 Deep Dive에서 발췌한 제어문에 대한 내용을 적어보자

공부 후에도 이해가 잘 가지 않는 부분 발생!!
1)경우의 수가 세 가지일 때 삼항연산자로 표현하는 방법
2)다중for문이 동작하는 순서, console.log([${i}, ${j}])의 의미
3)continue문의 동작 순서

한 바퀴 돌고나면 이해될 수도 있으니 그 때 다시 보기로 결정

제어문

  • 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용
  • 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있음
  • 제어문의 종류
    1. 블록문
    2. 조건문 : if..else, switch
    3. 반복문 : for문, while문
    4. break문
    5. continue문

블록문(=코드불록, 블록)

  • 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부름
  • 자바스크립트는 블록문을 하나의 실행 단위로 취급 : 블록문 끝에 세미콜론을 붙이지 않음(블록문은 문의 종료를 의미하는 자체종결성을 가짐)
  • 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용
  • 블록문 활용 예제
1. 블록문
{
var foo = 10;
}

2. 제어문
var x = 1;
if(x < 10) {
 x++;
 }
 
3. 함수 선언문
function sum(a, b) {
   return a + b;
  }

조건문

  • 조건문은 주어진 조건식의 평가결과(참/거짓)에 따라 코드블록(블록문)의 실행을 결정
  • 조건식은 Boolean 값으로 평가될 수 있는 표현식
  • JS 엔진은 if...else문과 switch문 두 가지 조건문을 제공

if... else 문

  • if... else문은 주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가결과에 따라 실행할 코드블록을 결정
  • 조건식의 평가 결과가 true인 경우 if문의 코드 블록이 실행되고 false일 경우 else문의 코드블록이 실행
  • 만일 if문의 조건식이 Boolean 값이 아닌 값으로 평가되면 JS 엔진에 의해 암묵적으로 Boolean 값으로 강제변환되어서 실행할 코드블록을 결정
1. 조건식이 1개인 경우

if(조건식) {
 // 조건식이 참이면 이 코드 블록이 실행된다
} else {
 // 조건식이 거짓이면 이 코드 블록이 실행된다
}

2. 조건식이 2개인 경우

if(조건식1) {
 // 조건식1이 참이면 이 코드 블록이 실행된다
} else if(조건식2){
 // 조건식2가 참이면 이 코드 블록이 실행된다
} else {
 // 조건식1과 조건식 2가 모두 거짓이면 이 코드 블록이 실행된다.
}
  • else if 문과 else 문은 옵션이어서 사용할 수도 있고 사용하지 않을 수도 있음
   var num = 0;
   var kind;

   if(num > 0) {
   kind = '양수';
   } else if(num < 0) {
    kind='음수' ; 
   } else {
    kind='0'; 
   }

  console.log(kind);
  
  콘솔 출력 값 : 0
  
  • 대부분의 if...else문은 삼항 조건 연산자로 바꿔 쓸 수 있음
  • 삼항조건연산자는 값으로 평가되는 표현식을 만들기 때문에 변수에 할당이 가능하지만, if문은 값으로 평가되지 않는 문이기 때문에 변수에 할당이 되지 않는다
var x = 2;
var result;

// 2 % 2는 0이다. 이때 0은 false로 암묵적 강제 변환된다

if (x % 2) { 
	result = '홀수';
 } else {
 	result = '짝수';
 }
 
 console.log(result); // 짝수
  • 위의 예제 삼항 조건 연산자로 바꿔보기
var x = 2;

var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 출력 : 짝수
  • 경우의 수가 세 가지('양수', '음수', '영')이라면
var num = 2;
var kind = num ? (num > 0 ? '양수' : '음수') : '영';

console.log(kind); // 출력 : 양수
  • 코드블록 내의 문이 하나 뿐인 경우 중괄호 { }는 생략이 가능하다
if(x > 0) console.log(result = '정수');

switch 문

  • switch 문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행흐름을 옮김
  • case 문은 상황을 의미하는 표현식을 지정하고 콜론으로 마침
  • switch 문의 표현식과 일치하는 case 문이 없다면 실행순서는 default 문으로 이동한다 > default문은 선택사항이다
switch(표현식) {
	case 표현식1:
      switch문의 표현식과 표현식1이 일치하면 실행될 문;
      break;
	case 표현식2:
      switch문의 표현식과 표현식2기 일치하면 실행될 문;    
      break;
    default:
      switch문의 표현식과 일치하는 case문이 없을 때 실행될 문;
   }
   
  • 폴스루 : break문이 없으면 switch의 표현식과 일치하는 case의 표현식을 만나더라도 switch문을 탈출하지 않고, 이후의 모든 case문과 default문을 실행
  • case의 표현식이 같을 경우, 여러 개의 case를 묶어서 사용할 수도 있음
var year = 2000;
var month = 2;
var days = 0;

switch (month){
	case 1 : case 3 : case 5 : case 7 : case 8 : case 10 : case 12 : 
    days = 31;
    break;
    .... 이런 식으로...
    

반복문

  • 조건식의 평가결과가 참인 경우 코드블록을 실행. 그 후, 조건식을 다시 평가하여 여전히 참인 경우 코드블록을 다시 실행 > 조건식이 거짓일 때까지 반복
    - 반복문을 대체할 수 있는 다양한 기능 : JS는 배열을 순회할 때 사용하는 forEach 메서드, 객체의 property를 열거할 때 사용하는 for...in문 등 반복문을 대체할 수 있는 다양한 기능을 제공함

for 문

  • for문은 조건식이 거짓으로 평가될 때까지 코드블록을 반복실행하는 문
  • 형태 :
    for(변수 선언문 또는 할당문 ; 조건식 ; 증감식){
    조건식이 참인 경우 실행될 문;
    }
  • 예제
for( var i = 0; i < 2; i++) {
	console.log(i);
    }

출력 : 0 
	  1
  • 무한루프 형태 : 변수 선언문, 조건식, 증감식 모두 option > 아무 것도 선언하지 않으면 무한루프가 된다
  • 중첩for문 : for문 내에 for문을 중첩해서 사용한 경우
  • 예제 : 두 개의 주사위를 던졌을 때, 두 눈의 합이 6이 되는 모든 경우의 수를 출력
for(var i=1; i >=6; i++){
	for(var j=1; j >=6; j++){
  if(i+j===6) console.log(`[${i}, ${j}]`);
  }

출력
[1, 5]
[2, 4]
[3, 3]
[4, 2]
[5, 1]

while 문

  • 주어진 조건식의 결과가 참이면 코드블록을 반복실행 > for문은 반복의 횟수가 명확할 때 주로 사용하며 while문은 반복의 횟수가 불명확할 때 사용
  • while문은 조건식의 평가결과가 거짓이 되면 코드블록을 실행하지 않고 종료
var count = 0;

while (count < 3) {
	console.log(count);
    count++;
  }
 
  • 무한루프 : 조건식의 결과가 언제나 참이면 무한루프가 됨
  • while문의 코드블록 안에 if문으로 탈출조건을 만들고 break문으로 코드블록을 탈출하도록 할 수도 있음
var count = 0;

while(count < 3) {
	console.log(count);
    count++;
if(count === 3) break;
  }

do... while 문

  • do...while문은 코드블록이 먼저 실행되고 조건식을 평가하기 때문에 코드블록이 무조건 한 번 이상은 실행된다
  • 예제
var count = 0;
do {
   console.log(count);
   count++;
  } while(count < 3);
   

break 문

  • break문은 코드블록을 탈출한다(레이블문, 반복문, switch문의 코드블록을 탈출
  • 이외에 break문 사용하면 SyntaxError(문법에러) 발생시킴
if(true) {
	break;
   }  

continue 문

  • coutinue문은 반복문의 코드블록 실행을 현 지점에서 중단 > 반복문의 증감식으로 실행문을 이동시킴
  • 예제
var string = 'Hello World.';
var search = 'l';
var count = 0;

for (var i = 0; i < string.length; i++);
	if (string[i] !== search) continue;
    count++;
    }

console.log(count) // 3

좋은 웹페이지 즐겨찾기