How to Pass Variables from PHP to JavaScript Safely

By the end of this page, you will understand why PHP variables are not automatically available in JavaScript, how server-side and client-side code interact, and the safest ways to transfer data from PHP to JavaScript using json_encode(), inline script values, and HTML data-* attributes.

PHP and JavaScript run in different environments:

• PHP runs on the server before the page is sent to the browser.
• JavaScript runs in the browser after the page has been delivered.

That means JavaScript cannot directly read PHP variables such as $val. The PHP variable must first be rendered into the HTML or JavaScript output that the browser receives.

The safest and most common way to do this is with json_encode().

Why json_encode() matters:

• It converts PHP values into valid JavaScript-compatible literals.
• It safely handles strings, quotes, booleans, numbers, arrays, and objects.
• It reduces syntax errors caused by manually inserting raw values.

For example:

<script>
    const val = <?php echo json_encode($val); ?>;
    myPlugin.start(val);
</script>

If $val is a string like John, json_encode() outputs:

"John"

Think of PHP as a chef in a kitchen and JavaScript as the customer at the table.

• The chef prepares the meal in the kitchen before it leaves.
• The customer only sees what is served on the plate.

A PHP variable is like an ingredient in the kitchen. JavaScript cannot walk into the kitchen and grab it directly. PHP has to place that value onto the plate by writing it into the page output.

json_encode() is like packaging the ingredient in a way the customer can safely use.

Basic pattern: use json_encode()

<?php
$val = $myService->getValue();
?>

<script>
    const val = <?php echo json_encode($val); ?>;
    myPlugin.start(val);
</script>

Why this works

• echo prints the PHP value into the page.
• json_encode() makes sure the result is valid JavaScript syntax.
• JavaScript receives a real value it can use.

Example with a string

<?php
$val = "Hello world";
?>

<script>
    const val = <?php echo json_encode($val); ?>;
    console.log(val);
</script>

Output in the browser becomes:

Consider this PHP:

<?php
$val = "Book";
?>

<script>
    const val = <?php echo json_encode($val); ?>;
    myPlugin.start(val);
</script>

What happens step by step

1. PHP runs first on the server.
2. $val is assigned the string "Book".
3. json_encode($val) converts the PHP string into valid JavaScript text: "Book".
4. PHP sends this final HTML to the browser:

<script>
    const val = "Book";
    myPlugin.start(val);
</script>

1. The browser reads the <script> block.
2. JavaScript creates a variable named val.
3. myPlugin.start(val) runs using the value .

Common practical uses

Passing the current user to frontend code

<script>
    const currentUser = <?php echo json_encode([
        'id' => $user->id,
        'name' => $user->name
    ]); ?>;
</script>

Used in dashboards, profile pages, and admin tools.

Sending feature flags or settings

<script>
    const settings = <?php echo json_encode([
        'darkMode' => true,
        'itemsPerPage' => 20
    ]); ?>;
</script>

Useful for frontend behavior controlled by backend configuration.

Preloading form data

<script>
    const formDefaults = <?php echo json_encode($formData); ?>;
</script>

Helpful in edit forms and multi-step forms.

In real projects, developers usually choose one of these patterns:

1. Bootstrapping page data

A page outputs a single object that JavaScript reads on startup.

<script>
    window.pageData = <?php echo json_encode([
        'user' => $user,
        'csrfToken' => $csrfToken,
        'cartCount' => $cartCount
    ]); ?>;
</script>

This is common in server-rendered apps.

2. Element-specific data via data-*

<div
    class="user-card"
    data-user-id="<?php echo (int)$user['id']; ?>"
    data-user-name="<?php echo htmlspecialchars($user['name'], ENT_QUOTES, 'UTF-8'); ?>"
></div>

1. Printing raw strings into JavaScript

Broken example:

<?php
$val = "John's book";
?>
<script>
    myPlugin.start('<?php echo $val; ?>');
</script>

This can break because the quote inside the string ends the JavaScript string early.

Better:

<script>
    myPlugin.start(<?php echo json_encode($val); ?>);
</script>

2. Forgetting that PHP and JavaScript are different languages

Broken example:

<script>
    console.log($val);
</script>

$val means nothing to JavaScript unless PHP prints it into the output.

3. Using short echo tags without understanding output

This can be risky if you print unescaped content blindly:

<script>
    myPlugin.start(<?=?>);
</script>

Quick rules

• PHP runs first on the server.
• JavaScript runs later in the browser.
• JavaScript cannot directly access PHP variables.
• PHP must output the value into the page.
• Use json_encode() for JavaScript values.
• Use htmlspecialchars() for HTML attributes.

Safe pattern

<script>
    const value = <?php echo json_encode($value); ?>;
</script>

Safe string example

<script>
    const name = <?php echo json_encode($name); ?>;
</script>

Safe array/object example

<script>
    const data = <?php echo json_encode($data); ?>;
</script>

For HTML attributes

Why can PHP not be accessed directly from JavaScript?

Because PHP runs on the server before the page is sent, while JavaScript runs in the browser after the page loads.

What is the safest way to pass a PHP variable to JavaScript?

Use json_encode() when printing the value into a <script> block.

Can I use <?=$val?> directly?

Only in limited cases, such as simple numeric output. It is not reliable for strings or complex data.

Should I use htmlspecialchars() or json_encode()?

Use json_encode() for JavaScript values. Use htmlspecialchars() for HTML content and attributes.

Can I pass PHP arrays to JavaScript?

Yes. json_encode() converts PHP arrays into JavaScript arrays or objects.

Is it okay to put data into window variables?

Yes, for page bootstrapping or configuration, but keep the structure organized and do not expose sensitive data.

When should I use data-* attributes instead?

Use them when the data belongs to a specific HTML element and does not need to be global.

Can I pass secret API keys from PHP to JavaScript?

• JSON encoding — important because it converts PHP data into a format JavaScript understands.
• Server-side vs client-side code — explains why PHP and JavaScript cannot directly share runtime variables.
• HTML data attributes — useful for attaching backend values to specific elements.
• AJAX and fetch — used when JavaScript should request data from PHP after page load.
• Output escaping — helps prevent broken pages and security issues when printing dynamic content.
• PHP echo and short tags — relevant because PHP must print values into the response.
• JavaScript variables — needed to store and use values after they are passed from PHP.
• Type conversion — useful for understanding how strings, numbers, booleans, and arrays behave across PHP and JavaScript.