Oldschool vs New School

Traps of oldschool richmedia programming. Why use classes, scoping, functional programming

Who changes what?

var hasClicked = false;
var handleClick = functon(){
hasClicked = true;
}

Why Classes and not oldschool

Old School

var hasClicked = false;
function onLoad(){
setupMainTimeline();
$('#banner').on('click', handleClick);
mainTl.play();
}
function handleClick(){
hasClicked = true;
}

Classes

Banner.js
class Banner {
constructor(){
this.tl = new Timeline();
this.hasClicked = false;
this.setupMainTimeline();
document.body.addEventListener('click', this.handleClick);
}
addFunctionality(functionality){
this._functionalities.push(functionality);
}
handleClick(){
this.hasClicked = true;
}
start(){
this.tl.play();
}
}
class SpecialBanner extends Banner {
handleClick(){
const tl = new TimelineLite();
tl.play();
}
}
main.js
import Banner from "./Banner.js";
const banner = new Banner();
banner.addFunctionality(NetflixFunctionality);
banner.addComponent(PoliteLoadComponent);
banner.start();
main.js
import Banner from "./SpecialBanner.js";
const banner = new Banner();
banner.addFunctionality(NetflixFunctionality);
banner.addComponent(PoliteLoadComponent);
banner.start();

Functional programming

// wrong
function getNameFromQueryString()
{
return new RegEx(/name/).exec(location.search)
}
// wrong
function getNameFromQueryString(queryString = location.search)
{
return new RegEx(/name/).exec(queryString)
}
// correct
function getNameFromQueryString(queryString = location.search)
{
const result = new RegEx(/name/).exec(queryString);
if(result){
return result[1];
}
return null;
}

Scoping

var self = this;
this.hello = 'HERRO!!!'
function test0(){
console.log(this === self);
}
function container(){
function test1(){
console.log(this === self);
}
test1();
}
const test2 = () => {
console.log(this === self);
console.log(this.hello);
}
function container1(){
const test3 = () => {
console.log(this === self);
}
}
test0();
test1();
test2();
container();
container1();