Espero que você tenha sido um bom nerd em 2010 e tenha aprendido JavaScript. Agora, vamos rebater com uma taça de vinho ao lado da lareira e revisar o que você aprendeu. 

Objetos

Quase tudo em JavaScript é um objeto, mas não existem classes. Uma maneira de definir um objeto é simplesmente listar as propriedades que você quer que o objeto tenha, separá-las por vírgulas e envolvê-las em colchetes ondulados:

var calendar = { 
  name: "PHP Advent", 
  year: 2010 
};

Esse simples objeto não tem nenhum método e se parece mais com uma matriz associativa do PHP. Na verdade, o JavaScript não tem matrizes associativas e usa objetos em seu lugar. Para criar um objeto semelhante no PHP, você pode converter uma matriz em um objeto:

$calendar = (object) array( 
  name => 'PHP Advent', 
  year => 2010 
);

Simples, não? Nenhuma classe à vista. Objetos não são nada mais do que matrizes elaboradas. Elaboradas porque alguns elementos da matriz são invocáveis, e nós os chamaremos de métodos.

Uma outra abordagem para criar objetos é começar com um objeto "vazio".

var calendar = {};

Isso é exatamente como $calendar = new stdClass(); em PHP. Em JS, você pode também fazer var calendar = new Object(); mas isso é apenas um exercício de digitação.

Você pode adicionar outras coisas (propriedades e métodos) pelo caminho:

calendar.name = "PHP Advent"; 
calendar.year = 2010; 
calendar.say = function () { 
  return this.name + ' ' + this.year; 
};

Como você pode ver, o JavaScript usa . em vez de -> para acessar propriedades e métodos.

calendar.say(); // returns "PHP Advent 2010"

Posso ter classes?

Não existem classes no JavaScript, mas se você realmente sente falta delas, existem as constructor functions.

function Calendar(year) { 
  this.name = "PHP Advent"; 
  this.year = year; 
  this.say = function () { 
    return this.name + ' ' + this.year; 
  }; 
}

Constructor functions são funções normais, mas quando chamadas com new, elas retornam como objetos.

var thisyear = new Calendar(2010), 
    lastyear = new Calendar(2009); 
thisyear.say(); // "PHP Advent 2010"

O equivalente em PHP seria algo como:

class Calendar { 
  public $name = 'PHP Advent'; 
  public $year; 

  function __construct($year) { 
    $this->year = $year; 
  } 

  function say() { 
    return $this->name . ' ' . $this->year; 
  } 
} 

$thisyear = new Calendar(2010); 
$lastyear = new Calendar(2009); 

echo $thisyear->say(); // "PHP Advent 2010"

Constructor functions versus funções normais

A maneira como você define uma constructor function no JavaScript é a mesma que você usa para uma função normal. A diferença é a invocação. Quando chamada com new, uma função sempre retorna como objeto. Se você não fizer nada de especial, o objeto referido por ela será retornado.

alert(typeof new Calendar()); // "object"

Quando chamadas sem new, as funções retornam para onde quer que a declaração de retorno esteja no corpo da função. Se não existe um retorno explícito, a função vai retornar o value undefined especial.

alert(typeof Calendar()); // "undefined"

Com o objetivo de distinguir a intenção de uma função ao ler um código, existe uma convenção generalizada de nomear as constructor functions com a primeira letra em caixa alta.

function MyConstructor() {} 
function myFunction() {}

Funções são objetos

No JavaScript, em que a maioria das coisas são objetos, funções são objetos também. Eles podem (e têm) propriedades e métodos. Você provavelmente vai ver funções definidas com var, desta maneira:

var sum = function (a, b) { 
    return a + b; 
};

Agora, olhe isto aqui:

alert(sum.length); // 2

O que é isso? Nós acessamos a propriedade length do sum do objeto. Objetos de função têm uma propriedade length que contém o número de parâmetros que eles aguardam (mas não os imponha, já que todos os parâmetros têm um valor padrão indefinido), nesse caso, dois: a e b.

Prototype

Funções são objetos, e eles automaticamente geram uma propriedade chamada prototype. Essa propriedade é usada quando um objeto é criado utilizando uma constructor function. O prototype também é um objeto (surpresa, surpresa).

