fenrir-codeup-web-exercises/arrowFunctions101.html at main · CodeupClassroom/fenrir-codeup-web-exercises · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>=></title>
</head>
<body>

<h1>Let's look at arrow functions (open console, ref script tag)</h1>

<script>
    // Examples of arrow function syntax:
    //
    // () => expression
    //
    // param => expression
    //
    // (param) => expression
    //
    // (param1, paramN) => expression
    //
    // () => {
    //     statements
    // }
    //
    // param => {
    //     statements
    // }
    //
    // (param1, paramN) => {
    //     statements
    // }


    // Side by side comparisons:

    //Expression (not multiple lines)
    let helloLog = function(){
        console.log("Hello - no arrows here");
    }

    let helloLogArrows = () => console.log("Hello - arrows here");

    console.log(`~~expression logs below:`);
    helloLog();
    helloLogArrows();

    //Statements (multiple lines)

    let helloHelloLog = function(){
        console.log("Hello no arrows please");
        console.log("Hello again - plz. . plz no arrows!");
    }

    let helloHelloLogArrows = () => {
        console.log("Hello - love me some arrows!");
        console.log("Arrows here for me too!");
    }

    console.log("~~statement logs below:");
    helloHelloLog();
    helloHelloLogArrows();

    //Param(s) + Expression
    let helloNameLog = function(name){
        console.log(`Hello hello, ${name} hates arrows`);
    }

    let helloNameLogArrows = (name) => console.log(`${name} is a big fan of arrows!`);

    console.log(`~~single param + expression below`);
    helloNameLog("a guard from Whiterun");
    helloNameLogArrows("Cupid");

    let combineNamesLog = function(firstName, lastName){
        console.log(`${firstName + ' ' + lastName} is arrow free`);
    }

    let combineNamesLogArrow = (firstName, lastName) =>  console.log(`${firstName + ' ' + lastName} is riddled with arrows - ouch!`);

    console.log(`~~multi params + expression below`);
    combineNamesLog("Arrowfree", "McMann");
    combineNamesLogArrow("Albert", "Arrowlover");

    //Param(s) + Statements
    let tacoBoutItLog = function(tacoType){
        if(tacoType.includes("puffy taco")){
            console.log(`${tacoType}? puro san antonio`);
        } else {
        console.log(`${tacoType}? Sounds good`);
        }
    }

    let tacoBoutItLogArrow = (tacoType) => {
        if(tacoType.includes("puffy taco")){
            console.log(`${tacoType}? puro san antonio`);
        } else {
            console.log(`${tacoType}? Sounds good`);
        }
    }

    console.log(`~~param plus stmt below`);
    tacoBoutItLog("chicken puffy taco");
    tacoBoutItLogArrow("crispy tacos");

</script>
</body>
</html>