SlideShare a Scribd company logo
Startup JavaScript
3.조건문, 반복문, 예외 처리
THINKER TO MAKER
x
조건문
THINKER TO MAKER
상황에 맞는 업무 처리
조건문
조건에 따라 처리를 분기하는 상황에서 사용하는 구조
JavaScript 에서는 if 와 switch 문을 사용함
둘 중 하나를 선택하는 If 명령 복수 중에 하나를 선택하는 Switch 명령
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')
}
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
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');
}
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 N
Y
N
N
Y NY
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);
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]);
}
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
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;
}
}
}
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
예외 처리
THINKER TO MAKER
무 중단 프로그램
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);
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.us
CONTACT.US circulus@circul.us
THINKER TO MAKER
ANY
QUESTION?
x

More Related Content

PDF
2.Startup JavaScript - 연산자
PPTX
Startup JavaScript 6 - 함수, 스코프, 클로저
PPTX
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
PPTX
Startup JavaScript 4 - 객체
PPTX
Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...
PPTX
Javascript 함수(function) 개념, 호출패턴, this, prototype, scope
PDF
[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 1. primitive
PPTX
프론트엔드스터디 E05 js closure oop
2.Startup JavaScript - 연산자
Startup JavaScript 6 - 함수, 스코프, 클로저
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Startup JavaScript 4 - 객체
Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...
Javascript 함수(function) 개념, 호출패턴, this, prototype, scope
[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 1. primitive
프론트엔드스터디 E05 js closure oop

What's hot (20)

PPTX
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
PDF
7가지 동시성 모델 4장
PDF
C++ Concurrency in Action 9-2 Interrupting threads
PPTX
Startup JavaScript 8 - NPM, Express.JS
PDF
Es2015 Simple Overview
PPTX
7가지 동시성 모델 - 3장. 함수형 프로그래밍
PDF
함수적 사고 2장
PPTX
[devil's camp] - 알고리즘 대회와 STL (박인서)
PDF
Javascript 교육자료 pdf
PPTX
javascript02
PPTX
포트폴리오에서 사용한 모던 C++
PPTX
골때리는 자바스크립트 발표자료
PDF
프로그래밍 대회: C++11 이야기
PDF
스위프트 성능 이해하기
PPTX
Javascript introduction, dynamic data type, operator
DOCX
Javascript 완벽 가이드 정리
PPTX
프론트엔드스터디 E04 js function
PPTX
자바스크립트 함수
PDF
[TechDays Korea 2015] 녹슨 C++ 코드에 모던 C++로 기름칠하기
PDF
React로 TDD 쵸큼 맛보기
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
7가지 동시성 모델 4장
C++ Concurrency in Action 9-2 Interrupting threads
Startup JavaScript 8 - NPM, Express.JS
Es2015 Simple Overview
7가지 동시성 모델 - 3장. 함수형 프로그래밍
함수적 사고 2장
[devil's camp] - 알고리즘 대회와 STL (박인서)
Javascript 교육자료 pdf
javascript02
포트폴리오에서 사용한 모던 C++
골때리는 자바스크립트 발표자료
프로그래밍 대회: C++11 이야기
스위프트 성능 이해하기
Javascript introduction, dynamic data type, operator
Javascript 완벽 가이드 정리
프론트엔드스터디 E04 js function
자바스크립트 함수
[TechDays Korea 2015] 녹슨 C++ 코드에 모던 C++로 기름칠하기
React로 TDD 쵸큼 맛보기
Ad

Viewers also liked (16)

PDF
1.Startup JavaScript - 프로그래밍 기초
PPTX
Startup JavaScript 7 - Node.JS 기초
PDF
Personal Interconnect AUdio - piAu manual
PPTX
Startup JavaScript 10 - OpenAPI & RSS 활용
PPTX
Startup JavaScript 9 - Socket.IO 실시간 통신
PPTX
Startup 123D Design - 9. 강아지 모델링
PPTX
Startup 123D Design - 7.물뿌리개 만들기
PPTX
Startup 123D Design - 8.벤치 만들기
PPTX
123D Design - 컵 만들기
PPTX
123D Design - 화분 만들기
PPTX
123D Design - 정리함 만들기
PPTX
123D Design - 전구 디자인 하기
PDF
123D Design - 모델링 기초
PPTX
Startup 123D Design - 10. 3D프린팅
PDF
[WEB UI BASIC] JavaScript 1탄
PDF
Node.js 기본
1.Startup JavaScript - 프로그래밍 기초
Startup JavaScript 7 - Node.JS 기초
Personal Interconnect AUdio - piAu manual
Startup JavaScript 10 - OpenAPI & RSS 활용
Startup JavaScript 9 - Socket.IO 실시간 통신
Startup 123D Design - 9. 강아지 모델링
Startup 123D Design - 7.물뿌리개 만들기
Startup 123D Design - 8.벤치 만들기
123D Design - 컵 만들기
123D Design - 화분 만들기
123D Design - 정리함 만들기
123D Design - 전구 디자인 하기
123D Design - 모델링 기초
Startup 123D Design - 10. 3D프린팅
[WEB UI BASIC] JavaScript 1탄
Node.js 기본
Ad

Similar to Startup JavaScript 3 - 조건문, 반복문, 예외처리 (20)

PDF
Start IoT with JavaScript - 3.제어
PDF
Javascript
PPTX
7.읽기 쉽게 흐름제어 만들기
PDF
[Td 2015]녹슨 c++ 코드에 모던 c++로 기름칠하기(옥찬호)
PDF
[C++ Korea] Effective Modern C++ Study item14 16 +신촌
PDF
EcmaScript6(2015) Overview
PDF
Effective c++ chapter1 2_dcshin
PDF
ES6 for Node.js Study 2주차
PDF
Learning Node Book, Chapter 5
PDF
14장 - 15장 예외처리, 템플릿
PDF
Javascript hoisting
PDF
처음배우는 자바스크립트, 제이쿼리 #1
PDF
HI-ARC PS 101
PDF
[Swift] Closure
PPTX
Multi-thread : producer - consumer
PDF
Why what how kotlin
PPTX
읽기 좋은 코드가 좋은 코드다 Part one
PDF
06장 함수
PPTX
javascript01
PDF
일단 시작하는 코틀린
Start IoT with JavaScript - 3.제어
Javascript
7.읽기 쉽게 흐름제어 만들기
[Td 2015]녹슨 c++ 코드에 모던 c++로 기름칠하기(옥찬호)
[C++ Korea] Effective Modern C++ Study item14 16 +신촌
EcmaScript6(2015) Overview
Effective c++ chapter1 2_dcshin
ES6 for Node.js Study 2주차
Learning Node Book, Chapter 5
14장 - 15장 예외처리, 템플릿
Javascript hoisting
처음배우는 자바스크립트, 제이쿼리 #1
HI-ARC PS 101
[Swift] Closure
Multi-thread : producer - consumer
Why what how kotlin
읽기 좋은 코드가 좋은 코드다 Part one
06장 함수
javascript01
일단 시작하는 코틀린

More from Circulus (10)

PDF
라즈베리파이와자바스크립트로만드는 IoT
PDF
라즈베리파이입문 - 연세대 특강
PDF
123D Design - 스마트폰 케이스 모델링
PDF
JavaScript Everywhere from Mobile and Robot
PDF
piBo- Personal Intelligent roBOt
PDF
웨어러블 디바이스를 활용한 개인용 지능형 로봇
PDF
라즈베리파이 Circulus API 가이드
PDF
라즈베리파이로 IoT 시작하기 복습
PDF
라즈베리파이와 자바스크립트로 IoT 시작하기
PDF
라즈베라파이란 무엇인가?
라즈베리파이와자바스크립트로만드는 IoT
라즈베리파이입문 - 연세대 특강
123D Design - 스마트폰 케이스 모델링
JavaScript Everywhere from Mobile and Robot
piBo- Personal Intelligent roBOt
웨어러블 디바이스를 활용한 개인용 지능형 로봇
라즈베리파이 Circulus API 가이드
라즈베리파이로 IoT 시작하기 복습
라즈베리파이와 자바스크립트로 IoT 시작하기
라즈베라파이란 무엇인가?

Startup JavaScript 3 - 조건문, 반복문, 예외처리

  • 1. Startup JavaScript 3.조건문, 반복문, 예외 처리 THINKER TO MAKER x
  • 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: 처리
  • 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 [email protected] THINKER TO MAKER ANY QUESTION? x

Editor's Notes

  • #2: Circulus 팀 박종건입니다. 위 사진은 작년 창조경제박람회때 포스터 운반하던 파이보의 모습입니다. 파이보와 함께 펼쳐가는 미래를 이야기 하겠습니다.