04 - Föreläsning - Grundläggande programmering (1DV021)

class: center, middle, lnu-background-yellow

### Grundläggande programmering (1DV021)
        # Föreläsning 4

---

class: lnu-background-cc

### Upphovsrätt för detta verk

Detta verk är framtaget av Mats Loock i anslutning till kursen Grundläggande programmering (1DV021) vid Linnéuniversitetet.

Allt innehåll i detta verk förutom fotografier, ikoner, bild på kurslitteraturen samt Linnéuniversitetets logotyp och symbol,
        är licensierad under en <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
            <img alt="Creative Commons-licens" style="border-width:0;vertical-align:middle" src="https://i.creativecommons.org/l/by/4.0/80x15.png" />
            Creative Commons Erkännande 4.0 Internationell Licens
        </a>.
        #### Du får använda detta verk så här
        - kopiera hela eller delar av innehållet
        - sprida hela eller delar av innehållet
        - visa hela eller delar av innehållet offentligt och digitalt
        - konvertera innehållet till annat format
        - du får även göra om innehållet

Om du förändrar innehållet så ta inte med fotografier, ikoner, bild på kurslitteraturen samt Linnéuniversitetets logotyp och symbol i din nya version!

Vid all användning måste du ange källan: ”Linnéuniversitetet – Grundläggande programmering (1DV021)” och
        en länk till https://coursepress.lnu.se/kurs/grundlaggande-programmering och till Creative Common-licensen här ovan.

---

# Hur hantrera flera värden genom en variabel eller ett returvärde?
        ## Problem

- En variabel kan bara tilldelas ett värde.
            - Vilka alternativ finns det om "flera" värden ska kunna tilldelas en variabel?
        - En funktion kan bara returnera ett värde.
            - Vilka alternativ finns det om "flera" värden ska returneras?

## Lösning

Oavsett om det är "flera" värden som ska tilldelas en variabel eller om en funktion ska returnera "flera" värden är lösningen __EN__ referens till en __array__ eller ett __objekt__, där arrayen eller objektet kan __innehålla flera värden__.

---

# Vad är en array?

<table>
            <thead>
                <tr>
                    <td style="font-size:smaller">värde:  </td>
                    <td style="text-align:center;border: 1px solid gray;width: 3em;"><code>12.6</code></td>
                    <td style="text-align:center;border: 1px solid gray;width: 3em;">18.7</td>
                    <td style="text-align:center;border: 1px solid gray;width: 3em;">9.8</td>
                    <td style="text-align:center;border: 1px solid gray;width: 3em;">13.2</td>
                    <td style="text-align:center;border: 1px solid gray;width: 3em;">14.4</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="font-size:smaller;color:#fc6">index:  </td>
                    <td style="text-align:center;font-size:smaller;;color:#fc6;">0</td>
                    <td style="text-align:center;font-size:smaller;;color:#fc6;">1</td>
                    <td style="text-align:center;font-size:smaller;;color:#fc6;">2</td>
                    <td style="text-align:center;font-size:smaller;;color:#fc6;">3</td>
                    <td style="text-align:center;font-size:smaller;;color:#fc6;">4</td>
                </tr>
            </tbody>
        </table>

- Du kan samla flera värden i en array.
            - En array innehåller element där varje element innehåller ett värde.
            - Med hjälp av index kan du ange vilket element i arrayen du vill hämta ett värde från eller tilldela ett värde.
            - En array har ett s.k. 0-baserat index, d.v.s. första elementet i en array har alltid index 0.
        - Värdena i en array kan vara av olika typer. <span class="text-gray" style="font-size:smaller;">(Bör undvikas! Object lämpligare att använda i så fall.)</span>

<table>
            <thead>
                <tr>
                    <td style="font-size:smaller">värde:  </td>
                    <td style="text-align:center;border: 1px solid gray;">42</td>
                    <td style="text-align:center;border: 1px solid gray;">"är meningen med livet"</td>
                    <td style="text-align:center;border: 1px solid gray;">true</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="font-size:smaller;color:#fc6">index:  </td>
                    <td style="text-align:center;font-size:smaller;;color:#fc6;">0</td>
                    <td style="text-align:center;font-size:smaller;;color:#fc6;">1</td>
                    <td style="text-align:center;font-size:smaller;;color:#fc6;">2</td>
                </tr>
            </tbody>
        </table>

---
    
        # Så skapar du en array
    
        - Arrayliteral - rekommenderat sätt

```
        // En tom array
        const values = []

// En array med tre element
        const cars = ['Volvo', 'Nissan', 'Passat']
        ```
                        
        - Med nyckleordet new - ___inte rekommenderat!___

```
        // En tom array
        const values = new Array()

// En array med tre element
        const cars = new Array('Volvo', 'Nissan', 'Passat') // ['Volvo', 'Nissan', 'Passat']

const numbers = new Array(1, 2, 3, 4, 5)
        numbers[0] // returns 1
        numbers.length // returns 5

const anotherArray = new Array(10) // [undefined, undefined, undefined, ..., undefined]
        anotherArray[0] // returns undefined
        anotherArray.length // returns 10
        ```

---

# Så arbetar du med en array

