자바스크립트 언어의 기본 문법인 조건문, 반복문 그리고 오류상황에 대처할 수 있는 예외 처리에 대해 알아봅니다.

1. Startup JavaScript
3.조건문, 반복문, 예외 처리
THINKER TO MAKER
x

2. 조건문
THINKER TO MAKER
상황에 맞는 업무 처리

3. 조건문
조건에 따라 처리를 분기하는 상황에서 사용하는 구조
JavaScript 에서는 if 와 switch 문을 사용함
둘 중 하나를 선택하는 If 명령 복수 중에 하나를 선택하는 Switch 명령

4. If 문 실습
if 문은 명령 이름대로 “만일~ 라면 .., 아니면 ..” 라는 구조를 표현
주어진 조건식이 true/false 어느 쪽 인지에 따라 대응하는 명령 실행
var x = 15;
// if
if(x >= 10){
console.log('a bigger than 10');
}
// if, else
if(x >= 10){
console.log('b bigger than 10');
} else {
console.log('b smaller than 10');
}
var y = 30;
// if, else if, else
if(y >=20){
console.log('c bigger than 20');
} else if(x >= 10){
console.log('c bigger than 10');
} else {
console.log('c smaller than 10');
}
// nested
if(y >= 10){
if(x >= 20){
console.log('d x bigger than 20')
} else {
console.log('d x smaller than 20')
}
} else {
console.log('d y smaller than 10')
}

5. If 문 유의 사항
처음 조건 식을 만족하면 그 이후의 조건식이 실행되지 않으므로,
else if 블록을 사용하는 경우 조건식을 기술하는 순서에 유의해야 함.
If 명령으로 복수 분기 시 유의 점 If문의 중첩
X = 30
변수x 는 10 미만
임을 표시
If의 종료
변수x 는 10 이상
임을 표시
변수x 는 20 이상
임을 표시
X >= 10
X >= 20
X = 30
변수x 는 10 미만
임을 표시
If의 종료
변수x 는 20 이상
임을 표시
X >= 10
X >= 20
조건 만족시
처음에 조건 만족한
블록 한개만 실행
N
N
Y
Y
Y
Y
N
N

6. Switch 문
switch 문은 선두 식이 평가되고, 그것에 만족하는 case 블록을 실행,
만족하는 case 가 없는 경우 default 블록을 호출하는 직관적인 구조임
var rank = 'B';
switch(rank){
case 'A':
console.log('A rank');
break;
case 'B':
console.log('B rank');
break;
case 'C':
console.log('C rank');
break;
default:
console.log('Not ranked');
}
//fall though
switch(rank){
case 'A':
case 'B':
case 'C':
console.log('success');
break;
case 'D':
console.log('fail')
default:
console.log('Not ranked');
}

7. Switch 문
의도적으로 break를 생략하여 복수의 블록을 계속 실행하는 조건 통과
(fall though)라는 작성 방식도 가능하지만, 코드의 흐름을 이해하기가 어려움
연산자 A B C 그 외
case ‘A’:
처리
break;
case ‘B’:
처리
break;
case ‘C’:
처리
break;
default:
처리
break 가 있는 경우 break 가 없는 경우
연산자 A B C 그 외
case ‘A’:
처리
case ‘B’:
처리
case ‘C’:
처리
default:
처리

8. 반복문
THINKER TO MAKER
반복적인 일을 편리하게

9. 반복문
while/do while 명령은 미리 부여된 조건식이 true인 동안 루프를 반복함.
미리 정해진 횟수만큼 반복 처리를 행하기 위해서는 for 명령을 사용하며
while
임의의 처리
조건식
do while
for infor
임의의 처리
조건식
초기화 처리
Start
End
임의의 처리
조건식
Start
End
증분식
Start
End
임의의 처리
요소가 남았나?
Start
End
Y N
Y
N
N
Y NY

10. While/do while
while 명령은 루프의 시작시에 조건식을 판정(전치판정)하는데 반해, do
while 명령은 루프의 마지막에서 조건식을 판정(후치판정)함
do while
while
while (x < 10){
.. code...
}
do {
.. code...
} while (x < 10);
x = 10
break
break
조건에 따라서는 한번도 loop 를 실행하지 않음
조건에 상관없이 최소 1회는 루프를 실행
var x = 10;
var y = 10;
// not executed!
while(x < 10){
console.log('x is : ' + x);
x++;
}
// executed once anyway
do {
console.log('y is : ' + y);
} while(y < 10);

