모던 자바스크립트 - 제어문

1. 제어문이란? : 조건문 또는 반복문을 뜻한다. 코드의 실행순서를 인위적으로 조종하기 때문에 코드의 가독성을 떨어트릴 수 있기 때문에 map, filter 같은 고차함수로 대체하는 것이 좋다.

2. 블록문이란? : 0개 이상의 문장을 중괄호로 묶은 것으로 자바스크립트의 실행단위이다. 예를 들어 조건에 따라서 코드 블록 전체가 실행될 수도 있고 실행되지 않을 수도 있다는 것이다. 블록문의 뒤에는 세미콜론을 붙이지 않는다.

let i = 1;

//블록문은 이처럼 함수거나
const function = () => {
	return 100;
}

// 제어문에서 일반적으로 사용됩니다.
if (i === 1) {
	console.log('1입니다.')
}

3. 조건문: 조건식의 결과에 따라 블록문을 실행 여부를 판단한다. 크게 if ...else if ... else와 switch문으로 구분된다.

3-1. if ... else if ... else 

// 이런 조건문이 있다면 else문이 실행된다.
// if와 else if, else 에는 조건식이 와야한다(boolean으로 판단할 수 있는 값)
// else if 문은 여러번 사용 가능하다.

const a = 2;
const b = '반원재';

if (a === 1) {
	console.log('a는 1입니다.');
} else if (b === '이규리') {
	console.log('b는 이규리입니다.');
} else {
	console.log('a는 1이 아니고 b는 이규리가 아닙니다.');
}

// 아래처럼 블록문 안에 문장이 하나면 중괄호 생략이 가능하다.

if (a === 1) 
	console.log('a는 1입니다.');
else if (b === '이규리') 
	console.log('b는 이규리입니다.');
else 
	console.log('a는 1이 아니고 b는 이규리가 아닙니다.');
    

// if else문은 삼항 연산자로 대체가 가능하다.삼항연산자는 바로 값을 할당이 가능하다.
const result = a === 1 ? 'a는 1입니다.' : 'a는 1이 아닙니다.';
console.log(a)

 

중첩 삼항연산자는 해석이 난해하기 때문에 추천하지 않는다. 

간단한 조건문이라면 삼항연산자를 추천하지만 복잡한 조건문인 경우(나의 경우 조건문이 2개 이상인 경우) if... else if... else 문을 사용하는 것을 추천한다. 

 

3-2. switch문

switch문의 표현식(아래의 a부분)은 불리언 값보다는 문자열이나 숫자인 경우가 많다. 위의 if ... else문의 경우에는 논리적 참, 거짓에 대한 표현이 많다.

break문을 안써주면 중간에 정답 부분에서 탈출하지 않고 default 끝까지 실행되버린다. 이를 '폴 스루' 라고 한다. default문은 어차피 마지막이니깐 break 생략해도 좋다.

switch문은 조건이 너무 많아서 (나의 경우 4개 정도 이상부터) if ... else 가 복잡해질 우려가 있을 때 사용하는 것이 좋다.

const a = '반원재';

switch (a) {
	case '이규리':
    	console.log('a는 이규리입니다.')
        // break로 반드시 탈출시켜줘야한다.
        break;
    case '반원재':
    	console.log('a는 반원재입니다.')
        break;
    default: 
    	console.log('a는 이규리도 아니고 반원재도 아닙니다.')
}

 

4. 반복문이란? : 조건식의 평가 결과가 참이면 블록문을 실행한다. 조건식이 거짓이 되면 블록문을 중지한다.

4-1. for문: 반복횟수가 명확할 때 주로 사용.

for (let i = 0; i < 2; i++) {
	console.log(i);
}

1: let i = 0이 먼저 선언된다.
2. i가 2보다 작은지 확인한다.

  2-1. i가 2보다 작으면 블록문을 실행한다.

  2-2. i가 2보다 작지 않으면 반복문을 종료한다. -> 종결 지점.

