쉽게 배우는 컴퓨터 프로그래밍 자바스크립트 제어문 편

제어문이란?

제어문(Control Flow Statement)은 자신이 원하는 조건에 따라서
특정 코드를 실행하거나 반복할 때 사용합니다.

순차적으로 코드가 실행되는 일반적인 상황과 다르게
코드 실행 흐름(Flow)이 뒤죽박죽이 되기 때문에
코드를 복잡하게 만들 위험이 커지기 때문에
필시 숙달하여 조심히 사용해야 합니다.

블록문

블록문은 문을 중괄호{}로 묶은 것을 말합니다.
자바스크립트는 단독으로 사용할 수도 있지만
보통 제어문이나 반복문, 함수를 정의할 때 주로 사용합니다.

cf) 문(statement)이란 표현식(expression)의 상위집합입니다.
명령문이라고도 불리며
코드의 가장 기본적인 실행 단위입니다.

예시)
function foo(a, b){
Return a + b;
}

조건문

조건문은 조건식의 결과에 따라 블록문을 실행할지 말지를 결정하는 문입니다.
자바스크립트에는 2가지 조건문이 있는데,
If-else 문과 switch문입니다.

if - else 문

기본 형식은 다음과 같습니다.

if(조건식) {
	//if 조건식이 맞으면 이 블록문이 실행됩니다.
}
else if (조건식2) {
	//if 조건식이 틀리고, 조건식2가 맞으면 이 블록문이 실행됩니다.
}
…
else {
	//if 조건식이 거짓일 경우 이 블록문이 실행됩니다.
}

else if 문은 몇 개를 써도 상관없습니다.
이때 else if와 else 문은 옵션이므로
꼭 쓰지 않아도 상관없이 if 문만 써도 됩니다.

If else 문은 삼항 연산자와 비슷하지만
변수에 직접 대입할 수 없고,
가독성이 더 좋은 특징을 갖고 있습니다.

switch 문

switch 문은 주어진 표현식의 값을 가지는 case 문으로
실행 흐름(flow)을 이동시켜 다시 순차적으로 코드를 실행합니다.

각 case문은 표현식을 갖고 있으며
해당하는 값이 case에 없다면 default로 이동합니다.

//기본 문법
switch (표현식, a + 1 등등) {
	case 표현식1, 2, true 등등:
		switch문의 표현식에 해당할 경우 실행;
		break;
	case 표현식2:
		문;
		break;
	default:
		case가 없을 경우 실행
}


//실제 사용
var a = 1; // 여러 숫자를 넣어보자.
switch(a) {
	case 1:
		a = 0;
		break;
	case 2:
		a = 3;
	case 3:
		a = 2;
	case 4:
		a = 1;
	default:
		a = 8;
}
console.log(a)   // 0

주의할 것은 각 case에 해당하는 문들은 세미콜론(;)으로 끝나야 하며,
swtich는 실행흐름을 옮기기 때문에
Break; 가 없을 경우 밑의 case들이 차례대로 실행됩니다.

가령 위의 예시에서 var a = 2 나 3, 4, 5 등등으로 바꿀 경우
Case 2나 3, 4, default로 이동하여 그 밑의 문들이 모두 실행되므로
결과적으로 a = 8 이 나오게 됩니다.

If else 문은 주로 논리적으로 참인지 거짓인지가 중요하므로
If( a > b) 등의 표현식이 들어가는 반면에
Switch는 다양한 케이스에 해당하는 것이기 때문에 값이 주로 들어갑니다.

그리고 swtich의 경우 값을 예상할 수 있기 때문에
실행 트리에서 최적화가 되어 맞는 case를 찾는 것이
if 문이 여러 개 있을 때보다 빠를 수 있습니다.

둘 다 써보고 편한 곳에 맞게 쓰면 될 것 같습니다.

반복문

조건식의 평가 결과가 참인 이상 코드 블록을 실행합니다.
코드 블록이 끝나면, 조건식을 확인하여 참일 경우 다시 실행하고
거짓일 경우 종료합니다.

for 문

for 문은 다음과 같은 형태를 가집니다.

for (let i = 0; i < 10; i++) {
	// 반복할 문
}

//무한루프
for(;;){
	// 반복할 문
}

//이중루프
for(;;){
	for(;;){
	}
}

플로우는 다음과 같습니다.

1. let i = 0을 선언하고 할당합니다.
2. I < 10 조건식을 평가합니다. 참일 경우 블록을 실행합니다.
2-1. 거짓일 경우 블록을 종료하고 넘어갑니다.
3. 블록이 종료되고 나면 i++을 실행합니다.
4. 2번부터 3번을 반복합니다.

for 문은 몇 번이고 중복해서 쓸 수 있습니다.
가령 옛날에 알고리즘 문제 중 큐브를 푸는 게 있었는데,
10중 for문으로 푼 레전드가 한 명 있었습니다.

while문

while문은 if와 섞여있는 듯한 컨셉입니다.
while의 표현식이 참인 한에서 계속해서 반복 실행합니다.
for문과 유사하나 몇 번이나 돌아갈지 잘 모를 때 주로 사용합니다.(가독성 측면에서도 좋습니다.)

while(표현식){
	//반복될 문
}

//실제 사용
let a = 0;
let b = 10;

while(a < b){
	console.log(a);
	a++;
}
//0 ~ 9까지 출력됩니다.

//무한루프
while(true){
	//반복할 문
}

Do - while 문

do while문은 while문과 다르게 무조건 한 번 실행되는 do가 추가되었습니다.

let a=0;

do {
	a++;
}
while(a<1){
	console.log(‘실행안되는코드‘);
}

do는 조건이 없으므로 무조건 한 번 실행되므로
위 코드에서 do가 종료될 경우 a=1이 들어가 있는 상황이기 때문에
while(1 <1) 이 되어 while문이 실행되지 않습니다.

break문

break 문은 레이블 문과 반복문을 탈출할 때 쓰입니다.

레이블 문이란 swtich 문의 case 나 default처럼
레이블을 달아서 실행 순서를 바꿀 때 사용하는 문입니다.

//레이블 문
first: for (let i=0; i<10; i++){
	for (let j=0; j<10; j++){
		if (i===2) break first;
		console.log(i); // 0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1
	}
}


//반복문
for (let i=0; i<10; ++i){
	if (i===2) break;
	console.log(i) // 0, 1
}

for문이 중첩되어 있을 때 flag 등을 사용해서 탈출하기는 번거로우므로
레이블 문을 사용하고는 합니다만 그 외의 경우에는 가독성을 심각하게 해치므로
사용하지 않습니다.

Swtich문에서도 break는 쓰이지만, 그 외의 경우는 모두 반복문에 사용됩니다.

continue문

continue문은 그대로 진행하라는 뜻이 아니라
돌아가서 다시 진행하라는 뜻에 가깝습니다.

특정 상황에서 연산을 패스하고 싶을 경우 주로 사용합니다.

for (let i=0;i<5; i++){
	if (i === 3) continue;
	console.log(i); //0,1,2,4
}

I가 3이 될 때 if 문을 타고, continue 문을 발견했으므로 for문의 처음으로 돌아갑니다.
가독성에 굉장히 좋기 때문에 많이 사용하는 편입니다.

---

이 외에도 객체의 프로퍼티를 순회하는 for - in 문도 있고,
iterable을 순회하는 for - of 문도 있지만,
나중에 객체와 iterable을 포스팅한 후 적도록 하겠습니다.