Semana 2 - Dúvidas

[vitorbritto]

Inicio: 23/02/2014 ~ Fim: 01/03/2014

Instruções: https://github.com/impJS/impAprendaJS/wiki/Semana-2

[leonascimento]

@vitorbritto as dúvidas recorrentes para esta semana 2 deverão ser publicadas em qual link?

[vitorbritto]

@leo386386 aqui mesmo. =]

[leonascimento]

@vitorbritto ok 👍
Uma coisa que achei interessante quando estava testando o delete foi o a forma de acesso as variáveis que desejo deletar. Acesso a variável pode ser com this ou pelo nome da variável. Ex:(delete this.namevar) ou delete nomedavariavel. Aventurando testei sem utilizar o ponto e funcionou perfeitamente o JS reconheceu o this e acessou a variável informada e conseguiu deletá-la(delete thisnamevar).

  var truevar   = 4;
  var fakevar   = 2;
  this.fakevar2 = 3;
  document.write(delete truevar);
  document.write(delete thisfakevar);        
  document.write(delete this.fakevar2);

[leonascimento]

Outro exemplo que achei bem interessante é utilizando o operador &&
o autor fala que em alguns momentos ele tem um comportamento chamado de "short circuiting/curto circuito", e que explora propositalmente esse comportamento para executar condicionalmente alguns códigos.

var a=1,b=1;
if (a == b) alert("teste1"); 
(a == b) && alert("teste2"); 

Engraçado pois na segunda linha com deste script acima ele utilizou uma mistura de condição ternária primeiro verificou e caso a condição seja verdadeira o que está depois do && é executado caso seja false o && funciona como uma espécie de break.
Alguém sabe me explica podemos mesmo codar assim? ou não é recomendado?

[osmarcs]

@leo386386 eu testei aqui o seu código usando delete, então vamos lá:

Acredito por vc ter usando o uma pagina html para testar, e não o console e/ou firebug, vc não percebeu que as variáveis:

var truevar   = 4;
var fakevar   = 2;

Não foram deletada na verdade, somenta a this.fakevar2, pois ela estava associada ao object Window, o método delete e usando para deletar propriedades de objetos. Para mais detalhes leia o artigo recomendado na aula.
http://javascriptissexy.com/javascript-objects-in-detail/

O delete retorna true mesmo para propriedades inexistentes, por isso o document.write deve ter printado true quando vc tirou o "." e deletou variáveis invés de propriedades.

Quando ao dúvida sobre short circuiting:

Bem isso e algo bem comum em programação, caso a fosse diferente b a expressão não continuaria pois faz um teste logico usando &&, e obrigatório q todas as condições sejam true, e a primeira verificação já retorna false não há o porque o continuar testando as demais, e a função não e disparada, quando e bom usar ai já não sei, mas e algo bem legal.

[andersonaap]

var vazio      = "",
    preenchido = "preenchido",
    testeOr    = vazio || preenchido,
    testeAnd   = vazio && preenchido;

console.log("[" + testeOr + "]");  // [preenchido]
console.log("[" + testeAnd + "]"); // []; string vazia

@leo386386 apresar de vazio e preenchido não serem booleanos, eles são booleanáveis.
o que permite uma expressão como vazio || preenchido ser válida em JS.
Outro ponto, é que o retorno desta expressão é um truthy ou falsy (booleanável) e não true ou false. Aliado com a natureza shortcircuit dos operadores, permite fazer vários malabarismos.

Já vi muito o || sendo usado como Null Coalesce Operator

Parece até mais bonito (apesar de que, neste caso, não terem a mesma semântica)
testeOr = vazio || preenchido do que
testeOr = vazio !== "" ? vazio : preenchido.

Acho que o ponto é a legibilidade.

[andersonaap]

PS: booleanável eu tirei da minha cabeça mesmo. Se houver termo melhor comentem...

[vitorbritto]

@andersonaap o termo correto é booleans, e são dados primitivos que retornam valores TRUE ou FALSE.

[andersonaap]

outro legal,
http://stackoverflow.com/questions/2929836/is-there-an-opposite-to-the-null-coalescing-operator-in-any-language

return x && x.y;

[andersonaap]

@vitorbritto thx

[vitorbritto]

Só para ficar claro, tudo em JavaScript tem um valor booleano inerente conhecido Truthy e Falsy.

Os seguintes valores podem ser considerados Falsy:

• false
• 0 (zero)
• "" (string vazia)
• null
• undefined
• NaN (Not-a-Number)

Todos os outros são considerados como truthy, incluindo "0" (zero entre aspas), "false" (false entre aspas), funções vazias, arrays vazios e objetos vazios. =]