3. i의 값을 1 증가시킨다. -> 반복문을 벗어나게 해주는 증감식.

4. 2번 과정으로 돌아간다.

 

// 선언문, 조건식, 증감식 전부 옵션이라 생략 가능하나 무한 루프가 발생한다.

for(;;) { ... }

 

이중 for문도 가능하다.

 

for (let i = 0; i < 2; i++) {
	for (let j = 0; j < 2; j++) {
    	console.log(i, j);
    }
}

1: let i = 0이 먼저 선언된다.
2. i가 2보다 작은지 확인한다.

  2-1. i가 2보다 작으면 안쪽 for문을 실행한다. -> 아래의 안쪽 for문 실행순서 실행 후 3번으로 복귀.

  2-2. i가 2보다 작지 않으면 반복문을 종료한다. -> 가장 바깥 for문 종결 지점.

3. i의 값을 1 증가시킨다. -> 가장 바깥 for문을 벗어나게 해주는 증감식.

4. 2번 과정으로 돌아간다.

 

 

안쪽 for문 실행순서

1: let j = 0이 먼저 선언된다.
2. j가 2보다 작은지 확인한다.

  2-1. j가 2보다 작으면 블록문을 실행한다.

  2-2. j가 2보다 작지 않으면 반복문을 종료한다. -> 반복문 종결 지점.

3. j의 값을 1 증가시킨다. -> 반복문을 벗어나게 해주는 증감식.

4. 2번 과정으로 돌아간다.

 

4-2. while문: 조건식의 평가 결과가 참이면 블록문 계속 반복 실행. 주로 반복 횟수가 불명확할 때 사용. 나의 경우 for문이 너무 복잡해질 것 같을 때 사용한다.

 

const a = 1

while(a < 3) {
	console.log(a);
    a++;
}

 

만약 a++이 없다면 항상 조건식을 만족하기 때문에 무한 루프를 돌게 된다. -> 탈출할 증감식이나 조건을 while문 안에 만들어줘야함.

 

4-3. do... while문

무조건 한번은 블록문을 실행하고 조건식에 따라서 행동을 시작함. 아래 예시에서 a는 3 보다 작지 않지만 무조건 console문은 한번은 실행된다. 업무에서 사용한 경우 한번도 못봤다.

 

const a = 3;

do {
	console.log(a)
} while(a < 3);

 

5. break는 레이블문, 블록문을 탈출할 떄 사용한다. 그 이외의 경우에 사용하면 syntax error가 발생한다.

레이블 문은 식별자가 붙은 문을 뜻한다. 아래는 example이라는 식별자가 붙은 블록문.

example: {
	console.log('히히');
    break example;
    console.log('이거 안나올 듯');
}

 

주로 중첩 for문 탈출할 떄 유용하다. 업무에서 몇번 봤다.

outer: for (let i = 0; i < 2; i++) {
	for (let j = 0; j < 2; j++) {
    	console.log(i, j);
        break outer;
    }
}

이러면 안쪽 for문을 실행 한번하고 바로 바깥쪽 for문을 탈출해버려 이중 for문을 즉시 끝내버릴 수 있다. 다만 이런 식으로 이중 for문 탈출할 떄를 제외하고는 가독성이 떨어지므로 사용을 자제하자.

 

6. continue문

블록문 실행을 더이상 진행하지 않고 바로 반복문의 증감식으로 넘어갈 때 사용한다. 탈출이 아니라 증감식으로 바로 넘어가는 것. 아래 예시에서 j 가 0일 떄는 console.log를 실행하지 않는다.

for (let i = 0; i < 2; i++) {
	for (let j = 0; j < 2; j++) {
    	if (j === 0) continue;
    	console.log(i, j);
    }
}

if문 내에서 실행할 코드가 많을 때 continue를 사용하면 가독성이 좋아진다.