이번 강좌에서는 자바스크립트의 제어문/반복문에 대해 살펴보도록 하겠습니다.
제어문은 참/거짓에 의해 로직을 분기하는 것을 의미합니다. 자바스크립트에서는 if , switch 키워드를 통해 제어문을 구현합니다. 코드를 통해 알아보도록 하겠습니다.
가장 기본이 되는 if 문 설명입니다. if 문은 if ( expression ) {statement; ... } 로 구성됩니다. 괄호안의 조건(expression)이 참이면 안의 문장을 수행합니다.
괄호안에는 참/거짓 판단이 가능한 어떤 expression 이라도 올 수 있습니다.
if 문이 조금 더 응용된 형태인 if ~ else if ~ else 에 대해 보도록하겠습니다.
if 문안의 표현식이 거짓이면 그 다음 else if 를 실행하고, 또 거짓이면 그 다음 else if 그 값이 거짓이면 else 안을 수행합니다.
예를들어 a가 0, b가 7이라면 첫번째 if문은 거짓이 되고 a>5 문장도 거짓이고, b>6문장은 참이므로 b는 6보다 큽니다 라는 메시지가 출력됩니다.
또 다른 제어문을 구현하는 키워드인 switch 에 대해 알아보도록 하겠습니다.
아래 추가설명된 if 문은 참이 되는 것을 보여주기 위해 추가로 적어보았습니다. '==' 연산자는 자동으로 두 피연산자의 타입을 일치시키기 때문에 참이 됩니다. switch문에서의 'case'는 '===' 와 같다는 점을 헷갈리면 안됩니다.
반복문에 대해 살펴보도록 하겠습니다. 반복문은 단어 그대로 반복적으로 수행할 작업이 있는 경우 사용하기 좋은 명령입니다. 반복문을 위해 자바스크립트에서는 while, do-while, for, for-in 키워드를 제공하고 있습니다.
각각에 대해 코드를 통해 간략히 살펴보도록 하겠습니다.
우선 while문입니다.
while의 조건식 ( i <10 ) 이 참인 동안 반복적으로 실행됩니다. while문은 반복문의 가장 기본적인 형태입니다.
다음은 do-while문입니다.
while문과의 차이는 조건식에 관계없이 최초 한번은 무조건 명령을 수행한다는 점입니다. do {} 안의 문장은 조건식에 상관없이 최초 한번 무조건 수행되고 i<10조건을 실행한 뒤에 비교하게 됩니다.
그 다음에 살펴볼 것은 for 문입니다.
for문은 while문에 비해 초기화, 증감 부분이 추가된 구문입니다.
코드를 보겠습니다.
for문 안에서 i가 초기화 되고, 한번 loop를 수행한 뒤 i값이 1씩 증가하고(i++), 바로 조건식을 비교합니다.
즉 실행순서는
var i=0;(초기화) => 조건비교(i<10) => 내부구문 실행 => 증감(i++) => 조건비교 => 내부구문 실행 ...
과 같은 형태로 실행됩니다.
마지막으로 for - in을 살펴보겠습니다. for-in은 앞서 설명드렸던 배열과 함께 사용되는 반복문입니다.
코드를 통해 살펴보겠습니다.
a배열에 있는 요소(element)들의 인덱스가 차례대로 i에 셋팅됩니다.
결과는
가 됩니다.
이상으로 자바스크립트의 기본 문법인 제어문/반복문에 대해 살펴보았습니다. 다음 강좌에서는 함수(function)에 대해 살펴보도록 하겠습니다. 함수부터는 자바스크립트만의 고유한 특징들이 많이 나타나므로 주의깊게 보셔야 합니다.
제어문은 참/거짓에 의해 로직을 분기하는 것을 의미합니다. 자바스크립트에서는 if , switch 키워드를 통해 제어문을 구현합니다. 코드를 통해 알아보도록 하겠습니다.
if ( a > 2 ) {
console.log("2보다 크다");
}
괄호안에는 참/거짓 판단이 가능한 어떤 expression 이라도 올 수 있습니다.
if 문이 조금 더 응용된 형태인 if ~ else if ~ else 에 대해 보도록하겠습니다.
if ( a > 3 && b > 5) {
console.log("a는 3보다 크고 b도 5보다 큽니다.");
} else if ( a > 5 ) {
console.log("a는 5보다 큽니다.");
} else if ( b > 6 ) {
console.log("b는 6보다 큽니다.");
} else {
console.log("이도저도아닙니다");
}
if 문안의 표현식이 거짓이면 그 다음 else if 를 실행하고, 또 거짓이면 그 다음 else if 그 값이 거짓이면 else 안을 수행합니다.
예를들어 a가 0, b가 7이라면 첫번째 if문은 거짓이 되고 a>5 문장도 거짓이고, b>6문장은 참이므로 b는 6보다 큽니다 라는 메시지가 출력됩니다.
또 다른 제어문을 구현하는 키워드인 switch 에 대해 알아보도록 하겠습니다.
var a = 1;
switch (a) {
case '1':
console.log("aaa");
break;
default :
console.log("default");
}
if ( a == '1' ) {
console.log("ccc");
}
switch 는 switch (expression) { ... } 형태로 수행됩니다. expression 값을 가지고 case 문과 비교를 수행합니다. a가 1이기 때문에 case '1'과의 비교는 거짓입니다. ( 타입까지 비교함 ), case문이 모두 거짓이면 default 문을 수행합니다. ( if문의 else와 같은 역할) 따라서 위의 경우 "default"라는 값을 출력합니다.
switch문에서 주의 깊게 볼 점은 break;문입니다. case 문이 참이 되어 내부로 진입하는 경우 문장을 수행하다 break문을 만나면, switch문을 빠져나옵니다. break;문이 없는 경우 , 아래로 로직이 흐르게 되어 잘못된 문장이 수행될 수 있으니 주의해야 합니다.
switch문에서 주의 깊게 볼 점은 break;문입니다. case 문이 참이 되어 내부로 진입하는 경우 문장을 수행하다 break문을 만나면, switch문을 빠져나옵니다. break;문이 없는 경우 , 아래로 로직이 흐르게 되어 잘못된 문장이 수행될 수 있으니 주의해야 합니다.
아래 추가설명된 if 문은 참이 되는 것을 보여주기 위해 추가로 적어보았습니다. '==' 연산자는 자동으로 두 피연산자의 타입을 일치시키기 때문에 참이 됩니다. switch문에서의 'case'는 '===' 와 같다는 점을 헷갈리면 안됩니다.
반복문에 대해 살펴보도록 하겠습니다. 반복문은 단어 그대로 반복적으로 수행할 작업이 있는 경우 사용하기 좋은 명령입니다. 반복문을 위해 자바스크립트에서는 while, do-while, for, for-in 키워드를 제공하고 있습니다.
각각에 대해 코드를 통해 간략히 살펴보도록 하겠습니다.
우선 while문입니다.
var i=0;
while ( i < 10 ) {
i++;
}
다음은 do-while문입니다.
var i = 0;
do {
i++;
} while (i<10)
그 다음에 살펴볼 것은 for 문입니다.
for문은 while문에 비해 초기화, 증감 부분이 추가된 구문입니다.
코드를 보겠습니다.
for ( var i=0 ; i <10; i++ ) {
console.log(" i = " + i );
}
for문 안에서 i가 초기화 되고, 한번 loop를 수행한 뒤 i값이 1씩 증가하고(i++), 바로 조건식을 비교합니다.
즉 실행순서는
var i=0;(초기화) => 조건비교(i<10) => 내부구문 실행 => 증감(i++) => 조건비교 => 내부구문 실행 ...
과 같은 형태로 실행됩니다.
마지막으로 for - in을 살펴보겠습니다. for-in은 앞서 설명드렸던 배열과 함께 사용되는 반복문입니다.
코드를 통해 살펴보겠습니다.
var a = ['a','b','c','d'];
for ( var i in a ) {
console.log("index : " + i + ", value = " + a[i]);
}
a배열에 있는 요소(element)들의 인덱스가 차례대로 i에 셋팅됩니다.
결과는
index : 0, value = a
index : 1, value = b
index : 2, value = c
index : 3, value = d
가 됩니다.
이상으로 자바스크립트의 기본 문법인 제어문/반복문에 대해 살펴보았습니다. 다음 강좌에서는 함수(function)에 대해 살펴보도록 하겠습니다. 함수부터는 자바스크립트만의 고유한 특징들이 많이 나타나므로 주의깊게 보셔야 합니다.
'WEB > javascript' 카테고리의 다른 글
| [제9강] 자바스크립트의 문법(제어문,반복문) (0) | 2011/07/01 |
|---|---|
| [제8강] 자바스크립트의 배열 (Array) (0) | 2011/07/01 |
| [제7강] Literal, expression, Statements (0) | 2011/06/29 |
| [제6강] 자바스크립트 연산자 - 논리연산자,비교연산자 (1) | 2011/06/28 |
| [제5강] 자바스크립트의 기본 데이타 유형 (Primitive Data Type) (0) | 2011/06/27 |
| [제4강] 자바스크립트 연산자(Operator) - 산술연산자 (0) | 2011/06/27 |
