Welcome to

Javascript 3. 제어 명령

1. if

2. switch

2. while/do while

3. for/for in

4. break/continue/label

5. try/catch/finally

Javascript 기초 3 제어명령

선수 추천 과정 HTML5 CSS3

if 문 (1/3)

프로그램의 구조는 세가지 형태로 분류할 수 있음. 순서대로 처리하는 순차 구조, 조건에 따라 처리를 분기하는 선택 구조, 특정의 처리를 반복 실행하는 반복구조로 나뉘게 된다. 자바스크립트에서는 분기 처리를 위해 if 와 switch 문을 사용.

Javascript 기초3

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

if 문 (2/3)

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

if 단독 사용 특정 case 에 따라 명령을 실행하기 위해서는 if 단독으로 사용

if/else 사용 if 명령에서 지정된 조건식이 true 인 경우는 그 바로 밑의 블록을, false 인 경우는 else 이후의 블록을 각각 실행

Javascript 기초3

if/else if/else 결합 사용 복수의 분기를 표현하고 싶은 경우에는 else if 블록을 추가할 수 있음. 다만 복수의 조건에 들어맞는 경우에도 실행되는 블록은 가장 상위의 한개이므로 유의할 것

if 문 (3/3)

처음 조건 식을 만족하면 그 이후의 조건식이 실행되지 않으므로, else if 블록을 사용하는 경우 조건식을 기술하는 순서에 유의해야 함. 아울러, if 명령 내부에 if문을 중첩해서 사용함으로써 보다 복잡한 분기조건을 표현할 수 있음

Javascript 기초3

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

switch 문 (1/2)

if 문이 동일 변수에 대한 비교시 병렬 관계에 있는 조건 값을 보기 어려워 지는데, switch 문은 선두 식이 평가되고, 그것에 만족하는 case 블록을 실행, 만족하는 case 가 없는 경우 default 블록을 호출하는 직관적인 구조를 지니고 있음

기본 유형 변수 rank 는 A, B, C 및 그외의 경우에 대응하는 default 블록식으로 구현되어 있음. if 문과 달리 case 끝에 break 명령이 있어야 처리를 빠져나옴. break 를 적절하게 지정하지 않으면 의도하지 않은 결과를 초래.

조건 통과(fall though) 의도적으로 break 명령을 생략하여 복수의 블록을 계속적으로 실행하는 조건 통과의 작성 방식도 사용 가능하나, 일반적인 경우에는 피해야 함

Javascript 기초3

switch 문 (2/2)

의도적으로 break를 생략하여 복수의 블록을 계속 실행하는 조건 통과(fall though)라는 작성 방식도 가능하지만, 코드의 흐름을 이해하기 어렵게 만드는 원인이 될 수 있으므로 일반적으로 사용을 피해야 함

연산자 A B C 그 외

case ‘A’: 처리 break;

case ‘B’: 처리 break;

case ‘C’: 처리 break;

default: 처리

Javascript 기초3

break 가 있는 경우 break 가 없는 경우

연산자 A B C 그 외

case ‘A’: 처리

case ‘B’: 처리

case ‘C’: 처리

default: 처리

while/do while (1/2)

while/do while 명령은 미리 부여된 조건식이 true인 동안 루프를 반복함. 미리 정해진 횟수만큼 반복 처리를 행하기 위해서는 for 명령을 사용하며, 지정된 배열이나 객체의 요소에 대해 선두 부터 반복 처리 하기 위해서는 for in 명령을 이용

Javascript 기초3

while

임의의 처리

조건식

do while

for in for

임의의 처리

조건식

초기화 처리

Start

End

임의의 처리

조건식

Start

End

증분식

Start

End

임의의 처리

요소가 남았나?

Start

End

Y N Y

N

N

Y N Y

while/do while (2/2)

while/do while 이 동일한 동작을 하고 있는 것처럼 보이나, while 명령은 루프의 시작시에 조건식을 판정(전치판정)하는데 반해, do while 명령은 루프의 마지막에서 조건식을 판정(후치판정)함

do/do while 루프가 시작되기 전 부터 조건이 false 인 경우 do/do while 의 차이점이 드러나게 됨

Javascript 기초3

do while while while (x < 10){ .. code... }

do { .. code... } while (x < 10);

