Most Common JavaScript Mistakes for courses

1. Most Common JavaScriptMistakes

2. Scope «this» sample
functionTimer (){
this.seconds=0;
this.increment=function(){
this.seconds++;
};
setInterval(function(){
this.increment();
}, 1000);
}
vartimer=newTimer();

3. Scope «this» error
functionTimer (){
this.seconds=0;
this.increment=function(){
this.seconds++;
};
setInterval(function(){
this.increment();
}, 1000);
}
vartimer=newTimer();
Uncaught TypeError: undefined is not a function

4. Scope «this» solution
functionTimer (){
this.seconds=0;
this.increment=function(){
this.seconds++;
};
varself = this;
setInterval(function(){
self.increment();
}, 1000);
}
vartimer =newTimer();

5. Bindsample
varHuman =function( name ){
this.name =name;
};
Human.prototype.getName=function(){
console.log( this.name );
};
varhomer =newHuman('Homer');
homer.getName();
setTimeout( function(){
homer.getName();
} , 500);
setTimeout( homer.getName, 500);

6. Bindoutputs
varHuman =function( name ){
this.name =name;
};
Human.prototype.getName=function(){
console.log( this.name );
};
varhomer =newHuman('Homer');
homer.getName(); // Homer
setTimeout( function(){
homer.getName(); // Homer
} , 500);
setTimeout( homer.getName, 500); // Empty

7. Bindsolution
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
varHuman =function( name ){
this.name =name;
};
Human.prototype.getName=function(){
console.log( this.name );
};
varhomer =newHuman('Homer');
homer.getName(); // Homer
setTimeout( function(){
homer.getName(); // Homer
} , 500);
setTimeout( homer.getName.bind(homer) , 500); // Homer

8. Prototype
// Shape -superclass
functionShape() {
this.x=0;
this.y=0;
}
// superclass method
Shape.prototype.move=function(x, y) {
this.x+=x;
this.y+=y;
console.info('Shape moved.');
};
// Rectangle -subclass
functionRectangle() {
Shape.call(this); // call super constructor.
}
// subclass extends superclass
Rectangle.prototype=Object.create(Shape.prototype);
Rectangle.prototype.constructor=Rectangle;
varrect=newRectangle();
console.log(rectinstanceofRectangle);
console.log(rectinstanceofShape);
rect.move(1, 1);

9. Inheritedpropertiessample
// Shape -superclass
functionShape() {
this.x=0;
this.y=0;
}
// superclass method
Shape.prototype.move=function(x, y) {
this.x+=x;
this.y+=y;
console.info('Shape moved.');
};
// Rectangle -subclass
functionRectangle() {
Shape.call(this); // call super constructor.
}
// subclass extends superclass
Rectangle.prototype=Object.create(Shape.prototype);
Rectangle.prototype.constructor=Rectangle;
Rectangle.prototype.toString=function(){
return"Rectangle";
};
varrect=newRectangle();
for(varprop inrect){
console.log(prop);
}
for(varprop inrect){
if(rect.hasOwnProperty(prop)){
console.log("> "+prop);
}
}

10. Inheritedpropertiesoutputs
// Shape -superclass
functionShape() {
this.x=0;
this.y=0;
}
// superclass method
Shape.prototype.move=function(x, y) {
this.x+=x;
this.y+=y;
console.info('Shape moved.');
};
// Rectangle -subclass
functionRectangle() {
Shape.call(this); // call super constructor.
}
// subclass extends superclass
Rectangle.prototype=Object.create(Shape.prototype);
Rectangle.prototype.constructor=Rectangle;
Rectangle.prototype.toString=function(){
return"Rectangle";
};
varrect=newRectangle();
for(varprop inrect){
console.log(prop);
}
// x, y, move, constructor, toString
for(varprop inrect){
if(rect.hasOwnProperty(prop)){
console.log("> "+prop);
}
}
// x, y,

11. Comparaison sample
console.log(''==0);
console.log('0'==0);
console.log(" trn"==0);
console.log([] ==0);
console.log(undefined==null);
console.log({} ==0);
console.log(undefined==0);
if([]) { console.log('true'); }
if({}) { console.log('true'); }
console.log(NaN==NaN);
console.log(NaN===NaN);
console.log(isNaN(NaN));
console.log(''===0);
console.log('0'===0);
console.log({} ===0);
console.log(undefined===null);

12. Comparaison solution
console.log(''==0); // true
console.log('0'==0); // true
console.log(" trn"==0); // true
console.log([] ==0); // true
console.log(undefined==null);// true
console.log({} ==0); // false
console.log(undefined==0); // false
if([]) { console.log('true'); } // true
if({}) { console.log('true'); }// true
console.log(NaN==NaN); // false
console.log(NaN===NaN); // false
console.log(isNaN(NaN)); // true
console.log(''===0); // false
console.log('0'===0); // false
console.log({} ===0); // false
console.log(undefined===null);// false

13. IIFE sample
var x = 1;
var y = 10;
var m = (function(){
var x=2;
y = 11;
var z = 101;
return 1000;
})();
console.log(x);
console.log(y);
console.log(m);
console.log(z);

14. IIFE outputs
var x = 1;
var y = 10;
var m = (function(){
var x=2;
y = 11;
var z = 101;
return 1000;
})();
console.log(x); // 1
console.log(y); // 11
console.log(m); // 1000
console.log(z); //z is not defined
An immediately-invoked function expression (IIFI) is a JavaScript design pattern which produces a lexical scope using JavaScript's function scoping.

15. Asynchronousloopsample
for(vari=0; i<3; i++){
setTimeout(function(){
console.log(i);
});
}

16. Asynchronousloopproblem
for(vari=0; i<3; i++){
setTimeout(function(){
console.log(i);
});
}
// 3, 3, 3

17. Asynchronousloopsolution
for(vari=0; i<3; i++){
(function(value){
setTimeout(function(){
console.log(value);
});
})(i);
}
// 0, 1, 2

18. Variables copy sample
varme ={
name :'Yoann',
male :true,
xp:7,
skills:{
java :5,
js:5,
android:5
},
toString:function(){
return'My name is '+this.name;
}
};
varclone ={};
for(varprop inme){
clone[prop] =me[prop];
}
clone.xp=8;
clone.male=false;
clone.name ="Nexus-6";
clone.skills.dotNet=1;
deleteclone.skills.android;
clone.toString=function(){
return"My clone name is "+this.name;
};
console.log(me);
console.log(me.toString());

19. Variables copy outputs
{
name: 'Yoann',
male : true,
xp: 7,
skills: {
java : 5,
js: 5,
dotNet: 1
},
toString: function(){
return 'Mynameis'+this.name;
}
}
"MynameisYoann";
•Valuenumber, boolean, string
•Referencefunction, array, object