Fungsi CDATA Dalam JS dan CSS

Jika kamu sering mengotak-atik CSS maupun JS atau mungkin cuma drag and drop kode dari orang lain kamu terkadang akan menemukan yang namanya CDATA atau tertulis // <![CDATA[, kenapa saya bilang terkadang ? karena tidak semua JS dan CSS menggunakan itu. Oke, pernahkah terlintas rasa penasaran akan fungsi dari CDATA ini ? jika iya silahkan lanjutkan membaca karena kita akan mengulasnya disini dan mungkin ini hanyalah pembelajaran kecil-kecilan, namun untuk menambah wawasan kita tidak ada salahnya kita pelajari ini.

CDATA, menurut salah satu pengguna stackoverflow.

CDATA adalah kumpulan XML yang menetapkan isi tag yang biasanya #PCDATA - mengurai data karakter, untuk dijadikan sebagai CDATA, yaitu data karakter non-parsing (Tidak terurai).

Menurut saya, CDATA ini memiliki fungsi untuk mencegah penguraian yang dilakukan XML pada character tertentu sepertu &,<,>,",' dll. Dari beberapa kasus yang saya temui ketika saya membuat sebuah script ataupun CSS yang didalamnya terdapat karakter seperti diatas awalnya normal dengan menunjukkan wujud aslinya, namun ketika saya save HTML dan keluar lalu masuk lagi, yang terjadi adalah karakter diatas berubah wujud menjadi terurai, contohnya yang terjadi pada CSS tepatnya properti content:"" yang diurai menjadi content:"" dan JS yang terjadi pada data String '#monyet' diurai menjadi '#monyet' . Untuk lebih jelasnya perhatikan contoh kode dibawah.

Tanpa CDATA

<script>
$(function(){
if($("#HTML2").length){
var o=$("#HTML2"),i=$("#HTML2").offset().top,t=$("#HTML2").height();$(window).scroll(function(){
var s=$(".bloginfo").offset().top-t-20,n=$(window).scrollTop(),f=$(window).width();
if(i<n&&f>1200?o.css({position:"fixed",top:0,width:"291px"}):o.css("position","static"),s<n){var c=s-n;o.css({top:c})}})}});
</script>

Dengan CDATA

<script>
//<![CDATA[
$(function(){if($("#HTML2").length){var o=$("#HTML2"),i=$("#HTML2").offset().top,t=$("#HTML2").height();$(window).scroll(function(){var s=$(".bloginfo").offset().top-t-20,n=$(window).scrollTop(),f=$(window).width();if(i<n&&f>1200?o.css({position:"fixed",top:0,width:"291px"}):o.css("position","static"),s<n){var c=s-n;o.css({top:c})}})}});
//]]>
</script>

Seperti yang dikatakan diatas, kode tidak akan terurai jika menggunakan CDATA.
Semoga ada sedikit bayangan tentang fungsi CDATA, jika ada tambahan silahkan ditambahkan dibawah. Sekian dan terima kasih.