11. For/for in
For in loop는 배열에서는 상황에 따라 인덱스가 오 동작하는 경우가 발생.
Object 의 key 값을 조회하는 경우에 사용하는 것을 권장
// for loop
for(var x = 0 ; x < 5 ; x++){
console.log('x is : ' + x);
}
// comma with for loop
for(var i = 0, j = 1; i < 5; i++, j++){
console.log(' i * j = ' + i * j);
}
// array with for & for in
var arr = ['Banana','Apple','Orange'];
for(var i = 0 ; i < arr.length ; i++){
console.log('for : ' + arr[i]);
}
for(var idx in arr){
console.log('for in : ' + arr[i]);
}
// object with for in
var obj = { x : 100, y : 200 };
obj.z = 'Hello!';
for(var key in obj){
console.log(key + ' : ' + obj[key]);
}

12. For/for in
for 명령은 초기화식, 루프 조건, 증감식의 세가지 식으로 loop를 제어한다.
for in loop는 배열의 인덱스 번호를 취하기만 하므로 코드가 심플하지 않음
Array ‘fruits’ Object ‘book’
0 1 2
Banana Tomato Apple
title publish price
JavaScript Hello 3000
for(var i in fruits){ for(var i in book){
[0]
[1]
[2]
[title]
[publish]
[price]
for loop 초기화 식/증감식 x 값 수행 조건 (x < 10) 실행
1회째 변수 x를 8로 초기화 한다 8 x는 10보다 작다 O
2회째 변수 x에 1을 더한다 9 x는 10보다 작다 O
3회째 변수 x에 1을 더한다 10 x는 10보다 작다 X
for in
for

13. break/continue/label
중첩된 loop 안에서 break/continue 명령을 사용하여 벗어날 수 있음.
완전히 빠져나오고자 할 때는 label 명령을 사용함
// break
for(var i = 0; i < 5; i++){
console.log('i : ' + i);
if(i == 3){
break;
}
}
// continue
for(var j = 0 ; j < 5 ; j++){
if(j % 2 == 0){
continue;
}
console.log('j : ' + j);
}
// label
for(var k = 1 ; k < 5 ; k++){
for(var l = 1 ; l < 5 ; l++){
console.log('k * l = ' + k*l)
if(l > 3){
break;
}
}
}
main:
for(var k = 1 ; k < 5 ; k++){
for(var l = 1 ; l < 5 ; l++){
console.log('label k * l = ' + k*l)
if(l > 3){
break main;
}
}
}

14. break/continue/label
특정 조건을 만족할 때 강제 종료를 위해서는 break 명령을 이용함.
현재의 loop만 건너뛰고 다음 loop실행을 위해서는 continue 이용
break 명령은 루프 전체를 완전히 빠져나옴 continue 명령은 현재의 루프를 스킵한다
result = 0
변수 result에
i를 더함
i = 1.. 100
breakresult > 1000
loop
result = 0
continue
변수 i가 2로
나뉘는가?
루프
변수 result에
i를 더함
i = 1.. 99
Start
End
Start
End
N
Y
N
Y

15. 예외 처리
THINKER TO MAKER
무 중단 프로그램

16. Try/catch/finally
숫자에 문자가, 없는 변수를 참조하는 등 예상치 못하게 정지될 수 있음.
스크립트 전체가 정지 않게 하는 것이 try/catch/finally 문의 역할임
// try, catch, finally
var i = 0;
try {
i = i * j;
} catch(e){
console.log(e.message);
} finally {
console.log('Complete');
}
// throw Exception
var x = 10;
var y = 0;
try {
if(y == 0){
throw new Error('divide 0!');
}
var z = x / y;
} catch(e){
console.log(e.message);

17. Try/catch/finally
성능 저하가 크므로, try/catch/finally 는 최소화 하여 사용해야 함
Throw 를 이용하여 예외 사항을 강제로 발생할 수 있음
catch(e){
예외가 발생했을 경우 실행되는 처리
}
try {
예외가 발생할지 모르는 처리
...
}
finally {
예외의 유무에 상관없이 실행하는 처리
}
예외 발생
예외없음 예외없음
예외 처리는 Overhead 가 크므로, try/catch block 구현하는 것을 최소화 해야 함

18. W www.circul.us G group.circul.us
S social.circul.us C cafe.circul.us
CONTACT.US circulus@circul.us
THINKER TO MAKER
ANY
QUESTION?
x