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’);

if (a && a === ‘someString’) { 
        console.log(1); 
    } else if (a || b) { 
        console.log(2); 
    } else if ((c + 5) < 10 ) { 
        console.log(3); 
    } else { 
        console.log(4);
    }
</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>

---

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

---

# if/else vs switch vs ternary

[Performance test](https://jsperf.com/if-else-vs-arrays-vs-switch-vs-ternary)<br/><br/>

![Alt text](../assets/img/if_else_vs_arrays_vs_switch_vs_ternary.jpg)

---

# 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 name = prompt("Who are you?"); 
    } while (!name);

console.log(name);
</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
</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); //10
</pre>

---

# for vs while vs do/while

[Performance test](https://jsperf.com/while-vs-for-queue)<br/><br/>

![Alt text](../assets/img/while_vs_for.jpg)

---

class: center, middle

##Thanks
##The end