제어문

귤양·2021년 4월 23일

JavaScript for문 if...else문 if문 js switch문 while문 자바스크립트 제어문

Javascript

목록 보기

4/10

아래 내용은 학원 수업과 "모던자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다.

1. 제어문이란?

제어문이란 정해진 조건의 결과(true/false)에 따라서 실행될 코드를 선택하거나, 반복해야 할 때 사용한다.
이 제어문은 크게 조건문과 반복문으로 나눌수 있고, 조건문은 if...else문과 switch문, 그리고 반복문은 for문과 while문이 있다.

1-1. 조건문

조건문은 특정 조건을 주고 그 조건이 만족하면 해당하는 코드를 실행하도록 할 수 있다. 이 조건문은 위에서 말했던과 같이 if...else문과 switch문만 존재했으나 이후 3항 연산식이 추가되었다. (3항 연산식은 연산자에서 언급하였으므로 제어문에서 따로 언급하지는 않는다. )

if…else 문

// if...else문의 기본 문법

if (조건식) {
	if의 조건이 true일 경우 실행될 문
} else {
	if의 조건이 false일 경우 실행될 문
}

if...else문의 기본 형태는 위와 같으며, 조건식의 값이 true 혹은 false로 평가되어야 한다.
또한, if...else문은 else 뒤에 if를 달아서 확장이 가능하며, else if는 여러번 사용할 수 있다. 다만 else if문으로 조건을 추가하면 추가할수록 가독성이 떨어지는 단점이 있기 때문에 주의해야 한다.
if가 하나만 있는 기본 if문은 삼항 연산식으로 대신할 수 있고, 이 편이 가독성이 더 좋다.

switch 문

// switch 문의 기본 문법

switch(표현식) {
	case 표현식1 :
    	switch문의 표현식의 값이 표현식1과 일치할 때 실행할 문
    	break;
    case 표현식2 :
    	switch문의 표현식의 값이 표현식2과 일치할 때 실행할 문
    	break;
    default :
    	해당되는 표현식이 없을 경우 실행될 문
}

위의 if...else문은 조건의 결과가 true인지 false인지 확인하여 해당하는 블록문을 실행한다. 하지만, switch는 switch에서 작성한 표현식의 값을 case에 작성된 각 값과 비교하고, 일치하는 경우 해당하는 문을 실행한다. 따라서 switch의 표현식의 값은 문자열이거나 숫자값인 경우가 많다.

폴스루 (fall through)

const memberName = '채령';
let girlGroup;

switch (memberName) {
  case '채령':
    girlGroup = `${memberName}은 ITZY입니다.`;
  case '나연':
    girlGroup = `${memberName}은 트와이스입니다.`;
  case '아이린':
    girlGroup = `${memberName}은 레드벨벳입니다.`;
  default:
    girlGroup = `${memberName}은 소속된 그룹이 없습니다.`;
}

console.log(girlGroup); // 채령은 소속된 그룹이 없습니다.

위의 코드는 console에 '채령은 ITZY입니다.'가 출력될 것을 기대하고 작성한 코드이다. 하지만 실제 console에는 '채령은 소속된 그룹이 없습니다.'라고 뜨게 된다.
이 현상은 case에 break가 없을 때 일어나는 폴스루 라는 현상이다. 해당하는 case의 문을 실행한뒤에는 아래에 있는 다른 case를 실행하지 않고 switch 문을 탈출해야한다. 하지만, case에서 break가 없어서 switch문을 탈출하지 않고, 해당하는 case 이후에 오는 모든 case의 문과 default까지 실행하여 결과를 보여주기 때문에 일어나는 현상이다. 때문에 case의 안에는 반드시 break를 작성해야 한다는 것을 기억해야한다.

1-2. 반복문

반복문은 조건식의 결과가 true라면 {} : 코드블록안에 작성한 코드를 실행하고, 다시 조건식을 확인하여 결과가 false가 되기 전까지 계속 반복하게 된다.

for 문

//  기본문법 
for (변수 선언문 또는 할당문; 조건식 ; 증감식) {
	조건식이 true일 경우 실행될 문;
}

for문은 반복문중에서도 많이 사용되고, 매우 중요하다. 이후에는 forEach, for...in, for...of문 등으로 대체 할 수 있지만, for문의 기본 동작을 이해하지 못한다면 위 메소드들을 사용하기 힘들게 되므로, 반드시 제대로 이해하고 있어야 한다.

while 문

// 기본문법
var count = 0;
while (count < 3) {
	console.log(count); // 0 1 2
    count++;
    if (count ===3) break;
}

while문은 사용할 때 주의를 요한다. while문은 조건식의 결과가 거짓이 되어야 코드 블록을 실행하지 않고 종료한다. 그런데 조건식의 평가 결과가 true로만 평가가 된다면 무한루프에 빠지게 되는것이다. 때문에 코드 블록 내에서 코드 블록을 탈출할 수 있는 탈출 조건을 if문을 사용하여 작성하고 break문으로 코드 블록을 탈출할 수 있도록 해야 한다.