Variáveis variáveis em JavaScript

Publicado por Marcelino Janing em 01/12/2008

[ Hits: 19.895 ]

0 0

Denuncie Favoritos Indicar Impressora

Variáveis variáveis em JavaScript

Similarmente como acontece no PHP, também podemos fazer uso de variáveis dinâmicas em códigos JavaScript. Entretanto a notação e a dinâmica em JavaScript difere-se do PHP de várias maneiras, mas atinge o mesmo objetivo com perfeição.

Em JavaScript podemos ter acesso ao conteúdo de uma variável dinamicamente, para isto basta usarmos a função eval() assim:

eval('variavelx'); // Esta função retorna exatamente o conteúdo da variável variavelx

Se quisermos instanciar uma variável dinamicamente, devemos passar para eval uma expressão de atribuição, assim:

eval('variavelx = "Conteúdo será atribuído a variável"');

Logicamente as expressões acima representam constantes fixas no código fonte, mas considere que os trechos da expressão podem ser compostos de outras variáveis. Agora estamos falando de variáveis variáveis em JavaScript!

Vamos ao programa exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Variáveis Variáveis em JavaScript</title>

<script language="javascript">
// Criando uma variável normal, mas com conteúdo vazio
var varnormal = '';
// Criando uma variável normal, mas contendo o nome de uma variável normal
var vardinamica = 'varnormal';

// Imprimindo o conteúdo string das variáveis normalmente
document.write('<hr> varnormal contém: ' + varnormal); // Imprime varnomal contém:
document.write('<hr> vardinamica contém: ' + vardinamica); // Imprime vardinamica contém: varnormal

// Carregando um conteúdo a uma variável normal usando o conteúdo de uma outra variável como variável.
eval(vardinamica + '= "Esta é uma variável normal que armazena um conteúdo"');

// Imprimindo o conteúdo da variável varnormal, que foi criada vazia, mas carregada dinamicamente.
document.write('<hr> varnormal contém: ' + varnormal); // Imprime varnormal contém: Esta é uma variável normal que armazena um conteúdo

// Observe que eval recebe uma única expressão string para instanciar o conteúdo de uma variável dinamicamente.
// Note que toda a expressão esta protegida por SINGLE QUOTES (aspas simples) e que o conteúdo está novamente protegido por DOUBLE QUOTES (aspas duplas)
vardinamica = 'varnormal = "Esta é a expressão string que eval recebe"';
// Aqui acontece a mágica, a expressão contida em vardinamica vai na verdade carregar o conteúdo em varnormal
eval(vardinamica);
// Vamos ver agora o conteúdo de varnormal
document.write('<hr> varnormal contém: ' + varnormal); // Imprime varnormal contém: Esta é a expressão string que eval recebe

// Lembrando que a variável a ser instanciada não precisa necessariamente ter sido criada explicitamente via comando var
// É possível criar múltiplas variáveis diversas a qualquer momento.
// Carregando um nome de variável em vardinamica
vardinamica = 'vardin';
// Carregando um conteúdo qualquer em varconteudo
// Note que o conteúdo não está protegido por DOUBLE QUOTES (aspas duplas), pois o mesmo é numérico e não necessita desta proteção.
varconteudo = '=12345.6789';

// Evaluando a expressão sendo vardinamica o prefixo, mais um sufixo qualquer, e em seguida um conteúdo, neste caso contido em varconteudo
// No final das contas a string passada para eval() é exatamente a expressão como você declara uma variável JS.
eval(vardinamica + '1' + varconteudo);
eval(vardinamica + 'A' + varconteudo);
eval(vardinamica + 'B' + varconteudo);
eval(vardinamica + 'C' + varconteudo);
eval(vardinamica + 'ABCDF' + varconteudo);

// Imprimindo as variáveis que foram criadas dinamicamente
// Relembrando que estas variáveis não foram criadas anteriormente usando atribuição direta e/ou notação var do JavaScript.
document.write('<hr> vardin1 contém: ' + vardin1); // Imprime vardin1 contém: 12345.6789
document.write('<hr> vardinA contém: ' + vardinA); // Imprime vardinA contém: 12345.6789
document.write('<hr> vardinB contém: ' + vardinB); // Imprime vardinB contém: 12345.6789
document.write('<hr> vardinC contém: ' + vardinC); // Imprime vardinC contém: 12345.6789
document.write('<hr> vardinABCDF contém: ' + vardinABCDF); // Imprime vardinABCDF contém: 12345.6789

