JSFiddle - React, Tailwind, and code Playground

by konglie

HTML

<div id='container'>

</div>

CSS

button {
  display: block;
  margin: 10px;
}

JavaScript

var g = function(id) {
  return document.getElementById(id);
}
var button = function(id, clickFn) {
  var btn = document.createElement('button');
  btn.id = id;
  btn.onclick = clickFn;
  btn.innerHTML = 'call ' + id;
  return btn;
}
var container = g('container');
var buttons = {
	'say1': function(){ alert(say1())},
	'say2': function(){ alert(say2())},
	'say3': function(){ alert(say3('Budi'))},
	'say4': function(){ alert(say4())},
	'say5': function(){ alert(say5())},
	'getCustom1': function(){ alert(getCustom1())},
	'getCustom2': function(){ alert(getCustom2())}
}
for (var id in buttons) {
	container.appendChild(button(id, buttons[id]));
}

//==================================================================

// ketika suatu variable didefinisikan secara langsung
// akan membuat variable tersebut otomatis menjadi property dari object window
s = 'hello';

// sama juga ketika mendaftarkan sebuah property pada object window
window['t'] = 'world';

function say1() {
	// s dan t akan diambil dari window
  // karena tidak didefinisikan dalam function
  return 'fn say1 = ' + s + ' ' + t;
}

function say2() {
	var t = 'universe';
  // meskipun dalam function ini ada mendifinisikan variable t,
  // namun variable tersebut didefinisikan dengan keyword var
  // menjadikan akses ke variable tersebut hanya dalam scope function
  // sedangkan dalam kasus ini, secara eksplisit, kita mengambil nilai t dari object window
  return 'fn say2 = ' + window.s + ' ' + window.t;
}

// deklarasi say3 adalah dianggap sebagai variable
// tanpa keyword var, maka akan otomatis menjadi property dari window
say3 = function(t){
	// pada fungsi ini, variable t tidak akan diambil dari object window, 
  // karena scope function, juga memiliki properti t
  // bandingkan dengan say2 di atas
	return 'fn say3: hello ' + t;
}

function say4(){
	// di javascript, function pun adalah sebuah properti object
  // dalam kasus ini, say3 adalah sebuah variable, dengan tipe ada function
  // sehingga dapat...