[leonascimento]

@osmarcs obrigado por me lembrar que o delete "é utilizado apenas para deletar propriedades e objetos" esse trecho esclareceu tudo eu achava que variáveis também.
A partir de agora vou testar tudo no console mesmo pra não acontecer novamente, o delete retornando true me enganou fiquei pensando que foi deletado. E vlw pelo link eu já tinha visto no repositório do impJS.

Quanto ao short circuiting legal percebi isso obriga o retorno true boa explicação obrigado por esclarecer dúvidas. Sei que são bobas pra vocês que tem um nível legal em JS, mas acho melhor perguntar do que engolir o mosquito e ele ficar voando no pensamento rsrsrr.

[leonascimento]

@andersonaap obrigado por explicar e mostrar semânticas diferentes utilizando o que o autor chama de "short circuiting".
O link do stack dei uma conferida e realmente como você enfatizou podemos fazer malabarismos mesmo. Pra mim novidade ver || sendo utilizados como Null coalescing operator.
Obrigado mesmo por compartilhar o conhecimento de vocês"

[osmarcs]

Algo interessante quando testei a declaração de funções foi o seguinte:

function oi(){
    return {diga: ola};
    // atribuindo a funcao a uma variavel
    var ola = function(){
        console.log('Oi disse ola'); 
    }; 
}

x = oi();
// result = Object {diga: undefined}

Mas quando usamos a instrução de declaração de função :

function oi(){
    return {diga: ola};
    function ola(){
        console.log('Ola disse oi'); 
    };
} 

x = oi();
// result = Object {diga: function}

Provando que as instrução de variáveis são declaras da execução do codigo.

[Expablo]

Dia 27/02,
terminado..
desafio:http://jsbin.com/vazebude/1/edit
codigo aprendido:

text = "pablo é muito legal";

var myName = "pablo";
var hits = [];

for(var i = 0; i < text.length; i++) {
    if (text[i] == "p") {
        for(var j = i; j < (myName.length + i); j++) {
            hits.push(text[j]);
        }
    }
    if(text.length === 0){console.log("Your name wasn'tfound!");
    }else{
        console.log(hits);
        }
}

[leonascimento]

@osmarcs

function oi(){
    // atribuindo a funcao a uma variavel
    var ola = function(){
        console.log('Oi disse ola'); 
    }; 
   return {diga: ola};
}
x = oi(); // Object {diga: function}

[osmarcs]

@leo386386 desse jeito fica normal, mas o que queria mostrar que as functions tem maior precedência na execução do código do que a variáveis.

[fdaciuk]

@osmarcs Na real, o problema acontece por causa da instrução return. Quando o interpretador encontra essa instrução, ele não executa nada que estiver após ela, dentro do escopo da função atual.

Como você está atribuindo a função à uma variável, o código será lido, mas a ação de atribuir não será executada. Por isso ele não reconhece a função.

Já no caso de declarar a função sem atribuir a uma variável, você somente está criando ela, sem efetuar nenhuma ação. Por isso ela vai ser lida será chamada na instrução return, mesmo estando declarada após o return :)

[osmarcs]

@fdaciuk , sim cara eu sei, eu só queria era compartilhar um exemplo, sobre o assunto, não foi uma dúvida, rsrs, mas valew pela prestatividade de vc e do @leo386386.

[fdaciuk]

@osmarcs Ah, tá xD

É que vc postou no tópico de Dúvidas, haha :P

[leonascimento]

@osmarcs @fdaciuk será que meu raciocínio está certo? compreendi que você pode chamar uma função JavaScript antes de declará-la exceto a forma literal que foi mostrado no primeiro exemplo!
Assim a forma literal todos sabemos que a variável recebe uma função. Então rola aquela regra que não podemos invocar ou retornar uma variável antes dela ser declarada. resultando um valor undefined.

[HenriqueSilverio]

@leo386386 se eu entendi bem seu raciocínio, é isso mesmo. Tipo:

Exemplo 1: retorna TypeError pois a váriavel está declarada mais abaixo, então fica "reservada" no programa, mas ainda não tem um valor definido. Esse comportamento é conhecido como Hoisting, o qual foi traduzido no Guia Definitivo como "Içamento". xD

sayHello(); // TypeError: sayHello is not a function

var sayHello = function() {
    console.log('Hello');
};

Exemplo 2: retorna Hello como esperado, pois a função foi declarada antes de ser chamada.

var sayHello = function() {
    console.log('Hello');
};

sayHello(); // Hello

Exemplo 3: retorna Hello pois a função é exposta de forma global.

