Javascript The good, bad and ugly parts

Fabian CarlosMeoappProspecta-me

Uma linguagem

confusa e subestimada

Você pode fazer uma aplicação

web, mobile e desktop em Javascript.

Particularidades

● Não tem classes apenas objetos

● Notação literal de objetos

● boolean, number e string

● null e undefined

Partes ruins

● Programação baseadas em variáveis globais

● + para adição e concatenação

● Escopo estranho

● == e !=

Descobrindo os tipos

typeof "Douglas Crockford" // "string"

typeof 1999 // "number"

typeof {} // "object"

typeof [1,2,3,4,5] // "object" ???

typeof null // "object" ???

typeof NaN // "object" ???

É igual?

'' == '0' // false

0 == '0' // true

0 == '0' // true

false == 'false' // false

false == '0' // true

false == 0 // true

false == undefined // false

false == null // false

null == undefined // true

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

Agora sim é igual!

'' === '0' // false

0 === '0' // false

0 === '0' // false

false === 'false' // false

false === '0' // false

false === 0 // false

false === undefined // false

false === null // false

null === undefined // false

" \t\r\n\ " === 0 // false

Números

0.1 + 0.2 === 0.3 // false ???

0.1 + 0.2 == 0.3 // false ???

// 0.1 + 0.2 -> 0.30000000000000004

Números

● Number 64-bit floating point ● Semelhante a Double em Java

Hoisting

● As variáveis dentro de uma função, irão agir como se tivessem sido declaradas no topo da função.

meu_var = "global";

function func(){console.log(meu_var); // undefined, o mesmo que var my_name = undefined;var meu_var = "local";console.log(meu_var); // local

}func();

Parecia uma boa ideia, só que não

● Omitir ponto e virgula● Blocos sem chaves● false, null, undefined, NaN e Infinity

Onde usar ponto e virgula

// Não precisa de ponto e virgulaif (...) {...} else {...}for (...) {...}while (...) {...}

// Precisa de ponto e virgulavar x = 1;var fun = function() {...};var obj = {};

Blocos sem chaves

if (true) console.log("OK");else console.log("OK TOO");

Blocos com chaves

if (true){ console.log("OK");}else{ console.log("OK TOO");

}

Onde colocar a chave

if (true) { console.log("OK");}

if (true) { console.log("OK");}

Onde colocar a chave

function cosmos(){ return { name: "Carl sagan" }}

Onde colocar a chave

function cosmos(){ return undefined; { name: "Carl sagan" }}

Onde colocar a chave

function cosmos(){ return { name: "Carl sagan" }}

Partes boas

● Tipificação fraca.

● Objetos dinâmicos.

● Declaração de objetos literais.

Tipificação fraca

var nome = "Nicolas Tesla";var idade = 43;var peso = 75.7;var cientista = true;

console.log(nome); // "Nicolas Tesla"console.log(idade); // 43console.log(peso); // 75.7console.log(cientista); // true

Objetos dinâmicos

var data = { 'one': 1, 'two': 2, 'three': 3};

data["four"] = 4;

console.log(data.four); // 4console.log(data["four"]); // 4

Objetos literais

var pessoa_literal = { init: function (nome) { this.nome = nome; }};

var pessoa_literal = pessoa_literal;pessoa_literal.nome = "Neil Tyson'"

var pessoa_literal_2 = pessoa_literal;pessoa_literal_2.nome = "Carl Sagan";

console.log(pessoa_literal.nome); // "Carl Sagan"console.log(pessoa_literal_2.nome); // "Carl Sagan"

Objetos construtores

function PessoaConstrutor(nome) { this.nome = nome;} var pessoa_construtor = new PessoaConstrutor('Neil Tyson');var outra_construtor = new PessoaConstrutor('Carl Sagan');

console.log(pessoa_construtor.nome); // "Neil Tyson"console.log(outra_construtor.nome); // "Carl Sagan'"

Novas boas partes em ES6

● let

● Arrow Functions ou Fat Arrows.

● Default Arguments.

● Template Strings.

Let

● Não existe o comportamento de hoisting.

let cientista = true;

if (cientista) { let nome = 'Neil Tyson'; console.log(nome); // 'Neil Tyson'}

Arrow Functions

// Convencional

var soma = function(x, y) {

return x + y;

};

// ES6

var soma = (x, y) => x + y;

soma(5, 5); // 10

Default arguments

// CoffeeScriptcientista = (nome = "Carl Sagan") -> console.log(nome)

// ES6var cientista = function(nome = "Carl Sagan") { console.log(nome);}

Template Strings

var old_cosmos = "Carl Sagan"

var new_cosmos = "Neil deGrasse Tyson"

` Cosmos, é uma série americana de documentário científico. É uma continuação da série de 1980, que foi apresentada por ${old_cosmos}. O apresentador da nova série é o físico ${new_cosmos}.

`

The best is yet to come