Control flow

class: center, middle

.title[
Front-end training
# Control flow
]

---

# Conditional execution

In conditional execution  we choose between two different routes based on a boolean value.

<div id="conditional_execution"  markdown="1">
    ![conditional_execution](../assets/img/conditional_execution.jpeg)
</div>
Conditional execution is written with the if keyword in JavaScript. In the simple case, we just want some code to be executed if, and only if, a certain condition holds.

---

# if

<pre class="brush: jscript">
    if ([expression]) {
        [statement]
    }

var a = 10; 
    if (a > 3) { 
        console.log(‘it is true’) 
    }

// Bad style, always use braces
    if (a > 5) console.log(‘it is true’);

var user = false;
    if (user) {
        console.log(‘hello dear user’);
    } else {
        console.log(‘please signIn’);
    }
</pre>

---

# if. Always use braces!

<pre class="brush: jscript">
    var i = 1,
        j = 1,
        k = 2;

// developer doesn't use braces
    if (i == j)
        if (j == k)
            alert("i is the same as k");
    else
        alert("i isn't the same as j");

// as a result, code works wrong
    if (i == j) {
        if (j == k) {
            alert("i is the same as k");
        }
        else {
            alert("i isn't the same as j"); // OOPS!
        }
    }
</pre>

---

# if, without if

<pre class="brush: jscript">
    var i = 1,
        j = 5,
        result;

// bad approach, try to avoid it
    if (i != j) {
        result = true;
    } else {
        result = false;
    }

// the same, but easier
    result = i != j;
</pre>

---

# Ternary

var salary = 90000,
        reaction = '';

// To define reaction we can use simple if statement
    if (salary > 50000) {
        reaction = 'Not bad!';
    } else {
        reaction = 'WTF?!!';
    }

// But I'd rather use this one
    reaction = a > 50000 ? 'Not bad!' : 'WTF?!!';

</pre>

---

# else if 
Use the else if statement to specify a new condition if the first condition is false.

<pre class="brush: jscript">   
    if(city === "Lviv"){
       console.log("Hi Lviv")
    } else if (city === "Kiev"){
        console.log("Hi Kiev")
    } else if(city === "Ternopil") {
         console.log("Hi Ternopil")
    } else {
         console.log("Hi Unknown city")
    }
    
</pre>

---

# switch

<pre class="brush: jscript">
    switch (city) {
        case "Lviv" :
            console.log("Hi Lviv");
            break;
        case "Kiev" :
            console.log("Hi Kiev");
            break;
        case "Ternopil" :
            console.log("Hi Ternopil");
            break;
        default:
            console.log("Hi Unknown city");
            break; 
    }
    
</pre>
You may put any number of case labels inside the block opened by switch. The program will jump to the label that corresponds to the value that switchwas given, or to default if no matching value is found.

---

# while

<pre class="brush: jscript">
    var i = 0; 
    while (i < 10) {  
        console.log(i);  
        i++; 
    } 
    console.log(i);
</pre>

---

# do while

<pre class="brush: jscript">
    var i = 0; 
    do {  
        console.log(i);  
        i++; 
    } while (i < 10)

do {  
        var userName = prompt("Who are you?"); 
    } while (!userName);

console.log(userName);
</pre>

---

# for

<pre class="brush: jscript">
    for ([initialization]; [test]; [increment]){ 
        [statement] 
    }

// the most common use
    for (var i = 0; i < 10; i++) { 
        console.log(i); 
    }

console.log(i); //10
    
    
    for (let i = 0; i < 10; i++) { 
        console.log(i); 
    }

console.log(i); //error

</pre>

---

# Fun with for

<pre class="brush: jscript">
    // we can move initialization
    var i = 0;

for (; i < 10; i++) { 
        console.log(i); 
    }

// we can move increment
    for (; --i;) { 
        console.log(i); 
    }

// finally we can remove everything
    for (;;) {
        if (i == 0) {
            console.log(i);
            break;
        }
    }

</pre>

---

# break and continue

<pre class="brush: jscript">
    for (var i = 0; i < 10; i++) {

console.log(i);

if(i % 2 == 0) { 
            continue; 
        } 
        console.log(i); 
        if(i == 9) { 
            break; 
        }
    }   
    console.log(i); //9
</pre>

---

class: center, middle

##Thanks
##The end