Introduction to Programming
with JavaScript
Week 3: Control Statements
Jeongbae Oh

YCC JavaScript Seminar

2017.10.30
Flow
• In principle, JavaScript code is executed from
top to bottom.

• Control statement changes the way ("flow")
code is executed.

• Control statement consists of conditionals

(조건문) and loops (반복문).
Conditional
• Conditionals work as "branches" of the flow
according to the specified condition.

• if...else

• switch
• try...catch
if...else
• if...else statement executes specific blocks of code
according to a set of pre-defined conditions.

• First condition can be written: if(condition) { ... }
• Next condition can be written: else if(condition) { ... }
• If there's no next condition: else { ... }
• At the end, any remaining possible conditions go to else

• Since code is executed from top to bottom, conditions need to
be arranged carefully not to be overridden.
if...else
Example of if statement Poorly designed if statement

(condition n === 0 is overridden by n < 1)
switch
• switch is a special form of conditional with definitely
set conditions.

• switch is useful when the conditions are set and will
not be changed. 

(A classical use of switch is days of week)

• A break statement, which stops the control statement,
is necessary at the end of each case to stop the flow.

• default case works similarly as else.

• For each case statement, braces are not used.
switch
• If break statement is not
used, code will continue to
be executed.

• Not using break statement
results in unwanted side
effect (triggering of multiple
cases).
switch
• break can deliberately
omitted to achieve a
special effect or just
make code simpler.

• Unlike if, "order" of
cases is not important.
try...catch
• try...catch is a special form
of conditional that is specifically
used to debug.

• Code inside try will be executed
without raising the error.

• If there is an error, the program
does not end and breaks to
catch.
try...catch
• Argument e is an error object. 

• e.name and e.message can be used to identify the type of error
occurred when the error is not raised by computer.
Program ends due to error raised.
Program continues to run;

error is printed to console manually.
Errors
• In programming, there are three types of errors:

• Syntax error: incorrect syntax (e.g. missing ending parenthesis)

• Semantic error: incorrect usage 

(e.g. using == when === should be used)

• Logic error: incorrect logic

(i.e. wrongly designed code giving unintended results)

• Only syntax error can be detected by interpreter/debugger. Semantic
and logic error must be debugged manually by programmer.
Common Errors
• Common errors that can be
detected by catch statements:

• ReferenceError: 

e.g. undefined variables

• SyntaxError: 

e.g. missing quote

• TypeError: wrong usage of
types
try...catch
• throw is used to
define a custom error
that is not built in to the
JavaScript interpreter.

• finally is used to
finish running the entire
statement even after an
error has occurred.
Loop
• Loops repeats the block of code until
the specified conditions are met.

• while, do...while

• for, for...in
while
• while repeats the code
in the block while the
condition is true.

(i.e. until the condition is
false)
while
• while without proper
ending condition will
result in an infinite loop.

• But it's not a stack
overflow.
do...while
• do...while is similar to
while, except the code is
executed first and the condition
is checked afterwards.

• This ensures that the code will
be executed even when the
ending condition is already met.
for
• for repeats the code in the block for the specified
condition.

• First expression: Starting condition

(Initialize i as 0)

• Second expression: Ending condition

(Continue loop while i is greater than 0)

• Third expression: What to do to starting condition

(After each loop, subtract 1 from i)

• Any variable can be used, but i is most often used.
for...in
• for...in iterates over an object or an array (an "iterable")

• Objects and arrays will be covered in week 4.

Intro to JavaScript - Week 3: Control Statements

  • 1.
    Introduction to Programming withJavaScript Week 3: Control Statements Jeongbae Oh YCC JavaScript Seminar 2017.10.30
  • 2.
    Flow • In principle,JavaScript code is executed from top to bottom. • Control statement changes the way ("flow") code is executed. • Control statement consists of conditionals
 (조건문) and loops (반복문).
  • 3.
    Conditional • Conditionals workas "branches" of the flow according to the specified condition. • if...else • switch • try...catch
  • 4.
    if...else • if...else statementexecutes specific blocks of code according to a set of pre-defined conditions. • First condition can be written: if(condition) { ... } • Next condition can be written: else if(condition) { ... } • If there's no next condition: else { ... } • At the end, any remaining possible conditions go to else • Since code is executed from top to bottom, conditions need to be arranged carefully not to be overridden.
  • 5.
    if...else Example of ifstatement Poorly designed if statement (condition n === 0 is overridden by n < 1)
  • 6.
    switch • switch isa special form of conditional with definitely set conditions. • switch is useful when the conditions are set and will not be changed. 
 (A classical use of switch is days of week) • A break statement, which stops the control statement, is necessary at the end of each case to stop the flow. • default case works similarly as else. • For each case statement, braces are not used.
  • 7.
    switch • If breakstatement is not used, code will continue to be executed. • Not using break statement results in unwanted side effect (triggering of multiple cases).
  • 8.
    switch • break candeliberately omitted to achieve a special effect or just make code simpler. • Unlike if, "order" of cases is not important.
  • 9.
    try...catch • try...catch isa special form of conditional that is specifically used to debug. • Code inside try will be executed without raising the error. • If there is an error, the program does not end and breaks to catch.
  • 10.
    try...catch • Argument eis an error object. • e.name and e.message can be used to identify the type of error occurred when the error is not raised by computer. Program ends due to error raised. Program continues to run; error is printed to console manually.
  • 11.
    Errors • In programming,there are three types of errors: • Syntax error: incorrect syntax (e.g. missing ending parenthesis) • Semantic error: incorrect usage 
 (e.g. using == when === should be used) • Logic error: incorrect logic
 (i.e. wrongly designed code giving unintended results) • Only syntax error can be detected by interpreter/debugger. Semantic and logic error must be debugged manually by programmer.
  • 12.
    Common Errors • Commonerrors that can be detected by catch statements: • ReferenceError: 
 e.g. undefined variables • SyntaxError: 
 e.g. missing quote • TypeError: wrong usage of types
  • 13.
    try...catch • throw isused to define a custom error that is not built in to the JavaScript interpreter. • finally is used to finish running the entire statement even after an error has occurred.
  • 14.
    Loop • Loops repeatsthe block of code until the specified conditions are met. • while, do...while • for, for...in
  • 15.
    while • while repeatsthe code in the block while the condition is true.
 (i.e. until the condition is false)
  • 16.
    while • while withoutproper ending condition will result in an infinite loop. • But it's not a stack overflow.
  • 17.
    do...while • do...while issimilar to while, except the code is executed first and the condition is checked afterwards. • This ensures that the code will be executed even when the ending condition is already met.
  • 18.
    for • for repeatsthe code in the block for the specified condition. • First expression: Starting condition
 (Initialize i as 0) • Second expression: Ending condition
 (Continue loop while i is greater than 0) • Third expression: What to do to starting condition
 (After each loop, subtract 1 from i) • Any variable can be used, but i is most often used.
  • 19.
    for...in • for...in iteratesover an object or an array (an "iterable") • Objects and arrays will be covered in week 4.