Javascript

O que todo desenvolvedor Javascript precisa saber

js

O título é quase um spoiler, mas saber de tudo é um tanto quanto convexo, já que o Javascript, embora padronizado no ECMAScrpit, ele segue vários caminhos e vários players, se fosse colocar em comparação à algo que você conheça não existe nada melhor que dizer: “É caneta para todo papel”.

Brincadeiras à parte, Javascript muda da água para o vinho dependendo onde ele é executado, no Chrome é de uma forma, no Firefox é de outra, No IE ele é uma hidra, no servidor ele é um bom moço, fora novas implementações como o DART, Coffescript e por ai vai.

De Janeiro para cá o que deu para lembrar eu fui juntando e guardando em minha lista de snipets, e resolvi publicar aqui para vocês guardarem e sempre consultarem quando for possível.

Me baseei em algumas coisas interessantes que eu achei sobre a linguagem, a melhor forma de aprender é tentar criar seu próprio framework.

Tipos

O Javascript é um PHP da vida, começa como String e terminar como Boolean, ele possui 9 tipos de variáveis possíveis de serem adotadas.

null – Nulo ou vazio. Semelhante ao Actionscript 3.0

undefined – Indefinido no Actionscript 3.0 seria NaN

string – String é isso em todo lugar, diferente do Java, aqui tanto faz você declarar com aspas simples ou dupla.

number – Igual no Actionscript, tudo aqui é tratado como Float e a grande vantagem é que a biblioteca Math do JS é semelhante ao AS3.0

boolean – Semelhante em qualquer linguagem de programação ( True ou False)

Array – Pode ser declarado como new Array() ou simplesmente [], semelhante ao AS3.0. Tem suporte à Multi-dimencional e várias APIs que implementam o Array Tipado. Ainda estão tentando implementar e definir isso de uma vez por todas.

Object– Igual no AS3.0,C#, Java, pode ser declarado como new Object(); ou pode ser criado de forma literal

     // new
     obj = new Object();
     // ou semelhante
     obj.title="Hello World";
     obj = {title:"Hello"};

E na hora que for verificar o tipo, por exemplo você recebe uma mensagem do servidor 1 // Numero e quer saber se é Boolean, geralmente você faria.

 
var resposta = true;
    resposta == typeof Boolean;
    // false
 
var itens = [1,2];
itens == typeof Array;
// false

O certo mesmo seria você usar o construtor

 
  resposta.constructor == Boolean;
// true

É bizarro isso, o que seria para ajudar, acaba é estragando tudo, mais bizarro é quando você pede por exemplo para definir o tipo.

 
typeof [1,2]; // Object ao invés de Array;
typeof typeof; // Saiba como destruir o firefox de alguém com isso, o Chrome dá erro de sintaxe
typeof null; // Object Essa ai é de matar

Function – Igual em toda linguagem de programação, função é função no mundo de pandora ou nas terras do senhor dos anéis, no JS ela pode ser sua maior amiga e pior amiga, é ai onde entra o problema e faz muita gente odiar o Javascript, a Mayara amiga minha detesta o JS justamente por desconhecer essas particularidades dele, espero que ela esteja lendo esse post.

Por que Functions é tudo isso?