```
        // Array med fem element.
        const temperatures = [12.6, 18.7, 9.8, 13.2, 14.4]

// Hämta värdet för det fjärde elementet.
        console.log(temperatures[3]) // OUTPUT: 13.2

// Tilldela det andra elementet ett nytt värde.
        temperatures[1] = 4.2

// Antalet element i en array.
        console.log(temperatures.length) // OUTPUT: 5

// Iterera igenom en array från första till sista elementet.
        let output = ''

for (let i = 0; i < temperatures.length; i++) {
            output += temperatures[i] + ' '
        }

console.log(output) // OUTPUT: 12.6 4.2 9.8 13.2 14.4
        ```

.smaller[Se https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array för fler metoder.]

---

# Värdetyper och referenstyper

- Värdetyp (t.ex. Number)

```
        const dogAge = 7
        let catAge

console.log(dogAge) // OUTPUT: 7

catAge = dogAge
        catAge = 3

console.log(catAge) // OUTPUT: 3
        console.log(dogAge) // OUTPUT: 7
        ```

- Referenstyp (t.ex. Array)

```
        const numbers = [5, 8, 7, 1, 6] // tilldelar en konstanten en referens till en array
        let figures

console.log(numbers) // OUTPUT: [ 5, 8, 7, 1, 6 ]

figures = numbers    // kopierar referensen till arrayen till en variabel
        figures[0] = 42      // ändrar det första elementets värde genom att använda kopian av referensen

console.log(figures) // OUTPUT: [ 42, 8, 7, 1, 6 ]
        console.log(numbers) // OUTPUT: [ 42, 8, 7, 1, 6 ], (numbers och figures refererar till samma array!)
        ```

---

# En array som returvärde

```
        /**
         * Returns an array of numbers in the range of 0 to 9.
         *
         * @param count {number} Number of random numbers to randomize.
         * @returns {number[]} An array with random numbers between 0 and 9.
         */
        const getRandomNumbers = function (count) {
            const randomNumbers = []

for (let i = 0; i < count; i++) {
                randomNumbers.push(Math.floor(Math.random() * 10))
            }

// Return reference to the array with count elements.
            return randomNumbers
        };

// Set a variable to refer to the returned array.
        const numbers = getRandomNumbers(5)

console.log(numbers) // OUTPUT: [ 5, 8, 7, 1, 6 ]
        ```

---

# Array som parameter

- Använder du en array som argument kan du få oönskade "sidoeffekter".

```
        const logDoubledUp = function (results) {
            for (let i = 0; i < results.length; i++) {
                results[i] *= 2
            }

console.log(results) // OUTPUT: [ 36, 18, 46, 24, 42, 34 ]
        };

const scores = [18, 9, 23, 12, 21, 17]
        console.log(scores)      // OUTPUT: [ 18, 9, 23, 12, 21, 17 ]

logDoubledUp(scores)
        console.log(scores)      // OUTPUT: [ 36, 18, 46, 24, 42, 34 ]
        ```

- Den globala konstanten `scores` refererar till exakt samma array som parametern `results` gör, varför samma array påverkas oavsett vilken av dem som används.

---

# Arbeta med en modifierad kopia av en array

- Metoden [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) skapar en kopia av en array.

```
        const logDoubledUp = function (results) {
            const copy = results.slice() // skapar en kopia av arrayen results refererar till

for (let i = 0; i < results.length; i++) {
                copy[i] *= 2
            }

console.log(copy) // OUTPUT: [ 36, 18, 46, 24, 42, 34 ]
        }

const scores = [18, 9, 23, 12, 21, 17]
        console.log(scores)   // OUTPUT: [ 18, 9, 23, 12, 21, 17 ]

logDoubledUp(scores)
        console.log(scores)   // OUTPUT: [ 18, 9, 23, 12, 21, 17 ]
        ```

---

# Sortera en array

- Metoden [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sorterar, om ingen sorteringsfunktion anges, genom att först konvertera elementens värden till strängar för att sedan jämföra strängarna (lexografisk sortering).

```
        const values = [2, 42, 10, 1, 8, 24, 4]

values.sort()
        console.log(values) // OUTPUT: [ 1, 10, 2, 24, 4, 42, 8 ], 10 kommer före 2!
        ```

- Genom att ange en sorteringsfunktion i form av ett funktionsuttryck kan en egen sorteringordningen bestämmas.

```
        const values = [2, 42, 10, 1, 8, 24, 4]

values.sort(function (a, b) {
            return a - b
        })

console.log(values) // OUTPUT: [ 1, 2, 4, 8, 10, 24, 42 ]
        ```

---

# Några fler metoder...

- Iterera igenom värden i en array ([`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)).

```
        const values = [2, 1, 8]

values.forEach(function (value) {
            console.log(value)
        });

// OUTPUT: 2
        // OUTPUT: 1
        // OUTPUT: 8
        ```

- Reducera värdena i en array genom att t.ex. summera dem ([`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)).

```
        let sum
        const values = [2, 1, 8]

sum = values.reduce(function (a, b) {
            return a + b
        }, 0)

console.log(sum) // OUTPUT: 11
        ```

---

# Ytterligare några fler metoder...

- Filtrera värden i en array ([`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)).

```
        let filteredValues
        const values = [2, 1, 8]

filteredValues = values.filter(function (a) {
            // Return all even numbers.
            return a % 2 === 0
        });

console.log(filteredValues) // OUTPUT: [ 2, 8 ]
        ```

- Transformera värden i en array ([`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)).

```
        let transformedValues;
        const values = [2, 1, 8]

transformedValues = values.map(function (a) {
            return a * 2
        });

console.log(transformedValues) // OUTPUT:  4, 2, 16
        ``` 
        ---