제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할때 사용한다.
#종류
1.조건문
-if else문
-switch 문
2.반복문
-for문
-while문
3.break문
4.continue문
cf) 블록문 :0개 이상의 문을 중괄호로 묶은 것. 코드블록 또는 블록이라고 부르기도 한다.
자바스크립트는 블록문을 하나의 실행 단위로 취급한다.
블록문은 단독으로 사용할수도 있으나, 일반적으로 제어문이나 함수를 정의할 떄 사용하는 것이 일반적이다.
{var foo = 10;}
1.조건문
1)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 문 vs 삼항연산자
if else문은 표현식이 아니다. 그래서 값처럼 사용할 수 없기 때문에 변수에 할당할 수 없다.
cf) 삼항연산자 중첩
var num = 2;
var kind = num ? (num > 0 ? "양수" : "음수") : "영";
// num은 0일때 flase로 암묵적 강제변환이 된다.
console.log(kind);
// 양수;
2)switch 문
switch 문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮긴다.
// 월을 영어로 변환한다. (11 → 'November')
var month = 11;
var monthName;
switch (month) {
// (month) 는 표현식
case 1:
// 표현식1 이를 자세히 나타내면 if (month === '1') 라고 볼수 있다
monthName = "January";
// 문의 표현식과 표현식1이 일치하면 실행될 문
break;
case 2:
monthName = "February";
break;
case 3:
monthName = "March";
break;
case 4:
monthName = "April";
break;
case 5:
monthName = "May";
break;
case 6:
monthName = "June";
break;
case 7:
monthName = "July";
break;
case 8:
monthName = "August";
break;
case 9:
monthName = "September";
break;
case 10:
monthName = "October";
break;
case 11:
monthName = "November";
break;
case 12:
monthName = "December";
break;
default:
monthName = "Invalid month";
// break문을 생략하는것이 일반적.
}
console.log(monthName); // November
만약 if/else문의 조건이 너무 많아, 가독성이 떨어진다면 switch문을 이용해보자
2.반복문
조건식의 평가 결과가 참인 경우 코드 블록을 실행. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다.
이는 조건식이 거짓일 때 까지 반복된다.
for문 예제
for (var i = 1; i <= 6; i++) {
for (var j = 1; j <= 6; j++) {
if (i + j === 6) console.log(`[${i}, ${j}]`);
}
}
/* 출력:
[1, 5]
[2, 4]
[3, 3]
[4, 2]
[5, 1]
*/
처음에 이 예제 잘 이해가 안갔다. j=7되면 무조건 종료되는건줄 알았는데, i=1일때 j가 종료된거지, i=2일때 j가 종료된게 아니다!
while 문
무한루프에서 탈출하기 위해서는 코드 블록내에 if 문으로 탈출 조건을 만들고 break 문으로 코드 블록을 탈출한다.
var count = 0;
// 무한루프
while (true) {
console.log(count);
count++;
// count가 3이면 코드 블록을 탈출한다.
if (count === 3) break;
} // 0 1 2
do..while 문
do..while 문법을 사용하면 condition을 반복문 본문 아래로 옮길 수 있습니다.
코드 블록을 몬조 살행하고 조건을 평가한다. 코드 블록은 무조건 한번 이상 실시 된다.
var count = 0;
// 조건을 반복문 아래로 옮길 수 있다.
// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
console.log(count);
count++;
} while (count < 3); // 0 1 2
3.break문
레이블문, 반복문, switch문의 코드 블록을 탈출한다.
//문자열에서 특정 문자의 인덱스(위치)를 검색하는 예시
var string = 'Hello World.';
var search = 'l';
var index;
// 문자열은 유사배열이므로 for 문으로 순회할 수 있다.
for (var i = 0; i < string.length; i++) {
// 문자열의 개별 문자가 'l'이면
if (string[i] === search) {
index = i;
break; // 반복문을 탈출한다.
}
}
console.log(index); // 2
// 참고로 String.prototype.indexOf 메서드를 사용해도 같은 동작을 한다.
console.log(string.indexOf(search)); // 2
4. continue문
반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.
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
'📙 (JAVASCRIPT)' 카테고리의 다른 글
자바스크립트) 생성자 함수에 의한 객체 생성 (0) | 2021.12.21 |
---|---|
자바스크립트 ) 함수의 호출 / 참조에 의한 전달과 외부 상태 변경 (0) | 2021.12.14 |
자바스크립트) 연산자 (0) | 2021.12.02 |
변수는 굳이 왜 쓰는 걸까? 🎁 (0) | 2021.11.27 |
자바스크립트는 어떻게 HTML을 조작하는 것일까? (feat. DOM) (0) | 2021.11.26 |