5 Surprises for PHP Developers Coming to JavaScript

Unique features concealed within familiar syntax

PHP programmers often see the familiar C-like syntax of JavaScript and think it’s all flowers and roses. And while trivialities like loops and conditions are pretty much equivalent in both languages, things get very weird very quickly. Let’s take a look at the top 5 marvels JavaScript has to offer to the unsuspecting PHP veteran.

1. Functions are objects

Consider a function:

It looks familiar, the only apparent difference being the missing $ to denote variables. But it turns out there’s more than that. The function sum() is actually an object. That means it can have properties and methods.

Something like:

… may come as a surprise. In this case length property of the sum object gives you the number of arguments this function expects.

And you’re not limited by built-in properties; you can assign any properties you like to the sum object. For example you can have a cache property that stores the results of previous (potentially expensive) calculations.

And since you can refer to functions just as regular variables, that means your function can take other functions as arguments (callbacks) and can also return functions as return values.

2. Function scope

In JavaScript all functions nested inside other functions can see the parent’s variables.

For example in PHP:

While in JavaScript:

It may not be too common to nest functions inside other functions in PHP, but it is very common in JavaScript.

3. Hoisting

Any variable defined anywhere in a function is moved (lifted, hoisted) to the top of the function and therefore visible anywhere inside the function. Combined with surprise #2 (inner functions see outer scope), it can come as a big surprise.

Consider this:

And then add a local hi further down:

This is happening because every variable defined in JavaScript gets an automatic undefined value. The local hi is hoisted to the top with its special undefined value. So it’s the same as writing:

4. No classes

JavaScript doesn’t have classes. Wait, what? What about object-oriented programming?

The thing is JavaScript supports object-oriented paradigms just fine. In fact, it’s trivial to define an object in JavaScript:

And that is all you need to define an object called apple with a property called rotten and accessible as:

This looks suspiciously similar to a hash (associative) array in PHP, cast to an object:

Creating objects in JavaScript and adding properties is that simple. Ditto for adding methods:

You can augment (add more properties and methods to) objects at any time:

5. Constructors and prototypes

But still, no classes?

You have probably seen JavaScript code that looks like:

While that syntax looks like Dog is a class, in fact it’s just a function. And functions that add properties to the object referred to as this inside their body and are called with the new operator, are commonly known as “constructor functions.” And they do indeed look a lot like classes, although they are just functions.

In PHP:

In JavaScript:

And how about methods of the Dog class (constructor function)? You can add them as properties to this, in which case they will be functions recreated for each “instance,” or you can add them to the special property called prototype, which is a property that all functions automatically get.

Properties and methods added to the prototype property are transparent to the user of the object:

And prototypes are a way (one of many ways) to implement inheritance in JavaScript.

The good thing about JavaScript is that it’s accessible to you to learn and experiment with practically anywhere. All browsers these days have consoles built in. Sort of like playing with $ php -a on the command line. For example in both Firefox and Chrome you can load any page, click anywhere and select “Inspect Element.” You’ll get a set of developer tools that features a console. Using the console you can fiddle with the current page or simply explore and play with the language.

Related

Sign up for the O'Reilly Programming Newsletter to get weekly insight from industry insiders.
topic: Programming
  • Phil T

    Hi fellow programmers,

    Javascript has the capability of classes and inheritance but working at this low level means
    writing and maintaining unwieldly code which if we want to learn from our past mistakes in programming is best left to the compiler. We dont want to return to hand-coding assembly-like languages, compilers will now generate better code; optimized even.

    Real programmers use classes which now includes Javascript programmers.

    There’s a free compiler called classyscript at http://classyscript.com.
    The language is a super set of javascript allowing classes and inheritance but compiling to standard javascript which will run in the browser.

    It also allows meta or macro style programming, please check it out.

    Thanks,
    Phil T

    • karatedog

      Bro, do you honestly think you can sell that stuff for $16?

  • http://www.vemployee.com/hire-php-programmers.html jimmybrion

    Every php developer should know how to utilize javascript for better programming. One thing i liked in this blog is option to listen selected paragraphs!!! Wow great :-)

  • Jerome Covington

    This is helpful, because all I had to do was cross my eyes a little and it became “5 Surprises for JavaScript Developers Coming to PHP” which is a helpful kind of post to have. There’s a lot of emphasis being placed on server side JavaScript, which is great. But how many JS guys are taking the time to dig into PHP as a pretty darn solid server side scripting and web app centric language? (If nothing else than to see where to take things as they push further down the stack with JS.)