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 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.

tags: , , ,

Get the O’Reilly Data Newsletter

Stay informed. Receive weekly insight from industry insiders.

Get the O’Reilly Web Ops and Performance Newsletter

Weekly insight from industry insiders. Plus exclusive content and offers.

Get the O’Reilly Programming Newsletter

Weekly insight from industry insiders. Plus exclusive content and offers.

Get the O’Reilly Hardware Newsletter

Get weekly insight and knowledge on how to design, prototype, manufacture, and market great connected devices.

Get Four Short Links in Your Inbox

Sign up to receive Nat’s eclectic collection of curated links every weekday.

Get the O’Reilly Design Newsletter

Stay informed. Receive weekly insight from industry insiders.

Get the O’Reilly Web Platform Newsletter

Stay informed. Receive weekly insight from industry insiders—plus exclusive content and offers.