모바일 부터 하드웨어까지 가능하게 하는 가장 강력한 언어, GITHUB 에서 가장 많은 프로젝트, 해커톤에서 가장 많이 사용되는 언어, 오바마 대통령도 배웠던 언어, 바로 자바스크립트입니다.

1. Welcome to
Javascript
3. 제어 명령

2. 1. if
2. switch
2. while/do while
3. for/for in
4. break/continue/label
5. try/catch/finally
Javascript 기초 3 제어명령
선수 추천 과정
HTML5
CSS3

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

4. if 문 (2/3)
if 문은 명령 이름대로 만일~ 라면 .., 아니면 .. 라는 구조를 표현하기 위한 명령. 주어진
조건식이 true/false 어느 쪽인지에 따라 대응하는 명령을 실행함
if 단독 사용
특정 case 에 따라 명령을 실행하기
위해서는 if 단독으로 사용
if/else 사용
if 명령에서 지정된 조건식이 true 인
경우는 그 바로 밑의 블록을, false 인
경우는 else 이후의 블록을 각각 실행
Javascript 기초3
if/else if/else 결합 사용
복수의 분기를 표현하고 싶은 경우에
는 else if 블록을 추가할 수 있음. 다
만 복수의 조건에 들어맞는 경우에도
실행되는 블록은 가장 상위의 한개이
므로 유의할 것

5. 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

6. switch 문 (1/2)
if 문이 동일 변수에 대한 비교시 병렬 관계에 있는 조건 값을 보기 어려워 지는데,
switch 문은 선두 식이 평가되고, 그것에 만족하는 case 블록을 실행, 만족하는 case
가 없는 경우 default 블록을 호출하는 직관적인 구조를 지니고 있음
기본 유형
변수 rank 는 A, B, C 및 그외의 경우
에 대응하는 default 블록식으로 구현
되어 있음. if 문과 달리 case 끝에
break 명령이 있어야 처리를 빠져나
옴. break 를 적절하게 지정하지 않으
면 의도하지 않은 결과를 초래.
조건 통과(fall though)
의도적으로 break 명령을 생략하여
복수의 블록을 계속적으로 실행하는
조건 통과의 작성 방식도 사용 가능하
나, 일반적인 경우에는 피해야 함
Javascript 기초3

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

8. while/do while (1/2)
while/do while 명령은 미리 부여된 조건식이 true인 동안 루프를 반복함. 미리 정해
진 횟수만큼 반복 처리를 행하기 위해서는 for 명령을 사용하며, 지정된 배열이나 객체
의 요소에 대해 선두 부터 반복 처리 하기 위해서는 for in 명령을 이용
Javascript 기초3
while
임의의 처리
조건식
do while
for infor
임의의 처리
조건식
초기화 처리
Start
End
임의의 처리
조건식
Start
End
증분식
Start
End
임의의 처리
요소가 남았나?
Start
End
Y N
Y
N
N
Y NY

9. while/do while (2/2)
while/do while 이 동일한 동작을 하고 있는 것처럼 보이나, while 명령은 루프의 시
작시에 조건식을 판정(전치판정)하는데 반해, do while 명령은 루프의 마지막에서 조
건식을 판정(후치판정)함
do/do while
루프가 시작되기 전 부터 조건이
false 인 경우 do/do while 의 차이
점이 드러나게 됨
Javascript 기초3
do whilewhile
while (x < 10){
.. code...
}
do {
.. code...
} while (x < 10);
x = 10
break
break
while 명령 – 조건에 따라서는 한번도 loop 를 실행하지 않음
do while 명령 – 조거에 상관없이 최소 1회는 루프를 실행

10. 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

11. for/for in (2/2)
for in loop는 배열의 인덱스 번호를 취하기만 하므로 코드가 심플하지 않고, 상황에 다
라 올바른 동작을 하지 않는 경우가 있음. 그러므로 Object 의 Key 값을 조회하는 경우
에 한정하여 사용하는 것이 바람직 함
for
미리 지정된 횟수만큼 반복처리 하는
데, 경우에 다라 while/do while 보
다 Compact 한 코드 작성이 가능. 콤
마로 복잡한 for loop 작성이 가능함
for in
배열, 객체로부터 멤버 값을 순서대로
가져올 수 있음. 다만, 일반 배열을 조
회하는 경우 원칙적으로 for loop를
사용할 것을 권장 함
Javascript 기초3

12. 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
breakresult > 1000
loop
result = 0
continue
변수 i가 2로
나뉘는가?
루프
변수 result에
i를 더함
i = 1.. 99
Start
End
Start
End
N
Y
N
Y

13. 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을 호출하
여 오나전히 밖으로 빠져나올 수 있음

14. try/catch/finally (1/2)
숫자를 취할 것이라고 생각하 함수에 문자열이 오거나, 변수를 참조하려고 했으나 미
정의되는 경우등 예상치 못한 에러가 발생하는데, 이런 경우에도 스크립트 전체가 정지
하지 않도록 하는 것이 예외처리하는 try/catch/finally 의 역할임.
Javascript 기초3
catch(e){
예외가 발생했을 경우 실행되는 처리
}
try {
예외가 발생할지 모르는 처리
...
}
finally {
예외의 유무에 상관없이 실행하는 처리
}
예외 발생
예외없음 예외없음
예외 처리는 Overhead 가 크므로, try/catch block 구현하는 것을 최소화 해야 함

15. try/catch/finally (2/2)
예외 처리를 이용하는 이유를 이해하기 어려울 수 있으나, 예기치 못한 값의 부 정합에
의한 버그는 프로그램을 실행하기 전에 미리 해결하는 것이 좋다. 그러한 것을 다 해결
할 수 없는 경우 try/catch/finally는 최소화 하여 이용함.
기본 동작
오류 발생 예상 지점에 try 로 감싸주
면 오류 내용이 catch 에서 나오고,
finally 도 동작하게 됨
명시적 예외 발생
예외는 프로그램 안에서 발생한 것을
처리하지만, 자신이 직접 임의적으로
발생시킬 수 있음
Javascript 기초3
throw new Error(에러 메세지)

16. Expand your dimension!
Let’s Start!