제어문이란 조건에 따라서 코드블록을 실행하거나 반복실행하는 문을 말한다.
제어문을 활용하면 코드의 실행흐름을 위에서부터 아래로 내려가는 자연스러운 흐름을 인의적으로 바꿀 수 있기 때문에 제어문의 남용은 코드의 가독성을 해치게 된다.
따라서 이후에 forEach,map,filter과 같은 고차함수로 제어문의 사용을 덜 쓰는 방향이 좋다.
사실 이번 장은 대부분 아는 내용이라 핵심만 짚고 넘어가도록 할 것 같다. ( JS 문법 글에서 자세히 적어두었다 )
블록문
이전에 잠깐 설명했던 블록문은 0개 이상의 문을 중괄호로 묶은 것으로 코드블록 혹은 블록이라고 부른다.
조건문
주어진 조건에 따라 코드블록을 실행하게 된다.
if...else if .... else 문이 일반적이다.
if(조건식1){
// 참 실행문
}else if(조건식2){
//조건식1의 거짓 임과 동시에 조건식2의 참
}else{
//조건식 1, 2 모두 거짓 실행문
}
if문은 이전 연산자 파트에서 소개한 것처럼 삼항연산자로 생략 할 수 있다.
조건문에는 switch문도 존재하며 switch문을 활용하면 특정 상황에서 가독성이 if...else문보다 좋을 때가 존재한다.
switch(표현식) {
case 표현식 1 :
switch 문의 표현식과 표현식1이 일치하면 실행될 문;
break;
case 표현식 2 :
switch 문의 표현식과 표현식2가 일치하면 실행될 문;
break;
default :
switch문의 표현식과 일치하는 case문이 없을 때 실행될 문;
}
if...else문과 다르게 표현식이 불리언보다는 문자열이나 숫자인 경우가 많다.
switch문에서 break문을 쓰지 않으면 자동으로 다음 case로 넘어가게 되니 해당 흐름만 주의하며 사용하도록 하자.
반복문
반복문에는 for문과 while문이 존재한다.
for(변수 선언문 또는 할당문; 조건식; 증감식){
조건식이 참일 경우 실행시킬 문;
}
var count = 0;
//count가 3보다 작을 떄 까지 코드블록을 계속 반복실행.
while(count<3){
console.log(count); // 0 1 2
count++;
}
반복횟수가 정해져 있는 경우 for문이 유리하고 정해져 있지 않으면 while문이 유리함을 기억하자.
break 문
JS에는 break문을 활용해서 레이블 문, 반복문, switch문을 탈출할 수 있다.
레이블 문이란 식별자가 붙은 문을 의미한다.
//foo라는 식별자가 붙은 레이블 블록문
foo: {
console.log(1);
break foo; //foo 레이블블록문을 탈출한다.
console.log(2);
}
console.log('done!');
문에 위와같이 식별자가 있다면 반복문이 아니어도 종료하게 만들 수 있다.
프로그래밍을 하다 보면 중첩된 for문에서 바깥 for문을 나가고 싶은 경우가 있다. 해당 경우도 레이블 문을 활용할 수 있다. 종종 사용되는 기법이니 꼭 기억해두자.
//outer라는 식별자가 붙은 레이블 for문
outer : for(var i=0; i<3; i++){
for(var j=0; j<3; j++){
//i+j===3이면 outer라는 식별자가 붙은 레이블 for문을 탈출한다.
if(i+j ===3) break outer;
console.log(`inner [${i}], ${j}`);
}
}
console.log('Done!');
continue
continue문은 break와 비슷하지만 조금 다르다. 해당 블럭을 스킵하긴 하지만 for문을 탈출하지는 않는다.
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++; //continue문이 실행되면 이 문은 실행되지않는다.
}
console.log(count); //3
//참고로 string.prototype.match 메서드를 사용해도 같은 동작을 한다.
const regexp = new RegExp(search, 'g');
console.log(string.match(regexp).length); //3
오늘은 생각보다 가벼운 주제였다!
'FrontEnd > Deep Dive' 카테고리의 다른 글
[JS] DeepDive(10) 객체 리터럴 (0) | 2023.07.27 |
---|---|
[JS] DeepDive(9) 타입 변환과 단축 평가 (0) | 2023.07.26 |
[JS] DeepDive(7) 연산자 (0) | 2023.07.21 |
[JS] DeepDive(6) 데이터 타입 (0) | 2023.07.21 |
[JS] DeepDive(5) 표현식과 문 (0) | 2023.07.19 |