Skip to content

Instantly share code, notes, and snippets.

@ifkas
Last active February 23, 2018 11:03
Show Gist options
  • Save ifkas/b37e5123cc35d0ef8ca2ade5401126e4 to your computer and use it in GitHub Desktop.
Save ifkas/b37e5123cc35d0ef8ca2ade5401126e4 to your computer and use it in GitHub Desktop.
Closure binding example
let count = 0;
function appleColor(color) {
return function(type) {
count++;
if(count === 1) {
document.getElementById('ate').innerHTML += '<div class="message">' + 'I ate ' + count + ' apple. ' + '<br/>' + 'It was ' + type + ' type with shiny bright ' + color + ' color. ' + `<svg id="appleSvg" fill="${color}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50.001" style="enable-background:new 0 0 50 50.001;" xml:space="preserve"> <path d="M26.12,14.488c0.879-1.468,2.27-3.569,4.027-5.585h0.002c1.488-1.711,4.402-3.907,4.402-3.907 c0.438-0.331,0.391-0.792-0.107-1.024l-3.522-1.646c-0.498-0.233-1.175-0.063-1.505,0.376c0,0-2.605,3.737-5.671,11.692 c-9.48-4.288-18.491,1.718-18.491,12.162c0,10.909,8.393,27.48,19.743,22.478c11.954,5.173,19.749-11.568,19.749-22.478 C44.747,16.022,36.647,9.846,26.12,14.488z"/> <path d="M23.997,10.955c0.548-0.046,1.032-0.531,1.076-1.078c0,0,0.352-4.266-2.621-7.242c-2.982-2.977-7.24-2.622-7.24-2.622 c-0.548,0.046-1.032,0.531-1.077,1.078c0,0-0.358,4.268,2.619,7.245C19.729,11.31,23.997,10.955,23.997,10.955z"/> </svg></div>`;
} else {
document.getElementById('ate').innerHTML += '<div class="message">' + 'I ate ' + count + ' apples. ' + '<br/>' + ' This apple is ' + type + ' type with shiny bright ' + color + ' color. ' + `<svg id="appleSvg" fill="${color}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50.001" style="enable-background:new 0 0 50 50.001;" xml:space="preserve"> <path d="M26.12,14.488c0.879-1.468,2.27-3.569,4.027-5.585h0.002c1.488-1.711,4.402-3.907,4.402-3.907 c0.438-0.331,0.391-0.792-0.107-1.024l-3.522-1.646c-0.498-0.233-1.175-0.063-1.505,0.376c0,0-2.605,3.737-5.671,11.692 c-9.48-4.288-18.491,1.718-18.491,12.162c0,10.909,8.393,27.48,19.743,22.478c11.954,5.173,19.749-11.568,19.749-22.478 C44.747,16.022,36.647,9.846,26.12,14.488z"/> <path d="M23.997,10.955c0.548-0.046,1.032-0.531,1.076-1.078c0,0,0.352-4.266-2.621-7.242c-2.982-2.977-7.24-2.622-7.24-2.622 c-0.548,0.046-1.032,0.531-1.077,1.078c0,0-0.358,4.268,2.619,7.245C19.729,11.31,23.997,10.955,23.997,10.955z"/></svg></div>`;
}
}
}
function executeClosure(event) {
event.preventDefault();
let type = document.getElementsByTagName("input")[0].value;
let value = document.getElementsByClassName("color")[0];
let color = value.options[value.selectedIndex].text;
// You execute the closure below
appleColor(color)(type);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment