为什么json编码从php发送数据到javascript（Laravel）？

I have just read this question and noticed a lot of the answers showing json encoding. I'm just wondering why? Is it for some kind of security? So for instance in Laravel would this be the correct way to pull stuff in

var date = '{!! json_encode($event->date) !!}',
parseDate = JSON.parse(date);

//use parseDate here.

Sorry for making a whole new question, but I don't have the rep to comment on the original question :/

Generally, JSON is used to send data from the server to the browser when you want to retain it's structure. It is easy to parse in Javascript with the result being an array that matches the original array in the server language (like PHP). For simple, single values, it isn't really needed.

When you use json_encode as:

var date = {!! json_encode($event->date) !!};

then it returns a JSON string. The PHP json_encode function translates the data passed to it to a JSON string which can then be output to a JavaScript variable. And a JSON is a subset of JavaScript literal notation, and so you can drop JSON into JavaScript code directly anywhere an expression is valid.

No need for JSON.parse or $.parseJSON and in fact, using them would fail.

date will either be a JavaScript object (if the PHP "associative" array has non-numeric keys and so json_encode output {...}) or a JavaScript array (if json_encode output [...]).

In response to Amit Gupa, here is the code that won't work without a parse (based on this). Okay the first part is the main part of the view. The $event is being pulled from the database with date and time stored separate. I'm using this as a widget using laravel widgets although it pretty much acts as a normal view.

<div id="clockdiv">
        <div class = 'timeFormat form-group-shadow'>
            <span class="days">0</span>
            <div class="small-text">Days</div>
        </div>
        <div class = 'timeFormat form-group-shadow'>
            <span class="hours">00</span>
            <div class="small-text">Hours</div>
        </div>
        <div class = 'timeFormat form-group-shadow'>
            <span class="minutes">00</span>
            <div class="small-text">Minutes</div>
        </div>
        <div class = 'timeFormat form-group-shadow'>
            <span class="seconds">00</span>
            <div class="small-text">Seconds</div>
        </div>
    </div>
</div>

{{ HTML::script('js/countdown.js') }}

<script>
    var date = '@if(isset($event)){!! json_encode($event->date) !!}@endif',
    time = '@if(isset($event)){!! json_encode($event->time) !!}@endif',
    dateTime = JSON.parse(date) + " " + JSON.parse(time);

   if(new Date(dateTime) >= Date.now()){
       initializeClock('clockdiv', dateTime);
   };
</script>

The script 'js/countdown.js' can be seen here.

function getTimeRemaining(endtime){
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor( (t/1000) % 60 );
    var minutes = Math.floor( (t/1000/60) % 60 );
    var hours = Math.floor( (t/(1000*60*60)) % 24 );
    var days = Math.floor( t/(1000*60*60*24) );
    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

function initializeClock(id, endtime){
    var clock = document.getElementById(id);
    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');

    function updateClock(){
        var t = getTimeRemaining(endtime);
        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
        if(t.total<=0){
            clearInterval(timeinterval);
        }
    }

     updateClock();

     var timeinterval = setInterval(updateClock,1000);
}

This code is working fine, but fails when I don't parse.