sayHello(); // Hello

function sayHello() {
    console.log('Hello');
}

É isso mesmo que você quis dizer ou entendi errado? xD

[leonascimento]

@HenriqueSilverio obrigado pela prestatividade e confirmação. Realmente no livro tem o conceito de Hoisting e define que é uma elevação (içamento):. vlw meu brother" 👍

[leonascimento]

Seria uma boa prática utilizar operações ou chamadas de função ou acesso a propriedade de objetos como expressões do case! ou não é aconselhável?

var divisao = function(){
    return 5 * 2 ;
}
var objeto = {
    idade:25    
};
var l = 25;     
switch(l){
    case 2+6:
        alert("bloco 1");
    break;
    case "16"/4:
        alert("bloco 2");
    break;
    case divisao():
        alert("bloco 3");
    break;
    case objeto.idade:
        alert("bloco 4");
    break;
}

"short circuiting"

var a=2,b=2;    
switch((a == b)&& true){
    case true:
        alert("bloco 5");
    break;  
}

[dotpegaso]

Estou lendo o guia em inglês e tive uma certa dificuldade pra entender o uso do construtor RegExps(), alguém poderia me ajudar a entendê-lo melhor?
No capítulo 3.2.4 diz que ele cria objetos com um padrão textual, mas... não entendi muito bem como funciona isso. Usabilidade e tal.

O texto também mostra como exemplo:
/^HTML/ //Match the letters H T M L at the start of a string

Certo, qual o motivo do circunflexo? Os exemplos que vem abaixo dele não o possuem, isso também me deixou bastante confuso.
Tropeçando ali me perdi na explicação dos métodos dele também. :P

[osmarcs]

@dotpegaso quando no livro diz "textual patterns" significa o padrão de texto que a regex vai tentar corresponder(casar), se criar uma regex:

regex = /novo/;

// e testar:
result = regex.test("Ano novo com paz e amor!");

// result vai ser true porque o pattern regex foi encontrado na string testada.

Quanto ao circunflexo ele próprio da expressões regulares, e é usado para dizer que o texto deve começar com aqueles caracteres, caso vc teste só será retornado true se a string comecar com HTML.

[dotpegaso]

@osmarcs Ah, agora entendi! Ele funciona então como um (porcamente falando) "validador de strings" neste caso que você exemplificou né?

Testei aqui no console e vi que realmente, se eu passo uma string dentro de regex.test(" "); que não tenha a palavra "novo" ele retorna false, porém, se eu passar uma com a palavra "novo", ele retorna true. Independente do lugar que essa palavra estiver na string.

Já o circunflexo eu entendi também, fiz o teste aqui e toda frase que eu colocava sem o "novo" estar em seu início, retornava como false.

Já clareou bastante as coisas pra mim, obrigado mesmo bro! (:

[osmarcs]

@leo386386 eu não acho apropriado usar operações ou retorno de funções(principalmente esse), devido a que quando vc tem uma instrução switch..case, vc já considera possíveis resultados para os teste, se nenhum case bater é executado o default.
Operações e funções podem retornar um resultado que deveria ser avaliado apenas em algum case abaixo, e acabar com o fluxo do teste.

Lógico q sempre vão existir exceções que caberão a vc como programador decidir se e a melhor solução. Exemplo disso no jogo pedra, papel e tesoura da CodeAcademy, utilizei um swicth para os testes e para ver se as escolha1 e a escolha2 dois são iguais coloque a escolha2 como valor do case.

Ex: http://goo.gl/DTkhIJ

[leonascimento]

@osmarcs fiz o switch desta forma só por curiosidade. vlw pelo feedback!

[HenriqueSilverio]

@dotpegaso bem interessante sua pergunta, que bom que o @osmarcs conseguiu te ajudar. Vale lembrar também, que o uso de RegExps() é bem mais complexo que isso, e será abordado mais a fundo no capitulo 10 do livro, que é estudado na semana 5 do roteiro.

[dotpegaso]

@HenriqueSilverio Sim sim, o feedback dele foi bem preciso. E imagino que realmente seja mais complexo, vi nos exemplos que dá pra envolver operações também e algumas outras coisas, estarei esperando pela semana 5 então. :P

Bom, sobre os estudos, por conta da faculdade eu infelizmente não consegui terminar o roteiro da semana 2 em tempo... mas vou aproveitar esse feriadão de carnaval pra finalizar tanto ele quanto adiantar bastante o da semana 3 também, que inicia amanhã.

Estou amando o codeAcademy, nunca havia usado. O jeito deles de ensinar é ótimo!