x = 10

break

break

while 명령 – 조건에 따라서는 한번도 loop 를 실행하지 않음

do while 명령 – 조거에 상관없이 최소 1회는 루프를 실행

for/for in (1/2)

for 명령은 초기화식, 루프 조건, 증감식의 세가지 식으로 loop를 제어한다. 처음 루프에서 초기화식을 한번만 실행한 후 블록 처리시마다 증감식이 실행된다. for in 명령은 배열이나 객체내 요소에 대해 선두부터 순서대로 반복 처리 한다.

Javascript 기초3

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

for/for in (2/2)

for in loop는 배열의 인덱스 번호를 취하기만 하므로 코드가 심플하지 않고, 상황에 다라 올바른 동작을 하지 않는 경우가 있음. 그러므로 Object 의 Key 값을 조회하는 경우에 한정하여 사용하는 것이 바람직 함

for 미리 지정된 횟수만큼 반복처리 하는데, 경우에 다라 while/do while 보다 Compact 한 코드 작성이 가능. 콤마로 복잡한 for loop 작성이 가능함

for in 배열, 객체로부터 멤버 값을 순서대로 가져올 수 있음. 다만, 일반 배열을 조회하는 경우 원칙적으로 for loop를 사용할 것을 권장 함

Javascript 기초3

break/continue (1/2)

while/do while, for/for in 명령에서 정해진 종료 조건을 만족하는 타이밍에 종료하지만, 특정 조건을 만족할때 강제 종료를 위해서는 break 명령을 이용함. 또한 중단하는 것이 아닌 현재의 loop만 건너뛰고 다음 loop실행을 위해서는 continue 이용

Javascript 기초3

break 명령은 루프 전체를 완전히 빠져나옴

continue 명령은 현재의 루프를 스킵한다

result = 0

변수 result에 i를 더함

i = 1.. 100

break result > 1000

loop

result = 0

continue

변수 i가 2로 나뉘는가?

루프

변수 result에 i를 더함

i = 1.. 99

Start

End

Start

End

N

Y N

Y

break/continue/label (2/2)

중첩된 loop 안에서 break/continue 명령을 사용한 경우 기본으로 가장 안쪽의 loop만 빠져나오게 되는데, 완전히 loop 자체를 벗어나고 싶은 경우에는 label 명령으로 빠져나오고자 하는 loop의 선두에 지정하고, break/continue 로 해당 label 을 호출

break 특정 조건을 만족하는 경우에 루프를 강제적으로 중단하고 싶은 경우 break 구문을 이용함

continue 현재의 루프만을 건너뛰고 다음 루프를 계속해서 실행하고 싶은 경우에는 continue 명령을 사용함

Javascript 기초3

label 기본 loop 가 중첩되어 있는 경우, 기존의 break/continue 는 가장 안쪽의 loop에서만 동작하는데, loop문 앞에 label을 지정한 후 break/ continue 에서 해당 label을 호출하여 오나전히 밖으로 빠져나올 수 있음

try/catch/finally (1/2)

숫자를 취할 것이라고 생각하 함수에 문자열이 오거나, 변수를 참조하려고 했으나 미 정의되는 경우등 예상치 못한 에러가 발생하는데, 이런 경우에도 스크립트 전체가 정지 하지 않도록 하는 것이 예외처리하는 try/catch/finally 의 역할임.

Javascript 기초3

catch(e){

예외가 발생했을 경우 실행되는 처리

}

try {

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

...

}

finally {

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

}

예외 발생

예외없음 예외없음

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

try/catch/finally (2/2)

예외 처리를 이용하는 이유를 이해하기 어려울 수 있으나, 예기치 못한 값의 부 정합에 의한 버그는 프로그램을 실행하기 전에 미리 해결하는 것이 좋다. 그러한 것을 다 해결 할 수 없는 경우 try/catch/finally는 최소화 하여 이용함.

기본 동작 오류 발생 예상 지점에 try 로 감싸주면 오류 내용이 catch 에서 나오고, finally 도 동작하게 됨

명시적 예외 발생 예외는 프로그램 안에서 발생한 것을 처리하지만, 자신이 직접 임의적으로 발생시킬 수 있음

Javascript 기초3

throw new Error(에러 메세지)

Expand your dimension!

Let’s Start!