Startup JavaScript3. 조건문 , 반복문 , 예외 처리

THINKER TO MAKER

x

조건문

THINKER TO MAKER

상황에 맞는 업무 처리

조건문조건에 따라 처리를 분기하는 상황에서 사용하는 구조JavaScript 에서는 if 와 switch 문을 사용함

둘 중 하나를 선택하는 If 명령 복수 중에 하나를 선택하는 Switch 명령

If 문 실습if 문은 명령 이름대로 “만일 ~ 라면 .., 아니면 ..” 라는 구조를 표현주어진 조건식이 true/false 어느 쪽 인지에 따라 대응하는 명령 실행

var x = 15;

// ifif(x >= 10){ console.log('a bigger than 10');}

// if, elseif(x >= 10){ console.log('b bigger than 10');} else { console.log('b smaller than 10');}

var y = 30;

// if, else if, elseif(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');}

// nestedif(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')}

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

NY

YY

YN

N

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 thoughswitch(rank){ case 'A': case 'B': case 'C': console.log('success'); break; case 'D': console.log('fail') default: console.log('Not ranked');}

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: 처리

반복문

THINKER TO MAKER

반복적인 일을 편리하게

반복문while/do while 명령은 미리 부여된 조건식이 true 인 동안 루프를 반복함 . 미리 정해진 횟수만큼 반복 처리를 행하기 위해서는 for 명령을 사용하며

while

임의의 처리

조건식

do while

for infor

임의의 처리

조건식

초기화 처리

Start

End

임의의 처리

조건식

Start

End

증분식

Start

End

임의의 처리

요소가 남았나 ?

Start

End

Y NY

N

NY NY

While/do while

while 명령은 루프의 시작시에 조건식을 판정 ( 전치판정 ) 하는데 반해 , do while 명령은 루프의 마지막에서 조건식을 판정 ( 후치판정 ) 함

do while

whilewhile (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 anywaydo { console.log('y is : ' + y);} while(y < 10);

For/for in

For in loop 는 배열에서는 상황에 따라 인덱스가 오 동작하는 경우가 발생 .Object 의 key 값을 조회하는 경우에 사용하는 것을 권장

// for loopfor(var x = 0 ; x < 5 ; x++){ console.log('x is : ' + x);}

// comma with for loopfor(var i = 0, j = 1; i < 5; i++, j++){ console.log(' i * j = ' + i * j);}

// array with for & for invar 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 invar obj = { x : 100, y : 200 };obj.z = 'Hello!';

for(var key in obj){ console.log(key + ' : ' + obj[key]);}

For/for in

for 명령은 초기화식 , 루프 조건 , 증감식의 세가지 식으로 loop 를 제어한다 . for in loop 는 배열의 인덱스 번호를 취하기만 하므로 코드가 심플하지 않음

Array ‘fruits’ Object ‘book’

0 1 2Banana Tomato Apple

title publish priceJavaScript 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

break/continue/label

중첩된 loop 안에서 break/continue 명령을 사용하여 벗어날 수 있음 .완전히 빠져나오고자 할 때는 label 명령을 사용함

// breakfor(var i = 0; i < 5; i++){ console.log('i : ' + i); if(i == 3){ break; } }

// continuefor(var j = 0 ; j < 5 ; j++){ if(j % 2 == 0){ continue; } console.log('j : ' + j);}

// labelfor(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; } }}

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

YN

Y

예외 처리

THINKER TO MAKER

무 중단 프로그램

Try/catch/finally

숫자에 문자가 , 없는 변수를 참조하는 등 예상치 못하게 정지될 수 있음 .스크립트 전체가 정지 않게 하는 것이 try/catch/finally 문의 역할임

// try, catch, finallyvar i = 0;

try { i = i * j;} catch(e){ console.log(e.message);} finally { console.log('Complete');}

// throw Exceptionvar x = 10;var y = 0;

try { if(y == 0){ throw new Error('divide 0!'); } var z = x / y;} catch(e){ console.log(e.message);

Try/catch/finally

성능 저하가 크므로 , try/catch/finally 는 최소화 하여 사용해야 함Throw 를 이용하여 예외 사항을 강제로 발생할 수 있음

catch(e){ 예외가 발생했을 경우 실행되는 처리

}

try { 예외가 발생할지 모르는 처리

...}

finally { 예외의 유무에 상관없이 실행하는 처리

}

예외 발생

예외없음 예외없음

예외 처리는 Overhead 가 크므로 , try/catch block 구현하는 것을 최소화 해야 함

W www.circul.us G group.circul.us S social.circul.us C cafe.circul.usCONTACT.US circulus@circul.us

THINKER TO MAKER

ANYQUES-TION?

x