function Calendar(year) { 
  this.year = year; 
} 

Calendar.prototype.name = "PHP Advent"; 

Calendar.prototype.say = function () { 
  return this.name + ' ' + this.year; 
}; 

var thisyear = new Calendar(2010); 
thisyear.say(); // "PHP Advent 2010"

Aqui, nós temos um comportamento que é muito parecido com o antigo constructor Calendar que criamos. O Objeto thisyear tem acesso a say() como se fosse seu próprio método, mas ele aparece transparentemente via prototype.

Como as propriedades adicionadas ao PROTOTYPE são compartilhadas e reutilizadas entre todos os objetos calendar, este é o lugar para colocar todas as peças de funcionalidade reusáveis. É uma prática comum colocar todos os métodos aqui.

Prototypes também disponibilizam maneiras de implementar o código reuse (inheritance).

Você provavelmente irá notar que eu disse objetos "vazios" no início deste artigo. Eu os adicionei porque não existe algo como um objeto em branco. Todos os objetos vêm com alguns métodos e propriedades pré-existentes, herdadas da prototype chain.

Funções anônimas

Muitas vezes, você precisa de uma função one-off que não precisa de nome, ou funções que você pretende passar para outras funções como callbacks. Você pode usar funções anônimas nesses casos.

No JavaScript, existe apenas uma função scope - qualquer variável definida que não seja a fonte é um global. Isso não é, obviamente, desejado, porque mais globals significam um maior risco de colisões de nomes.

Um padrão comum para reduzir o número de variáveis temporárias dispersas por aí é envolver peças de código independentes em uma immediate function, o que significa uma função anônima que é executada imediatamente.  

// Alerts 3 and leaves no leftover variables. 
(function () { 

  var a = 1, 
      b = 2; 

  alert(a + b); 

}());

No PHP, funções anônimas têm estado disponíveis desde o lançamento da versão 5.3, e você pode invocá-las com call_user_func(), então o equivalente seria: 

call_user_func(function() { 
  $a = 1; 
  $b = 2; 
  echo $a + $b; 
}); 

Ou no PHP, antes do 5.3:

call_user_func(create_function('', 
  '$a = 1; 
   $b = 2; 
   echo $a + $b;' 
));

Arrays

Arrays são simplesmente listas de valor delimitadas por vírgulas envolvidas por colchetes.

var dudes = ['Ilia', 'Andrei', 'Derick']; 
alert(dudes[2]); // "Derick" 

// Ou, se você quiser digitar mais:
var dudes = new Array('Ilia', 'Andrei', 'Derick'); 

No PHP, isso é igual:

$dudes = array('Ilia', 'Andrei', 'Derick'); 
echo $dudes[2]; // "Derick"

Mas eis que Arrays são objetos também, então, em vez de passar o Array para uma função para conseguir o seu tamanho, você pode acessar sua propriedade length. 

// JS 
alert(dudes.length); // 3 

// PHP 
echo count($dudes); // 3

Pushes, pops e diversos flip-flops também compartilham um comportamento similar no PHP e no JavaScript.

// JS 
dudes.pop(); // returns "Derick" 
dudes.toString(); // "Ilia,Andrei" 
dudes.push('Rasmus'); // returns 3, the new size 
dudes.toString(); // "Ilia,Andrei,Rasmus" 

// PHP 
array_pop($dudes);  
echo implode(',', $dudes); 
array_push($dudes, 'Rasmus'); 
echo implode(',', $dudes); 

A sintaxe preguiçosa e conveniente do PHP para anexar a um Array ($dudes[] = 'Ben';) não está disponível em JavaScript. Você precisa saber o tamanho ou conhecer o Array (para saber o índice do último elemento), para que você possa usar

 dudes[dudes.length] = 'Ben'; 

// dudes.push('Ben') é grosseiramente equivalente ao append operator do PHP. 

O mplode() e o explode() do PHP se transformam em join() e split() no JavaScript.

// PHP 
$a = explode(',', '1,2,3'); 
echo implode(', then ', $a); // "1, then 2, then 3" 

// JS 
var a = "1,2,3".split(','); 
alert(a.join(', then ')); // "1, then 2, then 3"

Strings

