Первая встреча сообщества JavaScript-разработчиков Новосибирска. Доклад про ошибки, которые часто встречаются в JavaScript коде.

1. pragmadash Денис Речкунов
Node.js-разработчик
Распространённые ошибки в JavaScript

3. А что если знать
все о JavaScript?

4. Вот он узнал всё

5. Много
возможностей

6. Даже слишком

7. Большая
ответственность!

8. Мы должны защитить себя
сами

9. И так –начнем

10. Что не так?
Constructor.prototype.method = function () {
setTimeout(function () {
this.anotherMethod();
}, 5000);
};
Constructor.prototype.anotherMethod = function () { };
01.
02.
03.
04.
05.
06.
10

11. this === хозяин метода setTimeout
Constructor.prototype.method = function () {
setTimeout(function () {
this.anotherMethod();
}, 5000);
};
Constructor.prototype.anotherMethod = function () { };
Uncaught TypeError: undefined is not a function
01.
02.
03.
04.
05.
06.
11

12. this.Решение 1
Constructor.prototype.method = function () {
var self = this;
setTimeout(function () {
self.anotherMethod();
}, 5000);
};
Constructor.prototype.anotherMethod = function () { };
01.
02.
03.
04.
05.
06.
07.
12

13. this.Решение 2
Constructor.prototype.method = function () {
setTimeout(function () {
this.anotherMethod();
}.bind(this), 5000);
};
Constructor.prototype.anotherMethod = function () { };
01.
02.
03.
04.
05.
06.
13

14. Что не так?
var index = 123, arr = ['tro', 'lo', 'lo'];
for (var index = 0; index < arr.length; index++) {
arr[index] += 'o';
}
console.log(index);
Output: 123
01.
02.
03.
04.
05.
14

15. Scope не задается блоком
var index = 123, arr = ['tro', 'lo', 'lo'];
for (var index = 0; index < arr.length; index++) {
arr[index] += 'o';
}
console.log(index);
Output: 3
01.
02.
03.
04.
05.
15

16. Что не так?
var obj = {some: 'first', another: 'second'};
for(var key in obj) {
setTimeout(function () {
console.log(obj[key]);
}, 1000);
}
Output: first second
01.
02.
03.
04.
05.
06.
16

18. Переменная цикла мутабильна
var obj = {some: 'first', another: 'second'};
for(var key in obj) {
setTimeout(function () {
console.log(obj[key]);
}, 1000);
}
Output: second second
01.
02.
03.
04.
05.
06.
18

19. Переменная цикла.Решение 1
var obj = {some: 'first', another: 'second'};
for(var key in obj) {
(function (currentKey){
setTimeout(function () {
console.log(obj[currentKey]);
}, 1000);
})(key);
}
01.
02.
03.
04.
05.
06.
07.
08.
19

20. Переменная цикла.Решение 2
var obj = {some: 'first', another: 'second'};
Object.keys(obj)
.forEach(function (key) {
setTimeout(function () {
console.log(obj[key]);
}, 1000);
});
01.
02.
03.
04.
05.
06.
07.
20

21. Что не так?
var some = 'cool and not ';
function foo() {
console.log(some);
var some = 'awful!';
console.log(some);
}
foo();
Output: cool and not awful!
01.
02.
03.
04.
05.
06.
07.
21

22. Hoisting
var some = 'cool and not ';
function foo() {
console.log(some);// some === undefined
varsome = 'awful!';
console.log(some);
}
foo();
Output: undefined awful!
01.
02.
03.
04.
05.
06.
07.
22

23. Что плохого?
for (var index = 0; index < 1000000; index++) {
console.log(index);
}
01.
02.
03.
23

24. Длинный цикл
for (var index = 0; index < 1000000; index++) {
console.log(index);
}
Страница не обрабатывает события
Сервер не принимает новые подключения
01.
02.
03.
24

25. Длинный цикл.Решение
var index = 0;
function next() {
if (index >= 1000000) { return; }
console.log(index++);
setTimeout(next, 0);
}
next();
01.
02.
03.
04.
05.
06.
07.
25

26. Что нет так?
var arr = [];
arr[5] = 'some';
console.log(arr.length);
Output: 1
01.
02.
03.
26

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

28. Что нет так?
var arr = [];
arr[5] = 'some';
delete arr[5];
console.log(arr.length);
Output: 0
01.
02.
03.
04.
28

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

30. И последний пример

31. Что не так?
function foo () {
return
{
name: 'Batman'
};
}
console.log(foo());
01.
02.
03.
04.
05.
06.
07.
31

32. Конечно не Batman,он великолепен!
function foo () {
return
{
name: 'Batman'
};
}
console.log(foo());
Парсер подставит ';'
01.
02.
03.
04.
05.
06.
07.
32

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

34. Вопросы?