제어문의 개념
- 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.
- 코드는 위에서 아래 방향으로 순차적으로 실행되는데 제어문을 사용해 코드의 실행 흐름을 인위적으로 제어할 수 있다.
하지만! 코드의 실행 순서가 변경되는 것은 단순히 위에서 아래로 순차적이고 직관적인 코드의 흐름을 혼란스럽게 만든다.
따라서, 가독성을 해치는 단점이있다! 우리는 제어문을 올바르게 이해하고 사용해야한다!
블록문
- 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록, 또는 블록이라고 부른다.
- 자바스크립트는 블록문을 하나의 실행 단위로 취급한다.
- 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다.
//블록문
{
var
}
//제어문
var x = 1;
if(x < 10){
x++;
}
// 함수 선언문
function sum(a,b){
return a + b;
}
블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문 끝에는 세미콜론을 붙이지 않는다.
조건문
- 주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다.
- 불리언 값으로 평가될 수 있는 표현식이다.
- if... else문과 switch문으로 두 가지 조건문을 제공한다.
if...else 문
- 주어진 조건식의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다.
- 조건식의 평가 결과가 true일 경우 if 문의 코드 블록이 실행되고 false일 경우 else문의 코드 불록이 실행된다.
if(조건식){
//조건식이 참이면 이 코드 블록이 실행된다.
}else{
//조건식이 거짓이면 이 코드 블록이 실행된다.
}- 조건식을 추가하여 조건에 따라 실행될 코드 블록을 늘리고 싶으면 else if문을 사용한다.
if(조건식1){
//조건식1이 참이면 이 코드 블록이 실행된다.
}else if(조건식2){
//조건식2가 거짓이면 이 코드 블록이 실행된다.
}else{
// 조건식1과 조건식2가 모두 거짓이면 이 코드 블록이 실행된다.
}- else if와 else문은 옵션이다. 즉, 사용할 수도 있고 사용하지 않을 수도 있다. if문과 else문은 2번이상 사용할 수 없지만 else if는 여러번 사용할 수 있다.
- 만약 코드블록 내의 문이 하나라면 중괄호를 생략해도 된다.
var num = 2;
var kind;
if(num > 0) kind = '양수';
else if(num < 0) kind = '음수';
else kind ='영';
console.log(kind); //양수- 대부분의 if...else문은 삼항 조건 연산자로 바꿔 쓸 수 있따.
var x = 2;
var result;
if(x%2){
result = '홀수';
}else
result = '짝수';
}
//삼항연산자
var result = x%2 ? '홀수' : '짝수';
//3가지의 조건 삼항연산자
var kind = num ? (num > 0 ? '양수' : '음수') : '영';조건에 따라 실행해야 할 내용이 복잡하여 여러 줄의 문이 필요하다면 if...else문을 사용하는 편이 가독성이 좋다.
switch 문
- 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮긴다.
- case문은 상황을 의미하는 표현식을 지정하고 콜론으로 마친다. 그 뒤에 실행할 문들을 위치시킨다.
- switch문의 표현식과 일치하는 case문이 없다면 실행 순서는 default문으로 이동한다. default문은 선택사항이다!
switch(표현식){
case 표현식 1:
//switch 문의 표현식과 표현식1이 일치하면 실행될 문;
break;
case 표현식 2:
//switch 문의 표현식과 표현식2이 일치하면 실행될 문;
break;
default:
//switch 문의 표현식과 일치하는 case 문이 없을 때 실행될 문;- if else문의 조건식은 불리언 값으로 평가되어야 하지만 switch문의 표현식은 불리언 값보다는 문자열이나 숫자 값인 경우가 많다.
- if...else문은 논리적으로 참, 거짓으로 실행할 코드 블록을 결정하고 switch문은 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할때 사용한다.
var num = 1;
var numName;
switch(num){
case 1: numName = '하나';
case 2: numName = '둘';
case 3: numName = '셋';
default: numName = '없음';
}
console.log(numName); //없음
- 위의 예시에서는 '하나'라는 값이 나와야 하지만 '없음'이라는 값이 출력된다. 이는 switch문의 표현식의 평가 결과와 일치하는 case문으로 실행 흐름이 이동하여 case1의 문을 실행한 것은 맞지만 문을 실행한 후 switch문을 탈출하지않고 switch의 모든 문이 끝날때까지 전부 실행했기에 마지막에 있는 default가 가장 마지막으로 실행되어 해당하는 값이 출력된것!
- 이것은 폴 스루라한다.(fall through) 즉, numName변수에 '하나'가 할당된 후 switch문을 탈출하지 않고 이어 '둘'이 재할당, 이후 '셋', 마지막으로 '없음'이 재할당되어 끝난것이다.
- 이러한 문제가 발생하는것은 break문을 사용하지 않았기때문!
break사용
var num = 1;
var numName;
switch(num){
case 1: numName = '하나';
break;
case 2: numName = '둘';
break;
case 3: numName = '셋';
break;
default: numName = '없음';
}
console.log(numName); //하나- default에는 별도의 break문이 필요없다. default문의 실행이 종료되면 알아서 switch문을 빠져나가기 때문이다.
- 폴 스루가 유용한 경우도 있다. 여러개의 case문을 하나의 조건으로 사용할 때 좋다.
- 만약 if...else문으로 해결할 수 있다면 switch문보다 if...else문을 사용하는 편이 좋다.
반복문
- 반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다.
- 반복문의 종류에는 for 문, while 문, do...while 문을 제공한다.
반복문을 대체할 수 있는 다양한 기능도 있다.
배열을 순회할 때 사용하는 forEach메서드, 객체의 프로퍼티를 열거할 때 사용하는 for...in 문, ES6에서 도입된 이터러블을 순회할 수 있는 for...of문과 같이 반복문을 대체할 수 있는 다양한 기능을 제공한다.
for문
- 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.
for (변수 선언문 또는 할당문; 조건식; 증감식){
조건식이 참인 경우 반복 실행될 문;
}- for문은 굉장히 중요하므로 확실하게 이해해야한다!
for(var i = 0; i < 2; i++){
console.log(i);
}
// 0
// 1- for문은 i 변수(반복을 의미하는 iteration의 i를 사용하는 것이 일반적)가 0으로 초기화된 상태에서 시작하여 i가2보다 작을 때까지 코드 블록을 2번 반복 실행한다.
//역반복 for문
for(var i = 1; i >= 0; i--){
console.log(i);
}
//1
//0
//무한 루프
for(;;){}
//for문의 변수 선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없다!
//어떤 식도 선언하지 않으면 무한루프가 된다.
//중첩 for문
//for문 내에 for문을 중첩해서 사용할 수 있다.
for(var i = 0; i < 2; i++){
for(var i = 0; i < 2; i++){
if(i+j === 6) console.log(`[${i}, ${j}]`);
}
}
// [1,5]
// [2,4]
// [3,3]
// [4,2]
// [5,1]while문
- 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.
- 조건문의 평가 결과가 거짓이 되면 코드 블록을 실행하지 않고 종료한다.
- 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 논리적 참, 거짓을 구별한다.
var count = 0;
// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
while(count < 3){
console.log(count); //0 1 2
count++;
}
//무한루프
//조건식의 평가 결과가 언제나 참이면 무한루프가 된다.
while(true){...}
//무한로프에서 탈출하기 위해서는 코드 블록 내에 if문으로 탈출 조건을 만들고 break문으로 코드 블록을 탈출한다.
while(true){
console.log(count);
count++;
//count가 3이면 코드 블록을 탈출한다.
if (count === 3) break;
} //0 1 2do...while 문
- 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한 번 이상 실행된다.
var count = 0;
//count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do{
console.log(count); //0 1 2
count++;
} while(count < 3);for문과 while문의 차이점?
- for문은 반복 횟수가 명확할 때 주로 사용하고 while문은 반복 횟수가 불명확할 때 주로 사용한다.
break 문
- 레이블 문, 반복문, switch 문의 코드 블록을 탈출할 때 사용한다.
- 레이블 문, 반복문, switch 문 이외의 코드 블록에서 break문을 사용하면 SyntaxError(문법에러)가 발생한다.
- 레이블문은 식별자가 붙은 문을 말한다.
// foo라는 레이블 식별자가 붙은 레이블 문
foo: console.log('foo');- 레이블 문은 프로그램의 실행 순서를 제어할 때 사용한다. switch문의 case, default도 레이블 문이다.
- break문에 레이블 식별자를 지정한다.
// foo라는 식별자가 붙은 레이블 블록문
foo: {
console.log(1);
break foo; //foo 레이블 블록문을 탈출한다.
console.log(2);
}
console.log('Done!');- 레이블 문은 중첩된 for문 외부로 탈출할 때 유용하지만 그 밖의 경우에는 일반적으로 권장하지 않는다.
- 레이블 문을 사용하면 프로그램의 흐름이 복잡해져 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기 때문이다.
- break문은 반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복을 회피할 수 있어 유용하다.
continue 문
- 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.
- break와 같이 반복문을 탈출하지는 않는다.
//문자열에서 특정 문자의 개수를 세는 예
var string = 'Hello World.';
var search = 'l';
var count = 0;
//문자열은 유사 배열이므로 for문으로 순회할 수 있다.
for (var i = 0; i < string.length; i++) {
//'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동한다.
if(string[i] !== search) continue;
count++; //countinue문이 실행되면 이 문은 실행되지 않는다.
}
console.log(count); //3
//참고로 String.prototype.match 메서드를 사용해도 같은 동작을 한다.
const regexp = new RegExp(search, 'g');
console.log(string.match(regexp).length); //3
- if문 내에서 실행해야할 코드가 한 줄이라면 continue문을 사용했을 때보다 아래 예제가 간편하고 가독성도 좋다.
for (var i = 0; i < string.length; i++){
//'l'이면 카운트를 증가시킨다.
if (string[i] === search) count++;
}- 하지만 if문 내에서 실행해야 할 코드가 길다면 들여쓰기가 한 단계 깊어지므로 continue문을 사용하는 편이 가독성이 더 좋다.
//continue문을 사용하지 않으면 if 문 내에 코드를 작성해야함
for (var i = 0; i < string.length; i++){
//'l'이면 카운트를 증가시킨다.
if (string[i] === search){
count++;
//code
//code
//code
}
}
//continue 문을 사용하면 if 문 밖에 코드를 작성할 수 있다.
for (var i = 0; i < string.length; i++){
//'l'이 아니면 카운트를 증가시키지 않는다.
if (string[i] !== search) continue;
count++;
//code
//code
//code
}
}
프론트엔드 공부중입니다!