// Quer mais? Também podemos simular o comportamento de decomposição de variáveis do PHP o qual usa múltiplos cifrões $$$$$
// Entretanto em JavaScript utilizamos múltiplos comandos eval(eval(eval(...))) encadeados.

// Vamos criar algumas variáveis que contém nomes de variáveis
vardinamicaX = 'vardinamicaY';
vardinamicaY = 'vardinamicaZ';
vardinamicaZ = 'vardinamicaX';
// Vamos preparar agora um conteúdo alfanumérico para carga dinâmica
varconteudo = '="Aqui temos outro conteúdo alfanumérico"';
// Aqui acontece o processo de busca recursiva do conteúdos das variáveis
eval(eval(eval(eval(eval(vardinamicaX))))+varconteudo);
// Imprimindo o resultado após a atribuição
document.write('<hr> vardinamicaX contém: ' + vardinamicaX); // Imprime vardinamicaX contém: vardinamicaY
document.write('<hr> vardinamicaY contém: ' + vardinamicaY); // Imprime vardinamicaY contém: vardinamicaZ
document.write('<hr> vardinamicaZ contém: ' + vardinamicaZ); // Imprime vardinamicaZ contém: Aqui temos outro conteúdo alfanumérico

// Explicando o exemplo
// Nós preparamos 5 funções eval() em cadeia, mas somente a função mais externa possui a atribuição de conteúdo a variável.
// É bom explicarmos que a função mais externa é a primeira na sequência de escrita, mas será a última na sequência de processamento.
// Isto porque com as múltiplas funções encadeadas, a prioridade de execução é o laço mais interno; simples como matemática.

// Então vamos Evaluar as expressões recursivamente do laço mais interno para o mais externo
// 5o. laço eval(vardinamicaX) -> retorna para o 4o. laço o conteúdo 'vardinamicaY'
// 4o. laço eval('vardinamicaY') -> retorna para o 3o. laço o conteúdo 'vardinamicaZ'
// 3o. laço eval('vardinamicaZ') -> retorna para o 2o. laço o conteúdo 'vardinamicaX'
// 2o. laço eval('vardinamicaX') -> retorna para o 1o. laço o conteúdo 'vardinamicaY'
// 1o. laço eval('vardinamicaZ'+'="Aqui temos outro conteúdo alfanumérico"') -> realiza a atribuição de varconteudo para vardinamicaZ

// Confuso???
// Vamos relembrar que no início do artigo explicamos que ao executarmos a função eval(vardinamicaX) ela retorna o seu próprio conteúdo, isto porque a expressão
// contida em vardinamicaX é o nome de uma variável existente, e como não existe nenhuma operação em si o eval() retornará o próprio conteúdo da variável.

// Também, para que não criemos um paradigma sobre o que realmente é a função eval() de JavaScript, é importante ressaltarmos que
// a função eval() executa uma instrução em JavaScript; ou melhor ainda, a função eval() executa múltiplas instruções JavaScript em cadeia,
// basta que as instruções estejam separadas por um SEMI-COLUMN (ponto e vírgula).
var alertEmCadeia = 'alert("Primeiro Alert em Cadeia!"); alert("Segundo Alert em Cadeia!")';
// Executando os comandos em cadeia... Você terá que clicar no OK do Alert para o programa prosseguir até o final
eval(alertEmCadeia);

</script>

</head>

<body>
<hr />Bom divertimento!
</body>
</html>

Diferentemente do PHP, em JavaScript não existe um processo de decomposição das variáveis através de um ponteiramento dinâmico.

O que na verdade é feito é a execução de uma expressão JavaScript, que no caso de variáveis dinâmicas será uma expressão de atribuição.

Mesmo assim é útil fazermos esta comparação com PHP, pois apesar das técnicas serem diferentes a funcionalidade é muito similar e pode ser útil em casos onde seja necessário reescrever uma rotina PHP em códigos JavaScript mantendo os mesmos princípios, funcionalidades, e comportamentos.

Até a próxima!

Outras dicas deste autor

Variáveis variáveis em PHP

Desfazendo o dual boot

Leitura recomendada

Fullscreen com jQuery e CSS

Criando variáveis dinamicamente com Javascript

Extensões (Webmaster) do Firefox

HTML - Forçar a abertura de todos os links em uma nova janela

Netflix no Firefox (Debian) - Error: Request mediaKeySystem access rejected: EME has been preffed off [Resolvido]

Comentários

Nenhum comentário foi encontrado.