use strict;
use warnings;
use Mojolicious::Lite;

get '/' => sub {
    my $c = shift;
    my @array = qw( foo bar baz qux );
    $c->stash( vars => \@array );
    $c->render( template => 'js', format => 'html' );
};

app->start;

__DATA__
@@ js.html.ep
<script>
<% for ( 0 .. $#$vars) { %>
var headname<%= $_ + 1 %> = "<%= $vars->[$_] %>";
<% } %>
</script>

##</code><code>##

<script>

var headname1 = "foo";

var headname2 = "bar";

var headname3 = "baz";

var headname4 = "qux";

</script>

##</code><code>##

use strict;
use warnings;
use Mojolicious::Lite;

get '/' => sub {
    my $c = shift;
    my @array = map "'$_'", qw( foo bar baz qux );
    $c->stash( vars => \@array );
    {
        local $" = ', ';
        $c->render( template => 'js', format => 'html' );
    }
};

app->start;

__DATA__
@@ js.html.ep
<script>
var headname = <%== "[@$vars]" %>;
alert( headname );
</script>