Javascript, piedad; tengo mujer e hijos :/

Alberto López

@earthlandto

Frontend developer

Frontend ?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Adventure time</title>
    <style>
      body {
        background-color: rgb(201, 113, 80);
      }
      h1 {
        width: 100%;
        margin-top: 3rem;
        color: white;
      }
      div {
        color: yellow;
        font-size: 1.5rem;
      }
    </style>

    <script type="text/javascript">
      function startTime() {
        var now = new Date();
        document.getElementById('time').innerHTML = now;

        setTimeout('startTime()', 500);
      }
    </script>

  </head>

  <body onload="startTime()">
    <h1>JS, piedad; tengo mujer e hijos :/</h1>
    <div id="time"></div>
  </body>

</html>

index.HTML

Why JS?

JS !== Java

Imperative

Interpreted

Untiped and dynamic

Prototype oriented

Alberto

Javascript

Types

Number
String
Boolean
Objects
- Function
- Array
- Date, RegExp, Errors...
```
null
```
```
undefined
```

Creating stuff

var pi = 3 + 0.14;
pi = '3.1416';

var cat; // undefined
cat = 'Suini';

if (0 < cat.length) {
  cat = 'Suini is fat';
} else {
  cat = "Suini is fat anyway";
}

var dogs = ['Zeus', 'Bimba', 'Pati'];
dogs[1];       // 'Bimba'
dogs.length;   // 3

dogs[100] = 'Suini';
dogs.length;   // 101

var numbers = [1, '2', null, [3]];

for (var i = 1; i< 10; i++) {
  console.log(i + ' losers');
};

Arrays

var empty = {};

var guys = {
  hot: {
    sexy: 'Justin Bieber'
  },
  sayHi: function() {
    console.log('Hi Campers');
  },
};

guys['hot'];     // { sexy: 'Justin Bieber' }
guys.hot;        // { sexy: 'Justin Bieber' }
guys.hot.sexy;   // 'Justin Bieber'

guys.sayHi();    // 'Hi Campers'

guys.alicia;     // undefined

Objects

// Function statement
function fun() {
  return true;
};


// Function expression
var fun = function() { // anonymous
  return true;
};

var fun1 = function bar(input){
  if (0 >= input) {
    return true;
  }
  bar(input-1);
};

Functions

Hoisting: moving declarations to the top

console.log( dog() ); // Function does not exist

function dog(){
  return 1;
};

console.log( bigDog() ); // 2

var bigDog = function(){
  return 2;
}

Scope magic!

for(var wolf = 1; wolf < 10; wolf++) {
  //nothing
}

console.log(wolf);  // ???

var dog = 'Bimba'; 

function fun() {
  var dog = 'Zeus';
  console.log(dog);
};

console.log(dog); // ??

fun(); // console.log ??

console.log(dog); // ??

Solution:

const, let

Identity === !==

Equality == !=

(with type conversion)

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

Prototypes

Prototype chain

var obj = {a: 1};
// obj ---> Object.prototype ---> null

// inherits hasOwnProperty from Object.prototype


function fun () {
  return 1;
}
// fun ---> Function.prototype ---> Object.prototype ---> null

// inherit from Function methods like call, bind...
// inherit hasOwnProperty from Object...


var dogs = ['Zeus', 'Bimba', 'Pati'];
// dogs ---> Array.prototype ---> Object.prototype ---> null

// inherit from Array.prototype methods like indexOf, forEach...

function Graph() {
  this.vertex = [];
  this.edges = [];
}

Graph.prototype = {
  addVertex: function(v) {
    this.vertex.push(v);
  }
};

var g = new Graph();
g.addVertex({x: 0, y: 0});

v.edges; // []
v.vertex; // [{x:0, y:0}]

ES2015 provides a class keyword

(syntactical sugar)

No override native prototypes

var camper = {
  year: '2017'
}
var alber = Object.create(camper);
console.log(alber.year); // => 2017



function Camper(name) {
  this.name = name;
}
Camper.prototype.year = '2017'

var alber = new Camper('Alberto');

alber.year // '2017'

alber.__proto__ == Camper.prototype // true

I'm out

Ask me something

slides.com/earthlandto/js-piedad/

Mozilla Developer Network (JS)

JavaScript: The Good Parts

caniuse.com