가오리의 코딩일기

8장 제어문 본문

HTML+CSS+JavaScript/DeepDive

8장 제어문

류경혜 2022. 8. 1. 16:27

🔗 제어문(control flow statement)

→ 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용

→ 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어

→ forEach, map, filter, reduce 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려고 노력한다

 

 

 

 

💡 블록문(block/compound statement)

→ 0개 이상의 문을 중괄호로 묶는 것

→ 자바스크립트는 블록문을 하나의 실행 단위로 취급한다

→ 단독으로 사용할 수 있으나 일반적으로 제어문이나 함수를 정의 시 사용

→ 자체 종결성(문의 종료)을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다

 

 

 

 

💡 조건문(conditional statement)

조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다

→ 불리언 값으로 평가될 수 있는 표현식

 

 

🧩 if ~ else문

→ 주어진 조건식의 평가 결과(논리적 참과 거짓)에 따라 실행할 코드 블록을 결정한다

→ if문의 조건식이 불리언 값이 아닌 값으로 평가되면 암묵적으로 불리언 값으로 강제변환되어 코드 블록을 결정

→ 조건식을 추가하여 조건에 따라 실행될 코드 블록을 늘릴 때 else if문 사용

→ else if, else문은 옵션이고 if, else문은 2번 이상 사용할 수 없다

→ 만약 코드블록 내의 문이 하나뿐이라면 중괄호를 생략할 수 있다

→ 대부분의 if ~ else문은 삼항 조건 연산자로 바꿔 쓸 수 있다

→ 조건에 따라 실행할 내용이 단순하다면 삼항 조건 연산자를, 복잡하다면 if ~ else문을 사용하는 편이 가독성이 좋다

// if ~ else문
let x = 2;
let result;
if (x % 2){
	result = '홀수';
} else{
	result = '짝수';
}
console.log(result);
// 삼항 조건 연산자
let x = 2;
let result = x % 2 ? '홀수': '짝수';
console.log(result);

 

 

🧩 switch 문

→ 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다

→ case 문은 상황을 의미하는 표현식을 지정하고 콜론으로 마친다

→ switch문의 표현식과 일치하는 case문이 없다면 default문으로 이동한다

→ default 문은 선택사항, 사용할수도 사용하지 않을수도 있다

→ if ~ else문은 논리적 참과 거짓으로 실행할 코드 블록을 결정하지만 switch문은 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다

→ break문이 없다면 case문의 표현식과 일치하지 않더라도 실행 흐름이 다음 case문으로 연이어 이동한다

 

 

 

 

💡 반복문(loop statement)

→ 조건식의 평가 결과가 참인 경우 코드 블록을 실행하고 조건식이 거짓일 때까지 반복된다

→ forEach(), for…in, for…of 등 반복문을 대체할 수 있는 다양한 기능을 제공한다

→ 해당 장에서 살펴볼 예정이다

 

 

🧩 for 문

// for (변수 선언문(할당문); 조건식; 증감식){ 조건식이 참인 경우 반복 실행될 문; }
for (let i = 0; i < 5; i++){
	console.log(i);
}

→ 변수 선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없다

→ 어떤 식도 선언하지 않으면 무한루프가 된다

 

 

🧩 while 문

while(i < 5){
	console.log(i);
	i++
}

→ 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다

→ for문은 반복 횟수가 명확할 때 주로 사용하고 while문은 반복 횟수가 불명확할때 주로 사용한다

→ 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 논리적 참, 거짓을 구별한다

→ 무한루프에서 탈출하기 위해서는 코드 블록 내에 if문으로 탈출 조건을 만들고 break문으로 코드 블록을 탈출한다

 

 

🧩 do ~ while 문

do{
	console.log(i);
	i++;
} while(i < 5);

→ 코드 블록을 먼저 실행하고 조건식을 평가하기 때문에 코드 블록은 무조건 한 번 이상 실행된다

 

 

 

 

💡 break문

레이블 문, 반복문, switch문의 코드 블록을 탈출하고 다른 코드 블록에서 break문을 사용하면 SyntaxError 발생

→ 식별자가 붙은 문, 프로그램의 실행 순서를 제어하는데 사용한다

→ 레이블 문을 사용하면 프로그램의 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기 때문에 권장하지 않는다

 

 

 

 

💡continue문

→ 반복문의 코드 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다

→ break문처럼 반복문을 탈출하지 않는다

→ if문 내에서 실행해야 할 코드가 길다면 들여쓰기가 한 단계 더 깊어지므로 continue 문을 사용하는 편이 가독성이 더 좋다

// continue 문X
for (let i = 0; i < string.length; i++){
	if (string[i] === search) {
		count++;
		// code
		// code
		}
}
// continue 문O
for (let i = 0; i < string.length; i++){
	if (string[i] !== serarch) continue;
	count ++;
	// code
	// code
}

 

🔗 코어 자바스크립트: while과 for 반복문

https://ryu-ddo.tistory.com/409

🔗 코어 자바스크립트: switch문

https://ryu-ddo.tistory.com/410

🔗 코어 자바스크립트: if와 '?'를 사용한 조건 처리

https://ryu-ddo.tistory.com/411