Распространённые ошибки в JavaScript

Что не так?

			Constructor.prototype.method = function () {
				setTimeout(function () {
					this.anotherMethod();
				}, 5000);
			};
			Constructor.prototype.anotherMethod = function () { };
		

this === хозяин метода setTimeout

			Constructor.prototype.method = function () {
				setTimeout(function () {
					this.anotherMethod();
				}, 5000);
			};
			Constructor.prototype.anotherMethod = function () { };
		

Uncaught TypeError: undefined is not a function

this. Решение 1

			Constructor.prototype.method = function () {
				var self = this;
				setTimeout(function () {
					self.anotherMethod();
				}, 5000);
			};
			Constructor.prototype.anotherMethod = function () { };
		

this. Решение 2

			Constructor.prototype.method = function () {
				setTimeout(function () {
					this.anotherMethod();
				}.bind(this), 5000);
			};
			Constructor.prototype.anotherMethod = function () { };
		

Что не так?

			var index = 123, arr = ['tro', 'lo', 'lo'];
			for (var index = 0; index < arr.length; index++) {
				arr[index] += 'o';
			}
			console.log(index);
			Output: 123
		

Scope не задается блоком

			var index = 123, arr = ['tro', 'lo', 'lo'];
			for (var index = 0; index < arr.length; index++) {
				arr[index] += 'o';
			}
			console.log(index);
			Output: 3
		

Что не так?

			var obj = {some: 'first', another: 'second'};
			for(var key in obj) {
				setTimeout(function () {
					console.log(obj[key]);
				}, 1000);
			}
			Output: first second
		

Переменная цикла мутабильна

			var obj = {some: 'first', another: 'second'};
			for(var key in obj) {
				setTimeout(function () {
					console.log(obj[key]);
				}, 1000);
			}
			Output: second second
		

Переменная цикла. Решение 1

			var obj = {some: 'first', another: 'second'};
			for(var key in obj) {
				(function (currentKey){
					setTimeout(function () {
						console.log(obj[currentKey]);
					}, 1000);
				})(key);
			}
		

Переменная цикла. Решение 2

			var obj = {some: 'first', another: 'second'};
			Object.keys(obj)
				.forEach(function (key) {
					setTimeout(function () {
						console.log(obj[key]);
					}, 1000);
				});
		

Что не так?

			var some = 'cool and not ';
			function foo() {
				console.log(some);
				var some = 'awful!';
				console.log(some);
			}
			foo();
			Output: cool and not awful!
		

Hoisting

			var some = 'cool and not ';
			function foo() {
				console.log(some); // some === undefined
				var some = 'awful!';
				console.log(some);
			}
			foo();
			Output: undefined awful!
		

Что плохого?

			for (var index = 0; index < 1000000; index++) {
				console.log(index);
			}
		

Длинный цикл

			for (var index = 0; index < 1000000; index++) {
				console.log(index);
			}
			
Страница не обрабатывает события

			
Сервер не принимает новые подключения

		

Длинный цикл. Решение

			var index = 0;
			function next() {
				if (index >= 1000000) { return; }
				console.log(index++);
				setTimeout(next, 0);
			}
			next();
		

Что нет так?

			var arr = [];
			arr[5] = 'some';
			console.log(arr.length);
			Output: 1
		

length === max(index) + 1

			var arr = [];
			arr[5] = 'some';
			console.log(arr.length);
			Output: 6
			
Использовать push/unshift/pop/shift
		

Что нет так?

			var arr = [];
			arr[5] = 'some';
			delete arr[5];
			console.log(arr.length);
			Output: 0
		

undefined x 6

			var arr = [];
			arr[5] = 'some';
			delete arr[5];
			console.log(arr.length);
			Output: 6
			
Не использовать delete
		

Что не так?

			function foo () {
				return
				{
					name: 'Batman'
				};
			}
			console.log(foo());
		

Конечно не Batman, он великолепен!

			function foo () {
				return
				{
					name: 'Batman'
				};
			}
			console.log(foo());
			
Парсер подставит ';'
		

И вообще советы

• Использовать Strict Mode
• Проверять код JShint
• Использовать IDE – WebStorm, например
• Boolean(x), Number(x), String(x) – для приведения типов
• Mozilla Developer Network