presentasjon.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='content-type' content='text/html charset=utf-8' />
    <title>Introduksjon til JavaScript</title>
    <link href='node_modules/remark-bekk/dist/bekk.css' type='text/css' rel='stylesheet'>
    
    <style type='text/css' media='screen'>

      .jquery { background-color: #1E2837 }

    </style>
  </head>
  <body>
    <textarea id='source'>

class: middle 

## Mens vi venter..

* Klon repoet fra https://github.com/ewendel/js-intro
* Svar på tilbakemeldingskjema for igår: https://is.gd/bootcamp17dag1

---

class: front-page

![](bilder/js.png)

# Dagskurs i JavaScript
## En introduksjon til språket

Erik Wendel
03/08/2016

---

class: split
![Erik](bilder/rsz_erik.jpg)
# Erik Wendel

* NTNU 2012, Kommunikasjonsteknologi
* 5 år i BEKK
* Tidligere: SpareBank1 (4 år), mobil- & nettbank
* Nå: frontend lead på NSB
* Fagleder for Webarkitektur 
* 4 år som bootcampcoach

---

class: middle center

## JavaScript er ...


--

ikke Java

--

vanvittig populært

--

svært nevenyttig

--

fullt av bugs

---

class: agenda

# Dagens agenda

* bakgrunn og historie
* språklig gjennomgang
* kodeoppgaver

---

class: stretch
background-image: url(bilder/time-machine.jpg)

--

class: middle, center
## 1995

---

class: stretch
background-image: url(bilder/1990_stil.jpg)

---

background-image: url(bilder/gangstas_paradise.jpg)

---

background-image: url(bilder/goldeneye.jpg)

---

background-image: url(bilder/waterworld.jpg)

---

background-image: url(bilder/navigator2.png)

class: middle
 ## Netscape Navigator

---

class: split
![](bilder/navigator2.png)

## Netscape Navigator

* av Mosaic (senere Mozilla)
* 1993: versjon 1.0
* 1995: Brendan Eich ansettes
* Mocha 
* -> LiveScript
* Java blir voldsomt populært 
* -> JavaScript

---

# ECMAScript 1

_Mozilla leverer JS til ECMA_

* Juni 1997: ECMAScript standardisert
--

* 1998: ES 2

--

* 1999: ES 3

--

* ~~2004~~: ES 4 blir aldri noe av

--

* 2009: ES 5

--

* 2015: ES 6 (eller ES2015)

--

* 2016: ES 7 (eller ES2016)
* 2017: ES 8 (eller ES2017)

---

background-image: url(bilder/browsers.png)

---

class: center

![Javascript](bilder/engineer.png)

???

Weben har gått fra å levere statiske dokumenter til å bli verdens største, distribuerte applikasjonsplattform.
Det merkes.
JS er ikke egentlig laget for å skrive svære apps, men med tiden har man fått crowbaret til inn på en sjarmerende måte.

Uten JS hadde vi ikke fått til blandet annet... dette

---

class: fullscreen

![Google instant search](https://raw.githubusercontent.com/ewendel/frontend--bilder/master/google.png)

---

class: fullscreen

![Google Maps](https://raw.githubusercontent.com/ewendel/frontend--bilder/master/googlemaps.png)

---

class: middle center

#[Car visualization with Three.js](http://www.carvisualizer.plus360degrees.com/threejs/)

---

class: middle center

#[BananaBread](https://developer.mozilla.org/en-US/demos/detail/bananabread)

---

class: middle center

JavaScript er et programmeringspråk

---

class: middle center

 ... men det har ingenting med Java å gjøre.

---

class: middle center

# JavaScript vs Java

&nbsp
&nbsp
&nbsp

 Dynamisk vs kompilert språk

 Dynamisk vs statisk typing

 Prototypebasert vs klassebasert arv

---

class: agenda

# Dagens pensum

* data og typer
* objekter
* arrays
* funksjoner
* arv og prototyper
* standardbibliotek: Date, Math, Array, String
* ES6: spread, rest, default params, classes, modules

---

class: middle center

# Show me some code!

???

Okei, nok bakgrunnspreik. Det vi skal gjøre nå er å ha en teknisk og syntaxmessig gjennom av JavaScript.
Dette er delt opp i bolker, og på slutten av hver bolk vil det være praktiske oppgaver.

Dersom noen aldri har vært noe borti JS fra før, og kanskje heller ikke andre dynamiske språk, kan dette være serious brainfuck.
SPØR OM HJELP DERSOM NOE ER VANSKELIG! Serr!

---

# Typer i JavaScript

    Number
    Boolean
    String
    Object
    Symbol
    Function
--
    undefined
--
    null
--
    Array
--
    Date
--
    RegExp


---

# Typer i JavaScript

    Number
    Boolean
    String
    Symbol
    Object
        Function
        Array
        Date
        RegExp
    null
    undefined

---


# Variabler, objekter og datatyper

Variabler er typeløse i JS

```javascript
var errorText = "Det har oppstått en feil" // String
var successText = 'Hurra! Alt gikk bra.' // String
```
--
```javascript
var loggedIn = true // Boolean
```
--
```javascript
var authLevel = 2 // Number (heltall)
```
--
```javascript
var interestRate = 2.5 // Number (flyttall)
```
--
```javascript
interestRate = false // endre type
```
--
```javascript
var serviceList = [] // array
```

---

class: middle center

# Nytt i ES6

```javascript
var
let 
const
```

_Kortversjon: alltid const!_

---

# Variabler, objekter og datatyper

```javascript
const errorText = "Det har oppstått en feil" // String
const successText = 'Hurra! Alt gikk bra.' // String

let loggedIn = true // Boolean

let authLevel = 2 Number (heltall)

const interestRate = 2.5 // Number (flyttall)

const serviceList = [] // array
```

---

# Et ord om const


```js
const aList = [1,2,3]
aList.pop()
aList.push('why you not immutable!? :`( ')

const anObject = { age: 17 }
anObject.age = 'FAKE IMMUTABILITY'
```

_Dette tillates fordi referansen er den samme_ 

---

class: middle center

# Number

```javascript
const age = 30
const PI = 3.14
```

_"double-precision 64-bit format IEEE 754 values"_ 

---

class: middle center

# Number

```javascript
0.1 + 0.2 = ?
```

---

class: middle center

# Number

```javascript
0.1 + 0.2 = 0.30000000000000004
```

???

Troll? :D

---

class: middle center

# Number

```javascript
Math.sin(3.5)
Math.PI * (r + r)
parseInt('1852', 10)
parseInt(true) === NaN
true === isNaN(NaN)
1 / 0 = Infinity
-1 / 0 = -Infinity
```

---

class: middle center

# Boolean

```javascript
true
false
```
--
```javascript
(true || false) && false
```
--
```javascript
Boolean('true') // true
Boolean(0) // false
```

---

class: middle center

# Boolean

```javascript
false
null
undefined
0
''
someObject.namee
```
_falsy values_

---

class: middle center

# Boolean

```javascript
if (0) { ... }
```
--
```javascript
if (listOfStuff.length) { ...}
```
--
```javascript
if (person.name) { ...}
// felle! tom streng er falsy
```
---

class: middle center

# String

```javascript
"dobbeltfnutter er lov"
'men bruk helst enkeltfnutter'
// char finnes ikke
```
--
```javascript
'hello'.length // 5
'hello'.charAt(0) // 'h'
'hello, world'.replace('hello', 'goodbye') // 'goodbye, world'
'hello'.toUpperCase() // 'HELLO'
```
--
```javascript
'hello'.split('') // ['h', 'e', 'l', 'l', 'o']
'hello world'.split('lo') // ['hel', ' world']
```
---

class: middle center

# Symbol

```javascript
const COLOR_RED = Symbol('red')
COLOR_RED // Symbol(red)
Symbol('red') === Symbol('red') // false
```
_Brand new!_

---

class: middle center

# null & undefined

--

##### null
_a value that indicates a deliberate non-value_

##### undefined
_indicates an uninitialized value — that is, a value hasn't even been assigned yet_

---

class: middle center

# null & undefined

```javascript
let user = null // loaded asynchronously

config.nonExistantProperty // undefined
```

---

# Optional commas

```javascript
let user = null;
config.nonExistantProperty;
```
_Kodelinjer avsluttes med et komma_

```javascript
let user = null
config.nonExistantProperty
```
_...meeeen du kan godt droppe dem._

_Jeg anbefaler: skip it!_

_(det finnes én felle: viser dere etterpå)_

---

class: middle center

# Object

.. like hashmaps

```javascript
Map<String, String> myMap = new HashMap<String, String>()
```

---

# Object

```javascript
const object = {}

const BEKK = {
    age: '17',
    employees: 414, // <----- trailing comma
}

BEKK.age               // '17'
BEKK['employees']      // 414
BEKK.key3              // undefined

delete BEKK.age
BEKK.age               // undefined
```
_note the commas_

---

# Object

```javascript

const BEKK = {
    tech: {
        boss: 'Jobi Birkeland',
    },
    doWork: function() { ... },
}

BEKK.doWork() // Call the method
BEKK.tech.boss // Nested retrieval
```

---

# Object

## Arrays

```javascript
const arr = [1, 2, 3]
```
---

# Object

## Arrays

```javascript
const arr = [1, 'too', { tree: 3 }]
```

--

```javascript
arr[1] // 'two'
arr[3] = 4
arr.length // 4    
```

_a collection of indexed properties_

---

# Object 

## Arrays

```javascript
cons arr = []
arr.push(4)
arr.includes(4) // true

arr.pop()
arr.includes(4) // false
arr.indexOf(4) // -1
```

_Finnes en del nyttige funksjoner på Array:_

google js mdn array

---

# Object

## Arrays
```javascript
var obj = [1, 2, 3]
obj.speed = 5 // (!)
```
--
```javascript
obj[1]             // 2
obj.speed           // 5
```
--
```javascript
obj.length         // 3
obj[80] = true
obj.length          // 81 ... huh?
```

---

# Object

Iteration: two kinds of loops

```javascript
var obj = [1, 2, 3]
obj.speed = 5
```
--
```javascript
// traditional for-loop: ideal for number-indexed arrays
for (var i = 0 i < obj.length ++i) {
    obj[i]  // 1, 2, 3
}
```
--

```javascript
// for in: ideal for objects
for (var key in obj) {
    obj[key]  // 1, 2, 3, 5
}
```

_Vi bruker svært sjelden løkker i JS, men heller `map`, `filter` og `reduce`

---

# Typer

Vi kan bruke **typeof**-operatoren for å sjekke type.


    typeof {}          // 'object'
--
    typeof []          // 'object'     WTF?
--
    typeof 1           // 'number'
--
    typeof ''          // 'string'
--
    typeof true        // 'boolean'
--
    typeof minVar      // 'undefined'
--
    typeof null        // 'object'     WTF?

---

class: middle center

# Equality

```javascript
1 == 1   // true
1 == '1' // true
1 == 2   // false

// Now things get weird
'' == false       // true
[] == false       // true
null == undefined // true
```

---

class: middle center

# Equality

```javascript
1 === 1 // true
1 === '1' // false
1 === parseInt('1') // true
[] === false // false
null === undefined // false
```

---

class: middle center
# Equality

```javascript
const person = { name: 'David' }
const otherPerson = person
person === { name: 'David' } // -> false, nyskapt objekt
person === otherPerson // -> true, same referanse
```

---

class: middle center
# Reserved keywords

        break case catch continue debugger default delete
        do else export false finally for function if import
        implements in instanceof interface let new null package private
        protected public return static switch throw true
        try typeof var void while with yield this

---

class: middle center

![](bilder/yay.gif)

# Funksjoner

---

class: middle center
# Funksjoner

```javascript
function() {}
```
--
```javascript
function myFunc() {}
const myFunc = function() {}
myFunc()
```

---

class: middle
# Funksjoner

```javascript
function divide(a, b) {
  return a / b
}

let average = divide(10,2)
```
--

```javascript
function doStuff(a, b, c, d, e) { ... }
```
--

```javascript
let recur = function(num) {
  ...
  return recur(num - 1)
}
```
---

# Funksjoner

## Arguments

Alle funksjoner har tilgang til _arguments_:

```javascript
function countArguments() {
  return arguments.length
}

countArguments()              // 0
countArguments('one')         // 1
countArguments('one', 'two')  // 2
```

---

class: middle center
![](bilder/arrow.gif)
# Arrow functions
(ES6)

---

class: middle
# Arrow functions

```javascript
function addOne(x) {
    return x + 1
}

const addOne = x => x + 1
```
--
```javascript
const product = (x,y) => x * y
```
--
```javascript
const modifier = () => 250
```

---

class: middle
# Arrow functions

```javascript
const bigFunc = (x,y,c) => {
    ...
    return someResult
}
```

Multilines require _return_

---

class: middle center
![](bilder/js.png)

# Oppgaver!

Finn filen _oppgaver.html_ og åpne denne i Chrome.

Skriv JS-kode rett i filene fra 01-data-types og utover,
og få testene til å kjøre!.


---

class: middle center
# Funksjoner
## Høyereordens funksjoner

---

# Funksjoner
## Høyereordens funksjoner.

Funksjoner som returnerer andre funksjoner:

```javascript
function createFunction() {
  return function(name) {
    console.log('Hello, ' + name)
  }
}
```
--
```javascript
var sayHello = createFunction()
sayHello('World')  // 'Hello World'
```

---

# Funksjoner
## Høyereordens funksjoner.

Funksjoner som returnerer andre funksjoner:

```javascript
const createFunction = () => {
  return name => console.log('Hello, ' + name)
}

const sayHello = createFunction()
sayHello('World')  // 'Hello World'
```

---

# Funksjoner

## Førsteklasses objekter

Funksjoner kan sendes rundt:

```javascript
function doSomething(arr, callback) {
    for (let i = 0 i < arr.length i++) {
        // do something cool 
    }
    callback() 
}

const myCallback = function() {
    console.log('Ferdig!')
}
doSomething([1,2], myCallback)
```

---

# Funksjoner

```javascript
array.forEach((element, index, array) => {
    console.log(element)    
})
```
--
```javascript
const logStuff = (element, index, array) => {
    console.log(element)    
}
array.forEach(logStuff)
```

---

class: middle center
# Funksjoner

```javascript
array.map
array.filter
array.reduce
```

---

class: middle center
# Funksjoner

```javascript
array.map(x => x*2)
array.filter
array.reduce
```

---

class: middle center
# Funksjoner

```javascript
array.map
array.filter(x => x > 10)
array.reduce
```

---

class: middle center
# Funksjoner

```javascript
array.map
array.filter
array.reduce((acc, current) => acc + current, 0)
```

---
class: middle center
# Funksjoner

```javascript
array
.filter(x => x.age > 18)
.map(x => x.money)
.reduce((acc, current) => acc + current, 0)
```

--

![](bilder/beermoney.gif)
---

# Funksjoner

## Scope

JavaScript har *funksjonscope* - ikke blokkscope

```javascript
function() {
  i  // undefined    WTF?

  for (var i = 0 i < 10 i++) {

  }

  i  // 10
}   
```

---

# Funksjoner

## Scope

Deklarer variabler på toppen av en funksjon!

```javascript
function() {
  var i

  for (i = 0 i < 10 i++) {

  }

  i  // 10
} 
```

---

# Funksjoner

## Scope

Funksjoner har tilgang til alt i ytre scope

```javascript
var a = 1

function doSomething () {
  a  // 1

  function doMore () {
    a  // 1
  }
}       
```

---

# Funksjoner

## Scope

Men ikke motsatt

```javascript
function doSomething () {
  var b = 1

  function doMore () {
    b  // 1
  }
}
doSomething()

b  // ReferenceError
```

---

# Funksjoner

## Scope

Husk var - ellers blir variabelen global!

```javascript
function doSomething () {
  c = 1

  function doMore () {
    c  // 1
  }
}
doSomething()

c  // 1
```

---

# Funksjoner

## Closure

Funksjoner kan binde scope:

```javascript
const counter = function() {
  let i = 0

  return function() {
    return i++
  }
}

const inc = counter()
inc()  // 0
inc()  // 1
```

---

# Funksjoner

## Closure

Funksjoner kan kalles umiddelbart:

```javascript
var inc = function() {
  var i = 0

  return function() {
    return i++
  }
}()  // Note the trailing ()!

inc()  // 0
inc()  // 1
```

---

# Funksjoner

## Closure

Lag moduler med privat tilstand:

```javascript
const lib = {}
lib.module = (function() {

  const privateVariable

  const privateFunction = function() {}

  return {
    publicProperty: 1,
    privilegedMethod: function(arg) {
      // privateVariable = arg
    }
  }

})()
```

---

# Funksjoner
## Konstruktører

Når vi kaller en funksjon med nøkkelordet *new*, blir funksjonen en konstruktør:

```javascript
function Person(name) {
  // this === et nyskapt object

  this.name = name
  // this returneres implisitt
}

const bob = new Person('bob')
const ed = new Person('ed')

ed.name = 'fred'
```

---

# Funksjoner

## Konstruktør

Ooops!

```javascript
function Person(name) {
  this.name = name
}

var bob = Person('bob')
var ed = new Person('ed')

window.name === 'bob'  // true    WTF?
```

---

class: middle center
![](bilder/context.gif)
# Context
## _this_ i JavaScript

---

class: middle center
# Context

_Tommelfingerregelen: this = window_
```javascript
// Første huskeregel:
object.method() // this = object
```
--
```javascript
// Andre huskeregel: konstruktører
const honda = new Car()
```
--
```javascript
// Tredje huskeregel: call, apply og bind
myFunction(1,2) // window
myFunction.call(object, 1, 2) // object
myFunction.apply(object, [1,2]) // object

newFunc = myFunction.bind(object)
newFunc(1,2)
```
---

class: middle center
# Context

call og apply lar deg kalle funksjoner med selvvalgt kontekst

bind lar deg skape nye funksjoner med låst kontekst

---

class: middle center
![](bilder/arv.jpg)
# Arv

---

class: middle center
# Arv

```javascript  
'hello'.length // 5
'hello'.charAt(0) // 'h'
'hello, world'.replace('hello', 'goodbye') // 'goodbye, world'
'hello'.toUpperCase() // 'HELLO'
'hello'.split('') // ['h', 'e', 'l', 'l', 'o']
myFunction.call()
myFunction.apply()
(25.0000004).toFixed(2)
```

---

class: middle center

![](bilder/blueprint.jpg)
# Prototype

---

class: middle center

![](bilder/prototype.png)
# Prototype

---

```javascript
  /**
   * Injects an ordering of plugins (by plugin name). This allows the ordering
   * to be decoupled from injection of the actual plugins so that ordering is
   * always deterministic regardless of packaging, on-the-fly injection, etc.
   *
   * @param {array} InjectedEventPluginOrder
   * @internal
   * @see {EventPluginHub.injection.injectEventPluginOrder}
   */
  injectEventPluginOrder: function (InjectedEventPluginOrder) {
    !!EventPluginOrder ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.') : _prodInvariant('101') : void 0
    // Clone the ordering so it cannot be dynamically mutated.
    EventPluginOrder = Array.prototype.slice.call(InjectedEventPluginOrder)
    recomputePluginOrdering()
  }
```

---

# Arv

_Prototyper kan utvides_


```javascript
String.prototype.log = function() {
    console.log('Logged string: ' + String(this))
}

var navn = 'Erik Wendel'
navn.log() // 'Logged string: Erik Wendel'
```
--
```javascript
if (!Array.prototype.filter) {
  Array.prototype.filter = function() { ... }
}
```

---

class: middle center
# Prototype Chain
![](bilder/protochain.png)

---

# Arv

```javascript
var Person = function(navn, stilling, firma) {
    this.navn = navn
    this.stilling = stilling
    this.firma = firma
    this.hils = function() {
        console.log('Hei, jeg heter ' + this.navn)
    }
}
```

---

# Arv 

```javascript
var Person = function(navn, stilling, firma) {
    this.navn = navn
    this.stilling = stilling
    this.firma = firma
    this.hils = function() {
        console.log('Hei, jeg heter ' + this.navn)
    }
}

var pat = new Person('Pat', 'postmann', 'Posten')
var nils_arne = new Person('Nils Arne', 'trener', 'Rosenborg')
```

---

# Arv 

```javascript
var Person = function(navn, stilling, firma) {
    this.navn = navn
    this.stilling = stilling
    this.firma = firma
    this.hils = function() {
        console.log('Hei, jeg heter ' + this.navn)
    }
}

var pat = new Person('Pat', 'postmann', 'Posten')
var nils_arne = new Person('Nils Arne', 'trener', 'Rosenborg')

pat.hils() // 'Hei, jeg heter Pat'
```

---

# Arv 

```javascript
var Person = function(navn, stilling, firma) {
    this.navn = navn
    this.stilling = stilling
    this.firma = firma
}

var pat = new Person('Pat', 'postmann', 'Posten')
var nils_arne = new Person('Nils Arne', 'trener', 'Rosenborg')
```

---

# Arv 

```javascript
var Person = function(navn, stilling, firma) {
    this.navn = navn
    this.stilling = stilling
    this.firma = firma
}

var pat = new Person('Pat', 'postmann', 'Posten')
var nils_arne = new Person('Nils Arne', 'trener', 'Rosenborg')

Person.prototype.hils = function() {
    console.log('Hei, jeg heter ' + this.navn)
}
```

---

# Arv 

```javascript
var Person = function(navn, stilling, firma) {
    this.navn = navn
    this.stilling = stilling
    this.firma = firma
}

var pat = new Person('Pat', 'postmann', 'Posten')
var nils_arne = new Person('Nils Arne', 'trener', 'Rosenborg')

Person.prototype.hils = function() {
    console.log('Hei, jeg heter ' + this.navn)
}

nils_arne.hils() // 'Hei, jeg heter Nils Arne'
pat.hils() // 'Hei, jeg heter Pat'
```

---

# Arv 

```javascript
var Person = function(navn, stilling, firma) {
    this.navn = navn
    this.stilling = stilling
    this.firma = firma
}

var pat = new Person('Pat', 'postmann', 'Posten')
var nils_arne = new Person('Nils Arne', 'trener', 'Rosenborg')

Person.prototype.hils = function() {
    console.log('Hei, jeg heter ' + this.navn)
}

nils_arne.hils() // 'Hei, jeg heter Nils Arne'
pat.hils() // 'Hei, jeg heter Pat'

pat.katt = 'Miss' 
```

---

# Arv 

```javascript
var Person = function(navn, stilling, firma) {
    this.navn = navn
    this.stilling = stilling
    this.firma = firma
}

var pat = new Person('Pat', 'postmann', 'Posten')
var nils_arne = new Person('Nils Arne', 'trener', 'Rosenborg')

Person.prototype.hils = function() {
    console.log('Hei, jeg heter ' + this.navn)
}

nils_arne.hils() // 'Hei, jeg heter Nils Arne'
pat.hils() // 'Hei, jeg heter Pat'

pat.katt = 'Miss' 

console.log(pat.katt) // 'Miss'
console.log(per.katt) // undefined   
```

---

class: middle center
![](bilder/js.png)
# Oppgaver!

Fortsett der dere slapp i _oppgaver.html_

---

class: middle center
![](bilder/babel.png)
# EcmaScript 6
.. eller ES6, eller ES2015

---

class: agenda

# Agenda

* Arrow functions (ok)
* ES6 Modules
* Template literals
* Default params
* Destructuring
* Rest parameters
* Spread operator
* Classes
* Promises
* Map & Set

---

# Modules

```javascript
import React from 'react'
import { formatAccountNumber } from './sparebank1-utils'
```
--
```javascript
const React = {
    createComponent: function() { ... },
    ...
}

export default React
```
--
```javascript
export function formatAccountNumber(accNo) {
    ...
}
```

---
class: middle center
# Template literals

_... finally_

```javascript
'hello ' + name + '!'
`hello ${name}!`
```

---

class: middle 
# Default parameters

```javascript
function hello(who='World') {
    return 'Hello ' + who + '!'
}
```

---

class: middle 
# Default parameters

```javascript
function loadUser(userId = throwError()) {
    ...
}
```

---

class: middle center
# Destructuring

når du kun vil ha deler av et objekt eller array

---

# Destructuring

```javascript
const config = {
    url: 'https://...',
    timeout: 100,
    ...
}

// A

const { url, timeout } = config

// B

const url = config.url
const timeout = config.timeout
```

---

# Destructuring

--
```javascript
function(options) {
    const { url, timeout } = options
}
```
--
```javascript
function({ url, options }) {
    
}

const func = ({ url, options }) => { ... }
```

---

# Array destructuring

```javascript
const temperatureHistory = [20.9, 22.2, 21.4, 21.0, 20.1, 20.2, 19.5, 19.2]

const [mostRecent, secondMostRecent] = temperatureHistory
```
--
```javascript
const [oldest, ...allButOldest] = temperatureHistory.reverse()
```

---

# Rest params

```javascript
function(first, second, third, ...rest) { ... }
```
--
```javascript
function sum(...numbers) {
    return numbers.reduce((x,y) => x+y, 0)
}
```

---

# Spread operator

"sprer" arrayelementer utover

```javascript
const arr1 = [1,2,3]
const arr2 = [2,3,4]

const combined = [...arr1, arr2]
```
--
```javascript
const params = [1,2,3,4,5]
sum(...params)

function sum(a,b,c,d,e) { ... }
```

---

# Classes

```javascript
class Animal {
    constructor(color) {
        this.color = color
    }
}

class Doge extends Animal {
    constructor(color, race) {
        super(color)
        this.race = race
    }
    bark() {
        return 'Woof!'
    }
}

let charlie = new Doge('black', 'dobermann')
```

---

class: middle center
# Promises

_ekte, native promises_

---

class: middle center
# Map & Set

```javascript
var mySet = new Set()

mySet.add(1)

mySet.has(1) // true
mySet.size // 4
mySet.delete(5) // removes 5 from the set
```

---

class: middle center
![]()
# Oppgaver!

Fortsett der dere slapp i _oppgaver.html_

---

class: split

![](bilder/road.jpg)
# JS-Veien videre

* Frontendkurs: 2 dager
    * HTML
    * CSS
    * DOM + jQuery
    * React + Redux
* Læring på prosjekt
* Egen kompetansebygging
* 2017: Fire faggrupper
    * Frontendprogrammet
    * Design Engineering
    * Innovative Grensesnitt
    * Webarkitektur

---

class: split
![](bilder/road.jpg)

# Hva som rører seg i JS-verden

* Mye rammeverk de siste årene

--

* React og Redux en slags bransjestandard

--

* Typet JS (TypeScript og Flow) stadig mer populært, og nesten en nødvendighet

--

* Compile-to-js språk som Elm vokser raskt

--

* BEKK har en egen Elm-satsning

--

* 4 sommerprosjekter med Elm i 2017

--

* Et par BEKK-prosjekter med Elm


---

class: split center middle
## Eloquent JavaScript

_Marijn Haverbeke_

Introduksjon til JavaScript

![](bilder/eloquent.png)

---

class: split center middle
## JavaScript Allongé

_Reginald Braithwaite_

Funksjonell programmering i JavaScript

![](bilder/allonge.jpeg)

---

class: split center middle
## Exploring ES6

_Dr. Axel Rauschmeyer_

Omfattende dypdykk i ES6

![](bilder/exploringjs.jpg)

---

class: split center middle
## JavaScript: The Good Parts

_Douglas Crockford_

Gammel klassiker

![](bilder/goodparts.jpg)

---

class: middle center
# Takk!

@ewndl


    </textarea>

    <script src='node_modules/remark-bekk/vendor/remark.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
      var slideshow = remark.create({
        ratio: '16:9',
        highlightStyle: 'monokai'
      })
    </script>
  </body>
</html>