Por que por padrão retornará sempre undefined se você não especificar o retorno, e a palavra [highlight bg=”#ff999d” color=”#ffffff”]this[/highlight] que você tanto se refere ao escopo da função pode ser considerada tanto Global (window) ou local do objeto que ela foi chamada e nunca pertencente ao escopo da função em sí.

Ex: O paraíso

 
function imprima (){
return "Hello World";
}
imprima();
 
// lazy 
var echo = function(){ return echo};
echo() === echo // retorna true;
 
// Como objeto
var somar = new Function("a","b","return a + b");
somar(15,15); // 30
 
// Pegar argumentos da forma tradicional
 
var multiplica = function(){return arguments[0]*arguments[1]};
multiplica(5,5);
// 25

Continuando com Functions, ela possui dois métodos um tanto intrigantes que tem o mesmo funcionamento, [highlight bg=”#ff999d” color=”#ffffff”]call()[/highlight] e [highlight bg=”#ff999d” color=”#ffffff”]apply()[/highlight]

var operacao = function(){ switch(arguments[0]){ case 'somar': return arguments[1]+arguments[2];break}};
 
operacao.call(this,'somar',1,3);
// 4
operacao.apply(this,['somar',1,3]);
// 4

A única diferença é que um você precisa colocar em array no caso do Apply e o outro é literal, é meio louco isso, embora você não viu nem a metade.

Passagem de parametros com valor padrão definido

Imagine você congelado no tempo sem saber por que raios ele não funciona com parametros pre-definidos.

 
var nasceu = function (resposta){ return resposta !== undefined ? resposta + ', finalmente decidiu' : "Decide ai"};
nasceu(); // "Decide ai"
nasceu('SIM'); // SIM, finalmente decidiu;
 
<pre>
 
<h3>Operadores</h3>
 
Ah, É cilada bino! Nesse ponto, aquele primeiro argumento de comparação faz você xingar a mãe <a href="http://en.wikipedia.org/wiki/Brendan_Eich" target="_blank">do cara</a> que fez o Javascript, por quê?
 
<pre lang="javascript">
true == 1// true
true == '1'//true
'1' == 1 // true
undefined == null // true
false == 0 // true
false == '' // true
'' == 0 // true

Especialmente quando você usa esse tipo de comparação em uma resposta de uma chamada Ajax, Deus! Como eu já perdi tempo fazendo isso. Embora a W3C insiste em ensinar errado, eu prefiro que você use as opções:

true === 1 // false
true === 0 // false
 
// usem o equivalente !== para não igual e %== para módulo

Verificando a qualidade do seu Javascript

Só existe um de respeito, e esse é o JSLint, não adianta você querer me convencer que existam outros para medir sua qualidade de código, o JSLint é fenômeno e faz o que promete de uma maneira direta e simples, te ajuda a corrigir erros bizarros que você não nota no dia-a-dia.

Testando o código de forma unitária

Nesse quesito, Jasmine é a resposta, se você espera que seu código retorne 5 e ele retorna 10, então ele vai te mostrar um erro, e a essência do Jasmine é bem simples para implementar.

Cada um em seu quadrado

O Javascript sofre a cada mudança do ECMAScript e atualmente na versão 1.8.6 faz com que a linguagem ganhe inimigos, por achar que é complexo, o fato é que a cada nova release essa quebra de padrão de uma versão anterior ou nova maneira de fazer alguma coisa que era mais simples na anterior, tira o sono de muita gente. Só que eu acho o seguinte, toda linguagem precisa de evolução, vai dizer que tu sabia o que era Tchu Tcha em 1999?

Essa fragmentação da linguagem é de lascar, da 1.5 até a 1.8.x fez muita gente adotar o JQuery como ponto de partida ou o Javascript.NET, justamente para não ter que lhe dar com tanta diferença de um navegador para outro, e essa é uma briga que nunca acabará, por que todos querem uma fatia dos usuários conectados, Browsers ainda são a janela da Internet.

Conheça os recursos

Fonte de material MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript)
Fonte de material de primeira (http://stackoverflow.com/questions/tagged/javascript)
Refresh no Javascript (http://typedarray.org/javascript-refresh/)
Melhor overview já feito, na minha opinião (http://en.wikipedia.org/wiki/JavaScript)

11 thoughts on “O que todo desenvolvedor Javascript precisa saber

  1. Igor, mt bom seu post!
    Acompanho seu trabalho desde qnd o Flex era da adobe, e gostaria de perguntar se vc acha que num futuro próximo vai existir um mercado melhor para programadores javascript.

    Pergunto pois ainda não vi uma descrição de vaga como “Precisa-se de programador Javascript sênior”, como estamos acostumados a ver com outras linguagens.

    Eu acredito 100% no Javascript, quando conheci o Angular pude observar o grande poder que tem o Javascript. Invisto todo meu tempo livre em Javascript, seja frameworks, peculiaridades da linguagem, ou qualquer coisa relacionada. E assim como eu, devem existir muitos outros.

    Sei que é complicado, mas vc é um cara experiente. E gostaria de saber sua opinião.

    Abraços!

    • Oi Walter

      Dificilmente você verá algo como “Precisa-se de programador Javascript”, em geral você encontra hoje bastante “Senior Front-end”, Javascript pelas terras tupiniquins, está atrelado ainda ao fato de vagas como “Web designer”.

      No futuro bem próximo, digo meses começará a aparecer vagas do tipo com o título bem específico.

  2. O uso do operador estrito de (des)igualdade e não usar typeof é uma recomendação que deveria ser lei! Realmente evita muitos problemas.
    Acho que não ficou claro para o pessoal que em JavaScript NaN e undefined são coisas diferentes, acho que você poderia explicar isso.
    O Jasmine se popularizou muito no Brasil, não é? Mas eu prefiro o Mocha+Chai, para usar também do lado de um servidor Node.js.

    • Exato André, acho que foi o sono que me fez enganchar nessa parte, NaN é igual como no AS3 ( Not a Number), e undefined na verdade seria o equivalente a -1 no AS3 ou null.

  3. Caro Igor,

    Gostei muito do seu blog e farei questão de acompanhá-lo, porém tenho que dar pitacos nessa sua análise um tanto superficial.
    Existem erros grotescos em vários pontos e só citarei alguns aqui:
    – O Javascript não sofre a cada mudança do ECMA. Muitos pelo contrário, apenas adicionam mais recursos à linguagem;
    – A jQuery não serve para mitigar possíveis erros de coificação entre as versões do ECMA, mas sim fornecer interfaces que funcionem entre os diferentes navegadores.

    Para começar a entender esse universo do “front-end”, comece a ler artigos de pessoas como Nicholas Zakas, Douglas Crockford ou Brendam Eich.

    Infelizmente, analisei sua API e achei fantástica, mas a qualidade do código é fraca, pois falta patterns e um conhecimento mais profundo de certos paradigmas do JS. Mas como você mesmo disse neste artigo, está fazendo essa API para aprender mais sobre o JS.

    Só peço que tome cuidado quanto ao conteúdo dos posts quando não há informação suficiente sobre o assunto, pois como possível formador de opinião, isso pode ser perigoso e acabar desinformando, o que é a contra proposta do blog.

    Comecei a colocar alguns projetos de minha autoria no Github, dá uma passada lá e veja. ^^

    https://github.com/myfingersarebroken/aer

    Forte abraço,

    • Fernando

      Muito obrigado pela sua análise adjetiva ao conteúdo e de fato é importante ter um retorno verdadeiro daquilo que escrevemos.

      Para mim tem sido um aprendizado entrar no mundo de Javascript, mais para entender como a linguagem em um todo se comporta em diferentes aspectos de apresentação e atribuição.

      O ECMAScript é bem especificado e muita coisa é semelhante ao Actionscript, linguagem que programei por mais de uma década, hoje fadada ao descaso.

      Adorei seu comentário e obrigado por ser forte, só assim consigo construir um pensamento mais forte sobre a linguagem.

      Obrigado por ser um novo leitor no blog.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *