PHP vs JavaScript: Server, Browser and Node.js

PHP runs on the server: it builds the page, sends the finished HTML, and stops. JavaScript runs in the visitor's browser, where it reacts to clicks and changes the page after it has loaded; with Node.js it can also run on the server. So the two are less rivals than partners: a typical site uses PHP (or Node.js) on the server and JavaScript in the browser.

This PHP code runs on the server. The browser only receives what it prints, and the Page tab shows that result:

<?php
$products = [
    ["name" => "Keyboard", "price" => 49],
    ["name" => "Mouse", "price" => 19],
    ["name" => "Monitor", "price" => 189],
];
$total = array_sum(array_column($products, "price"));
?>
<h2>Cart</h2>
<ul>
<?php foreach ($products as $p): ?>
    <li><?= $p["name"] ?>: $<?= $p["price"] ?></li>
<?php endforeach; ?>
</ul>
<p>Total: $<?= $total ?></p>

Look at the Output tab: there is no PHP left in it, only HTML. The same list built by JavaScript in the browser looks like this:

const products = [
  { name: "Keyboard", price: 49 },
  { name: "Mouse", price: 19 },
  { name: "Monitor", price: 189 },
];

const ul = document.querySelector("#cart"); // an empty <ul id="cart"> in the HTML
for (const p of products) {
  const li = document.createElement("li");
  li.textContent = `${p.name}: $${p.price}`;
  ul.append(li);
}

The PHP version sends a complete page, which search engines and slow phones read immediately. The JavaScript version can update the list later without reloading, for example when the visitor removes an item.

Where each language runs

The last row matters for security: anything in browser JavaScript is visible to the visitor, so passwords, API keys and price checks belong on the server.

Syntax side by side

The two languages look alike because both borrow from C: braces, if, for, while, function, return. The differences are in the details:

Here is a function with a callback in PHP:

<?php
$prices = [12.5, 8, 30, 4.25];

$withTax = array_map(fn($p) => round($p * 1.2, 2), $prices);
$cheap = array_filter($withTax, fn($p) => $p < 15);

echo implode(", ", $withTax), "\n";
echo "Under 15: " . implode(", ", $cheap) . "\n";
echo "Count: " . count($cheap) . "\n";

And in JavaScript, where map and filter are methods on the array:

const prices = [12.5, 8, 30, 4.25];

const withTax = prices.map((p) => Math.round(p * 1.2 * 100) / 100);
const cheap = withTax.filter((p) => p < 15);

console.log(withTax.join(", "));
console.log("Under 15: " + cheap.join(", "));

The + operator: the classic trap

In JavaScript + both adds numbers and joins strings, so a string anywhere turns addition into concatenation. PHP keeps the two apart: + always adds and . always joins.

<?php
var_dump("10" + 5);     // int(15): + always adds
var_dump("10" . 5);     // string "105": . always joins
var_dump(10 . "");      // number to string
var_dump("3" * "4");    // numeric strings multiply
var_dump(0.1 + 0.2 === 0.3); // floats are inexact in both languages

console.log("10" + 5);  // "105"
console.log("10" - 5);  // 5
console.log("3" * "4"); // 12
console.log(0.1 + 0.2 === 0.3); // false

Both languages also have loose == and strict ===. The advice is the same in both: use === unless you mean to compare across types.

Pass data from PHP to JavaScript

PHP runs first, so it can write data straight into the page for the browser's JavaScript to use. json_encode turns a PHP array into valid JavaScript:

<?php
$user = ["name" => "Ada", "role" => "admin", "unread" => 3];
?>
<p id="greeting">Loading...</p>
<script>
const user = <?= json_encode($user, JSON_HEX_TAG | JSON_HEX_AMP) ?>;
document.getElementById("greeting").textContent =
    "Hi " + user.name + ", you have " + user.unread + " new messages";
</script>

The Output tab shows the generated script with the data already filled in. The JSON_HEX_TAG flag escapes < and >, so a value containing </script> cannot end the script early. More on the options in json_encode.

The other direction works through HTTP: browser JavaScript calls fetch("/api/cart.php"), the PHP script runs, and it answers with JSON:

<?php
// api/cart.php
header('Content-Type: application/json');
echo json_encode(['items' => 3, 'total' => 257]);

const res = await fetch("/api/cart.php");
const cart = await res.json();
console.log(cart.total); // 257

PHP vs Node.js on the server

When JavaScript runs on the server through Node.js, the comparison becomes a real choice.

PHP's model is forgiving: a bug or memory leak only affects one request, and each request starts clean. Node's model can keep state and connections open, which suits chat and live dashboards, but a crash or a blocking loop affects every user of that process.

Which to learn

You will need JavaScript for any interactive web page, because it is the only language browsers run. The question is what runs on the server:

• Learn PHP next if you want to work with WordPress, Laravel or the many existing PHP sites, or if you want the simplest way to put a dynamic site on cheap hosting. Start with what PHP is.
• Stay with JavaScript (Node.js) if you want one language for the whole stack or are building real-time features.

A common path is HTML and CSS, then JavaScript in the browser, then one server language. Whichever server language you choose, forms, sessions, databases and JSON APIs work on the same HTTP ideas, so the knowledge transfers.