JavaScript-Concepts/arrow_functions.html at master · kipchirchiralb/JavaScript-Concepts · 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <style>
        * {
            padding: 20px;
            line-height: 1.5rem;
        }

        strong,
        em {
            padding: 0;
        }
    </style>
    <title>Arrow Functions</title>
</head>

<body>
    <h1>Arrow Functions</h1>

    <table>
        <thead>
            <tr>
                <th colspan="2">Differences between arrow functions and clasical functions</th>
            </tr>
            <tr>
                <th>Classical functions</th>
                <th>Arrow functions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>The <em>this</em> keyword is bound to different values based on the <strong>context</strong> in which the function is called. <br> Context here refers to the object that calls the function . <br> by using js bound() , call() or apply()
                    you can alter context within which a functon is executed, changing the meaning of <em>this</em> inside of that function when it is executed. <br> You could also create a a variable say "self" and assign it to <em>this</em> . This variable
                    is in the <strong>lexical scope</strong> of the callback function. </td>
                <td>arrow functions use the value of <em>this</em> in their <strong>lexical scope</strong>. <br> Scope contains all variables visible to a function where is is defined. <br> Arrow functions solve the <strong>context</strong> problem in classical
                    functions by introducing the lexical scope automatically. This means it just uses the value of this in the surrounding code block. It doesn’t care what calls it, it just cares where it was defined. <br></td>
            </tr>
            <tr>
                <th colspan="2">Function expressions are best for object methods. Arrow functions are best for callbacks or methods like map, reduce, or forEach.</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>

    </table>

    <script>
        //normal function
        function sum(a, b) {
            return a + b
        }
        //arrow function
        const add = (x, y) => {
                return x + y
            }
            //both functions(add and sum) work the same way
        console.log(sum(2, 3))
        console.log(add(2, 3))

        /*
        * WHY USE ARROW FUNCTIONS?
        * If you only have one parameter , you can leave out the parenthesis around the parameter
        * Arrow functons support implicit returns. This means that if you only have one line in your function which is returning something , you can put it on one line without the return statement.
        *  Anonymous Arrow Functions - here you can leave out the entire name and variable declaration of thefunction, making anonymous functions much cleaner.
        * Arrow function Scoping - in a normal function a the "this" keyword is scoped based the context of where the function is called. With Arrow functions, the scope of "this" keyword is based on where the function is defined just like in other programming languages. I am confused a little but let me take a deeper dive.

        */

        //single parameter
        const isPositive = number => {
            return number >= 0
        }

        console.log(isPositive(-1))

        //implicit return

        const randomNumber = () => Math.floor(Math.random() * 10)

        console.log(randomNumber())
            //anonymus arrow function
        document.addEventListener("click", () => {
            let letters = "0123456789ABCDEF"
            let color = "#"
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)]
            }
            document.body.style.backgroundColor = color
        })

        //semi-anonymous arrow functions
        document.addEventListener("click", (e) => {
            let x = e.clientX
            let y = e.clientY
            let currentCollor = getComputedStyle(document.body).getPropertyValue("background-color")
                //is it posible to name these colors? are there names to all colors? or if there is a name to the randomly chosen color, can you print it out instead of the rgb code? Or just try to covert the rgb to hex and or vice versa
            console.log(`You clicked point(${x}, ${y}) on the document, current color is ${currentCollor} `)
        })

        //Arrow function scoping
        class Person {
            constructor(name) {
                this.name = name
            }

            printNameArrow() {
                setTimeout(() => {
                    console.log(`Arrow: ${this.name}`)
                }, 100)
            }

            printNameFunction() {
                setTimeout(function() {
                    console.log(`Function: ${this.name}`)
                }, 100)
            }
        }
        //now lets create an object person of class Person with
        const person = new Person("Albert")
        person.printNameArrow() //albert
        person.printNameFunction() // nothing
    </script>

</body>

</html>