문장
제어문에 대해서 알아봅시다.
if문
프로그래밍에서 제일 많이 쓰이는 제어문입니다.if (condition) statement1 else statement2
condition(조건)에는 어떤 표현식이든 쓸 수 있습니다. ECMAScript에서 자동으로 해당 표현식 겨로가에 Boolean()함수를 호출해 불리언 값으로 변경하기 때문입니다.
condition이 true라면 statement1이 실행되며, false라면 statement2가 실행됩니다.
만약 statement가 한줄이라면 코드블록으로 감싸지 않아도 되지만, 항상 코드 블록을 쓰길 권장하고 있습니다.
var i = 24;
if (i > 25) {
console.log("Greater than 25.")
} else if (i < 0) {
console.log("Less than 0.");
} else {
console.log("Between 0 and 25, inclusive.");
}
위 예제와 같이 if와 else 외에도 if else를 사용하여 조건을 늘릴 수 있습니다.
do-while 문
do-while문은 평가전 루프입니다.
루프의 종료 조건을 평가하기 전에 루프 본문을 실행한다는 뜻입니다.
먼저 루프 본문을 한번 무조건 실행 한 후 조건을 보고 False가 나올 때 까지 반복합니다.
var i = 0;
do {
i += 2;
} while (i < 10);
console.log(i);
while 문
while문은 평가후 루프입니다.
조건을 확인 후 루프 본문을 실행하게 됩니다.
var i = 0;
while (i < 10) {
i += 2;
}
console.log(i);
for 문
for문 역시 평가 후 루프입니다.
루프에 들어가기 전 변수를 초기화 가능하며 루프 후 코드도 지정할 수 있습니다.
실제 사용 예를 보겠습니다.
var count = 10;
for (var i=0; i < count; i++){
console.log(i);
}
while루프와 다른점은 변수초기화, 비교, 루프후 코드가 있다는 것 뿐이며
for로 구현하지 못하는 건 while로도 구현하지 못합니다.
즉 서로 동일한 기능을 구현 할 수도 있다는 말입니다.
초기화; 조건표현식; 루프 후 코드는 옵션이므로 아래와 같이 모든옵션을 생략하면 무한루프가 생성됩니다.
for (;;){
//무한루프
}
for-in 문
for-in문은 엄격한 반복문입니다.
객체의 프로퍼티를 나열하는데 사용합니다.
for (var propName in window){
document.write(propName);
}
BOM widow객체의 모든 프로퍼티를 표시하는 예제입니다.
루프를 실행할 때마다 propName변수에 window객체의 프로퍼티 이름이 저장됩니다.
이 과정은 객체의 프로퍼티를 모두 나열할 때 까지 계속됩니다.
제어부에서 반드시 var키워드를 써야 하는건 아니지만 지역 변수를 이용하게끔 var키워드를 사용해줍시다.
문장 레이블
문장에 레이블을 붙였다가 나중에 다시 사용할 수 있습니다.
아래 예제를 보면
start: for( var i = 0 ; i < count ; i++ ){
alert(i);
}
위 예제에서는 start라는 레이블을 제어문에 추가하였습니다.
이는 아래서 배울 break나 coutinue에서 참조 할 수 있습니다.
루프 내부의 코드 실행을 세밀히 조절할 수 있는 break와 coutinue에 대해서 알아봅시다.
break, continue 문
break문은 즉시 루프에서 빠져나가 루프 다음 문장을 실행합니다.
var num = 0;
for(var i = 1; i <= 10 ; i ++){
if(i == 5){
break;
}
num++;
}
console.log(num); //4
위예제는 i가 5일때 break문으로 제어문을 빠져나오게 됩니다.
그렇게 때문에 num은 4입니다.
아래 continue예제를 보겠습니다.
var num = 0;
for(var i = 1; i <= 10 ; i ++){
if(i == 5){
continue;
}
num++;
}
console.log(num); //9
for문은 10번돌지만 i가 5일때 continue문으로 인하여 num++문을 한번 동작하지 않기때문에 num이 최종적으로 9가 됩니다.
레이블을 사용한 break, coutinue구현
var num = 0;
outermost:
for (var i=0; i < 10; i++) {
for (var j=0; j < 10; j++) {
if (i == 5 && j == 5) {
break outermost;
}
num++;
}
}
console.log(num); //55
var num = 0;
outermost:
for (var i=0; i < 10; i++) {
for (var j=0; j < 10; j++) {
if (i == 5 && j == 5) {
continue outermost;
}
num++;
}
}
console.log(num); //55
outermost 레이블은 현재 첫번째 for문을 가리키고 있습니다.continue outermost, break outermost를 실행하면 해당 레이블의 제어문을 기준으로 동작하게 됩니다.
break, continue를 사용시 주의사항
두 기능을 조합하면 루프를 유연하게 만들수 있습니다.
하지만 과용하면 디버그에 문제가 생길수 있으니 레이블 이름은 항상 해당 레이블의 의도를 설명할 수 있게,
루프는 너무 많이 중첩되지 않게 작업하여야 합니다.
with 문
wite 문은 코드의 스코프를 특정 개체에 고정합니다.
문법은 아래와 같습니다.with (expression) statement;
with문의 원래 의도는 특정 객체를 코드에서 매우많이 참조할 때 편리하게 작성하기 위함이었습니다.
var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;
위 예제를 보면 location객체를 반복적으로 호출하고 있습니다.
with를 써서 수정해봅시다
with(location){
var qs = search.substring(1);
var hostName = hostname;
var url = href;
}
with문 내부의 변수는 우선 지역변수로 간주하며,
변수에 접근할 때 지역 변수에서 식별자로 찾을 수 없다면 location객체의 프로퍼티중에서 같은 이름으로 검색합니다.
참고로 스트릭트 모드에서는 with문을 금지하며 문법에러로 간주합니다.
switch 문
if와 관련깊은 switch문에 대해서 알아봅시다.
switch ( expression) {
case value: statement
break;
case value: statement
break;
default: statement
}
표현식이 value와 일치하면 statement를 실행합니다.
이때 break키워드는 코드 실행을 멈추며 break가 없으면 statement 실행 후 다음 case로 계속 진행됩니다.
default는 모두 실행되지 않을 경우 실행할 문장을 가리킵니다.
if의 else문과 같은 기능을 합니다.
자바스크립트만의 특징이라면 보통 다른언어의 경우 switch사용 시 숫자만 조건식으로 사용할 수 있었습니다.
허나 ECMAScript만의 고유한 특징으로 인하여 숫자 타입뿐아니라 기타 표현식도 사용이 가능합니다.
switch에 입력된 값을 비교 조건등으로 사용이 가능하다는 말입니다.
반복문에서 i란?
반복문에서 관습적으로 i를 자주 사용합니다.
이는 iterator(~을 반복하다)에서 파생되었습니다.
중요한 내용은 아니지만 알고 지나갑시다
마치며
문장(제어문)에 대해서 알아보았습니다.
다음 포스트에서는 함수에 관련하여 알아봅시다.