Efficient way to Pass variables from PHP to JavaScript

If you don't want to use PHP to generate your javascript (and don't mind the extra call to your webserver), use AJAX to fetch the data.

If you do want to use PHP, always encode with json_encode before outputting.

<script>
    var myvar = <?php echo json_encode($myVarValue); ?>;
</script>

<?php
header('content-type:text/javascript;charset=utf-8');
printf('var foo = %s;', json_encode($foo));

json_encode ensures valid javascript. the header tells the browser tho interpret it as javascript.

then you can link to it like a file

<script src="script.php"></script>

Please use a rest/rpc api and pass json to your js. This can be done in the following way if you are using jquery:

rest.php

<?php echo "{name:biplav}" ?>

Then From your js make a get call like this:

var js_var;
$.get("rest.php", function(data) {
         js_var=data;
});

Thats the simplest example I can think of.

In my opinion, if you need to pass a variable directly in your JS, probably you web application is not good designed.

So, I have two tips: * Use JSON files for general configurations, like /js/conf/userprefs.json

{
    "avatar": "/img/users/123/avatar.jpg",
    "preferred_color": "blue"
    // ...
}

• or (better way) you can retrieve your json confs with an AJAX call.

With PHP frameworks like Symfony2, you can decide a format in your routing configuration leaving the output of a variable to the template engine (like Twig).

I do an example for Symfony2 users but this can be used by any programmer:

routing.yml

userprefs:
    pattern: /js/confs/userprefs.{_format}
    defaults: { _controller: CoreBundle:JsonPrefs:User, _format: json }
    requirements:
        _format: json
        _method: GET

Inside the controller you can do all the queries that you need to retrieve your variables putting these in the view:

Resources/Views/JsonPrefs/User.json

{
    "avatar": "{{ user.avatar }}",
    "preferred_color": "{{ user.preferred_color }}"
    // ...
}

Inside your js now you can retrieve the JSON with a simple AJAX call. For performance purposes you can cache the JSONs (for example) with Varnish, so your server doesn't need to do a query every time you read the user preferences.

If you modify your .htaccess file to include

 AddType application/x-httpd-php .js

you can use a .js file and it will be handled by PHP, which is half of what you require.

In terms of how ugly that solution is, I would say that this is the least ugly mechanism. You could try to pass your whole JS script through a PHP script as a string and do a search and replace for the variables you need to insert, but I think that you will agree that this is uglier than the solution you are currently using.

Put all your .js files in a folder and configure your HTTP server to redirect all the request to those files to a PHP file that loads the files and outputs them.

Let's suppose you have Apache and your .js files are in /js:

RewriteRule /js   /getjs.php

getjs.php:

<?php
header('Content-Type: text/javascript');
include_once($_SERVER['SCRIPT_NAME']);
?>

As far as avoiding running .js files through the PHP parser, there is little you can do, except maybe fetching the value of js-variable via an AJAX call.

Also you may consider outputing the value like this:

var js_variable = <?php echo json_encode ($php_variable); ?>

to escape all the things that would break your javascript.