Não existe nada muito excitante sobre strings, a não ser - você adivinhou - que strings são objetos também. Bem, tecnicamente, existe uma diferença entre um string object e uma primitive string, mas estas últimas são convertidas para objetos quando necessário, então não há necessidade de se preocupar com os detalhes. 

// string object 
var so = new String('Crocodile'); 
alert(typeof s); // "object" 

// primitive string 
var sp = 'Alligator'; 
alert(typeof s); // "string" 

// But, primitives do behave like objects. 
alert("dude".length); // 4

Assim como com Arrays, todas as suas funções de manipulações favoritas de string se tornam uma variedade de métodos. 

// JS 
var s = "PHP Advent"; 
alert(s.substring(6)); // "vent" 
alert(s.replace(' ', 'eeee')); // "PHPeeeeAdvent" 
alert(s.replace(' ', 'eeee').substring(0, 7)); // "PHPeeee" 

// PHP 
$s = 'PHP Advent'; 
print(substr($s, 6)); // "vent" 
print(str_replace(' ', 'eeee', $s)); // "PHPeeeeAdvent" 
print(substr(str_replace(' ', 'eeee', $s), 0, 7)); // "PHPeeee"

Callbacks

O último tópico antes de encerrarmos, callback functions. Elas ilustram dois dos conceitos que já falamos aqui, funções e Arrays.

Uma maneira legal de criar funções e métodos reutilizáveis é fazer com que eles aceitem outras funções como parâmetros, que são conhecidas como callback functions.

Um bom exemplo para isso está no método sort() de objetos de Arrays no JavaScript. Esse método aceita um callback assim como o usort() no PHP.

No JavaScript, se você quiser uma classificação numérica, precisa disponibilizar um callback; não existe nenhuma flag como sort() no PHP.

// JS 
var a = [2, 1, 30, 15]; 
a.sort(); // "1, 15, 2, 30", not what you expect 

// PHP 
$a = array(2, 1, 30, 15); 
sort($a); // "1, 2, 15, 30", a.k.a., the right thing 

// PHP like JS 
$a = array(2, 1, 30, 15); 
sort($a, SORT_STRING); // "1, 15, 2, 30"

Quer uma classificação numérica? Passe uma callback function:

// anonymous callback 
var a = [2, 1, 30, 15]; 
a.sort(function (a, b) { 
    return (a > b) ? 1 : -1; 
}); 
// "1, 2, 15, 30" 

//Ou forneça uma função existente como callback. 
var a = [2, 1, 30, 15]; 

function numsort(a, b) { 
  return (a > b) ? 1 : -1; 
} 

a.sort(numsort); // "1, 2, 15, 30"

Se você fosse fazer o mesmo tipo de callback no PHP (não que você precise fazer para classificação numérica, mas é uma ilustração), você pode fornecer também um callback anônimo ou uma função existente:

// anonymous callback (PHP 5.3) 
$a = array(2, 1, 30, 15); 
usort($a, function ($a, $b) { 
  return ($a > $b) ? 1 : -1; 
}); 

// existing function as a callback (PHP 4+) 
$a = array(2, 1, 30, 15); 

function numsort ($a, $b) { 
  return ($a > $b) ? 1 : -1; 
}; 

usort($a, 'numsort');

Finalizando

JavaScript e PHP são bastante similares; eles compartilham a sintaxe C-likex, com colchetes ondulados, funções, ifs, for loops, &c. Mesmo assim, o JavaScript tem algumas especificidades, como:

• sem classes
• a maioria das coisas são objetos, incluindo arrays e strings
• funções são objetos
• funções fornecem um scoping variável
• constructor functions
• prototypes

Na maioria das vezes, quando as pessoas dizem que odeiam JavaScript, elas querem dizer que elas odeiam os DOM APIs bugados e inconsistentes fornecidos pelos browsers. Despido, o JavaScript (ou ECMAScript) é uma linguagenzinha linda, como diriam alguns, que vale a pena aprender. Ela não tem o excelente manual que tem o PHP, com todas as imensuráveis notas dos usuários (e quem tem?), mas existe uma referência do Mozilla para seu prazeroso bookmarking.

Esta é para as horas felizes "JavaScriptando" em 2011!

⁂

Texto original disponível em http://phpadvent.org/2010/javascript-for-php-developers-by-stoyan-stefanov