The document discusses various JavaScript concepts including strict mode, scope, avoiding global variables, immediately invoked function expressions (IIFEs), namespaces, and converting array-like objects to arrays. It provides examples of using strict mode to catch errors, differences between global and local scope, exporting modules without polluting the global namespace using IIFEs and namespaces, and how to convert array-like objects from methods like document.querySelectorAll() to true arrays using Array.prototype.slice.call so they can support array methods.

1. Secrets
JavaScript

2. Fernando Daciuk
npm install fdaciuk

3. http://zimp.me

4. da2k.com.br

5. JAVASCRIPT
NINJA
eventick.com.br/curso-javascript-ninja

6. use strict
Add into your code
#1

7. Declarations
Variable

8. function func() {
a = 1;
return a;
}
console.log(func());
use strict
without

9. function func() {
a = 1;
return a;
}
console.log(func());
use strict
without

10. function func() {
a = 1;
return a;
}
console.log(func());
use strict
without

11. function func() {
a = 1;
return a;
}
console.log(func());
use strict
without

12. function func() {
a = 1;
return a;
}
console.log(func());
use strict
without
?

13. function func() {
a = 1;
return a;
}
console.log(func()); // 1
use strict
without

14. function func() {
'use strict';
a = 1;
return a;
}
console.log(func());
use strict
with

15. function func() {
'use strict';
a = 1;
return a;
}
console.log(func());
use strict
with

16. function func() {
'use strict';
a = 1;
return a;
}
console.log(func());
use strict
with
?

17. function func() {
'use strict';
a = 1;
return a;
}
console.log(func()); // ReferenceError: a is
not defined
use strict
with

19. this
The misunderstood

20. function a() {
this.one = 1;
return this;
}
console.log(a() === window);
console.log(a().one);
console.log(window.one);
console.log(one);
use strict
without

21. function a() {
this.one = 1;
return this;
}
console.log(a() === window);
console.log(a().one);
console.log(window.one);
console.log(one);
use strict
without

22. function a() {
this.one = 1;
return this;
}
console.log(a() === window);
console.log(a().one);
console.log(window.one);
console.log(one);
use strict
without

23. function a() {
this.one = 1;
return this;
}
console.log(a() === window);
console.log(a().one);
console.log(window.one);
console.log(one);
use strict
without

24. function a() {
this.one = 1;
return this;
}
console.log(a() === window);
console.log(a().one);
console.log(window.one);
console.log(one);
use strict
without
?

25. function a() {
this.one = 1;
return this;
}
console.log(a() === window); // true
console.log(a().one); // 1
console.log(window.one); // 1
console.log(one); // 1
use strict
without

26. function a() {
this.one = 1;
return this;
}
console.log(a() === window); // true
console.log(a().one); // 1
console.log(window.one); // 1
console.log(one); // 1
use strict
without

27. function a() {
this.one = 1;
return this;
}
console.log(a() === window); // true
console.log(a().one); // 1
console.log(window.one); // 1
console.log(one); // 1
use strict
without

28. function a() {
this.one = 1;
return this;
}
console.log(a() === window); // true
console.log(a().one); // 1
console.log(window.one); // 1
console.log(one); // 1
use strict
without

29. function a() {
'use strict';
this.one = 1;
return this;
}
console.log(a() === window);
console.log(a().one);
console.log(window.one);
use strict
with

30. function a() {
'use strict';
this.one = 1;
return this;
}
console.log(a() === window);
console.log(a().one);
console.log(window.one);
use strict
with
?

31. /home/code/app.js:3
this.one = 1;
^
TypeError: Cannot set property 'one' of undefined
use strict
with

32. function a() {
'use strict';
this.one = 1;
return this;
}
console.log(a.call({}).one); // 1
console.log(a.apply({}).one); // 1
console.log(new a().one); // 1
use strict
with

33. function a() {
'use strict';
this.one = 1;
return this;
}
console.log(a.call({}).one); // 1
console.log(a.apply({}).one); // 1
console.log(new a().one); // 1
use strict
with

34. function a() {
'use strict';
this.one = 1;
return this;
}
console.log(a.call({}).one); // 1
console.log(a.apply({}).one); // 1
console.log(new a().one); // 1
use strict
with

35. function a() {
'use strict';
this.one = 1;
return this;
}
console.log(a.call({}).one); // 1
console.log(a.apply({}).one); // 1
console.log(new a().one); // 1
use strict
with

36. methods
Call and apply

37. function func() {
this.a = 1;
return this;
}
console.log(func.call(null) === window);
console.log(func.call('a') instanceof String);
use strict
without

38. function func() {
this.a = 1;
return this;
}
console.log(func.call(null) === window);
console.log(func.call('a') instanceof String);
use strict
without

39. function func() {
this.a = 1;
return this;
}
console.log(func.call(null) === window);
console.log(func.call('a') instanceof String);
use strict
without

40. function func() {
this.a = 1;
return this;
}
console.log(func.call(null) === window);
console.log(func.call('a') instanceof String);
use strict
without

41. function func() {
this.a = 1;
return this;
}
console.log(func.call(null) === window);
console.log(func.call('a') instanceof String);
use strict
without
?

42. true

43. function func() {
this.a = 1;
return this;
}
console.log(func.call(null) === window);
console.log(func.call('a') instanceof String);
use strict
without

44. function func() {
'use strict';
this.a = 1;
return this;
}
console.log(func.call(null) === window);
console.log(func.call('a') instanceof String);
use strict
with
?

45. TypeError: Cannot set property 'a' of null
use strict
with

46. function func() {
'use strict';
this.a = 1;
return this;
}
console.log(func.call(null) === window);
console.log(func.call('a') instanceof String);
use strict
with

47. Scope
Avoid Global
#2

48. Why?

49. var a = 'global';
function b() {
var a = 'local';
var c = 'c local';
return a;
}
console.log(a);
console.log(b());
console.log(c);
Scope
Avoid Global

50. var a = 'global';
function b() {
var a = 'local';
var c = 'c local';
return a;
}
console.log(a);
console.log(b());
console.log(c);
Scope
Avoid Global

51. var a = 'global';
function b() {
var a = 'local';
var c = 'c local';
return a;
}
console.log(a);
console.log(b());
console.log(c);
Scope
Avoid Global

52. var a = 'global';
function b() {
var a = 'local';
var c = 'c local';
return a;
}
console.log(a);
console.log(b());
console.log(c);
Scope
Avoid Global
?

53. var a = 'global';
function b() {
var a = 'local';
var c = 'c local';
return a;
}
console.log(a); // 'global'
console.log(b());
console.log(c);
Scope
Avoid Global

54. var a = 'global';
function b() {
var a = 'local';
var c = 'c local';
return a;
}
console.log(a);
console.log(b()); // 'local'
console.log(c);
Scope
Avoid Global

55. var a = 'global';
function b() {
var a = 'local';
var c = 'c local';
return a;
}
console.log(a);
console.log(b());
console.log(c); // ReferenceError: c is not defined
Scope
Avoid Global

56. var a = 'global';
function b() {
var a = 'local';
var c = 'c local';
return a;
}
console.log(a); // 'global'
console.log(b()); // 'local'
console.log(c); // ReferenceError: c is not defined
Scope
Avoid Global

57. var a = 'global';
function b() {
a = 'local';
return a;
}
console.log(a);
console.log(b());
Scope
Avoid Global

58. var a = 'global';
function b() {
a = 'local';
return a;
}
console.log(a);
console.log(b());
Scope
Avoid Global

59. var a = 'global';
function b() {
a = 'local';
return a;
}
console.log(a);
console.log(b());
Scope
Avoid Global
?

60. var a = 'global';
function b() {
a = 'local';
return a;
}
console.log(a); // global
console.log(b()); // local
Scope
Avoid Global

61. var a = 'global';
function b() {
a = 'local';
return a;
}
console.log(b());
console.log(a);
Scope
Avoid Global
?

62. var a = 'global';
function b() {
a = 'local';
return a;
}
console.log(b()); // local
console.log(a); // local
Scope
Avoid Global

64. Solve?
How to

65. Immediately-invoked
Function Expression
IIFE

66. (function() {
'use strict';
// your code
})();
Scope
Avoid Global

67. function() {}
Scope
Avoid Global

68. (function() {})
Scope
Avoid Global

69. (function() {})();
Scope
Avoid Global

70. (function() {}());
Scope
Avoid Global

71. (function() {
})();
Scope
Avoid Global

72. (function() {
'use strict';
// your code
})();
Scope
Avoid Global

73. (function() {
'use strict';
function myModule() {
return 'hey!';
}
console.log(myModule()); // 'hey!'
})();
Scope
Avoid Global

75. export my module?
How can I

76. (function() {
'use strict';
function myModule() {
return 'hey!';
}
window.myModule = myModule;
})();
console.log(window.myModule());
console.log(myModule());
Scope
Avoid Global

77. (function() {
'use strict';
function myModule() {
return 'hey!';
}
window.myModule = myModule;
})();
console.log(window.myModule());
console.log(myModule());
Scope
Avoid Global

78. (function() {
'use strict';
function myModule() {
return 'hey!';
}
window.myModule = myModule;
})();
console.log(window.myModule());
console.log(myModule());
Scope
Avoid Global

79. Scope
Use local

80. (function(win, $) {
'use strict';
function myModule() {
return $('[data-js="container"]').html();
}
win.myModule = myModule;
})(window, jQuery);
Scope
Use local

81. (function(win, $) {
'use strict';
function myModule() {
return $('[data-js="container"]').html();
}
win.myModule = myModule;
})(window, jQuery);
Scope
Use local

82. (function(win, $) {
'use strict';
function myModule() {
return $('[data-js="container"]').html();
}
win.myModule = myModule;
})(window, jQuery);
Scope
Use local

83. namespace
Use a

84. (function(win) {
'use strict';
function myModule() {
return 'hey!';
}
win.MyProjectName = win.MyProjectName || {};
win.MyProjectName.myModule = myModule;
})(window);
console.log(MyProjectName.myModule()); // 'hey!'
namespace
Use a

85. (function(win) {
'use strict';
function myModule() {
return 'hey!';
}
win.MyProjectName = win.MyProjectName || {};
win.MyProjectName.myModule = myModule;
})(window);
console.log(MyProjectName.myModule()); // 'hey!'
namespace
Use a

86. (function(win) {
'use strict';
function myModule() {
return 'hey!';
}
win.MyProjectName = win.MyProjectName || {};
win.MyProjectName.myModule = myModule;
})(window);
console.log(MyProjectName.myModule()); // 'hey!'
namespace
Use a

87. (function(win) {
'use strict';
function myModule() {
return 'hey!';
}
win.MyProjectName = win.MyProjectName || {};
win.MyProjectName.myModule = myModule;
})(window);
console.log(MyProjectName.myModule()); // 'hey!'
namespace
Use a

88. into array
Convert array-like
#3

89. var $links = document.querySelectorAll('a');
console.log($links.length);
console.log($links[0]);
console.log(Array.isArray($links));
console.log($links.pop());
into array
Convert array-like

90. var $links = document.querySelectorAll('a');
console.log($links.length);
console.log($links[0]);
console.log(Array.isArray($links));
console.log($links.pop());
into array
Convert array-like

91. var $links = document.querySelectorAll('a');
console.log($links.length); // 10
console.log($links[0]);
console.log(Array.isArray($links));
console.log($links.pop());
into array
Convert array-like

92. var $links = document.querySelectorAll('a');
console.log($links.length);
console.log($links[0]); // <a href=""></a>
console.log(Array.isArray($links));
console.log($links.pop());
into array
Convert array-like

93. var $links = document.querySelectorAll('a');
console.log($links.length);
console.log($links[0]);
console.log(Array.isArray($links)); // false
console.log($links.pop());
into array
Convert array-like

94. var $links = document.querySelectorAll('a');
console.log($links.length);
console.log($links[0]);
console.log(Array.isArray($links));
console.log($links.pop());
// TypeError: $links.pop is not a function
into array
Convert array-like

96. slice
into array
Convert array-like

97. var numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice(0, 2));
into array
Convert array-like

98. var numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice(0, 2)); // [10, 20]
into array
Convert array-like

99. var numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice(1, 4));
// [20, 30, 40]
into array
Convert array-like

100. var numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice(1, 10));
// [20, 30, 40, 50]
into array
Convert array-like

101. var numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice(1));
// [20, 30, 40, 50]
into array
Convert array-like

102. var numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice(0));
// [10, 20, 30, 40, 50]
into array
Convert array-like

103. var numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice());
// [10, 20, 30, 40, 50]
into array
Convert array-like

104. var numbers = [10, 20, 30, 40, 50];
var numbers2 = numbers.slice();
console.log(numbers === numbers2); // false
into array
Convert array-like

105. var numbers = [10, 20, 30, 40, 50];
var numbers2 = numbers;
console.log(numbers === numbers2); // true
into array
Convert array-like

106. var $links = document.querySelectorAll('a');
console.log($links.length); // 10
console.log(Array.isArray($links)); // false
console.log($links.pop());
// TypeError: $links.pop is not a function
into array
Convert array-like

107. var $links = Array.prototype.slice.call(
document.querySelectorAll('a')
);
console.log($links.length);
console.log(Array.isArray($links));
console.log($links.pop());
into array
Convert array-like

109. var $links = Array.prototype.slice.call(
document.querySelectorAll('a')
);
console.log($links.length); // 10
console.log(Array.isArray($links));
console.log($links.pop());
into array
Convert array-like

110. var $links = Array.prototype.slice.call(
document.querySelectorAll('a')
);
console.log($links.length);
console.log(Array.isArray($links)); // true
console.log($links.pop());
into array
Convert array-like

111. var $links = Array.prototype.slice.call(
document.querySelectorAll('a')
);
console.log($links.length);
console.log(Array.isArray($links));
console.log($links.pop()); // <a href=""></a>
into array
Convert array-like

113. function func() {
return Array.isArray(arguments);
}
console.log(func(1, 2, 3));
into array
Convert array-like

114. function func() {
return Array.isArray(arguments);
}
console.log(func(1, 2, 3));
into array
Convert array-like

115. function func() {
return Array.isArray(arguments);
}
console.log(func(1, 2, 3)); // false
into array
Convert array-like

116. function func() {
var args = Array.prototype.slice.call(arguments);
return Array.isArray(args);
}
console.log(func(1, 2, 3));
into array
Convert array-like

117. function func() {
var args = Array.prototype.slice.call(arguments);
return Array.isArray(args);
}
console.log(func(1, 2, 3)); // true
into array
Convert array-like

119. object types
Getting real
#4

120. console.log(typeof 10); // 'number'
object types
Getting real

121. console.log(typeof 'test'); // string
object types
Getting real

122. console.log(typeof true); // boolean
object types
Getting real

123. console.log(typeof function(){}); // function
object types
Getting real

124. console.log(typeof {}); // object
object types
Getting real

125. console.log(typeof []); // object
object types
Getting real

126. function test() {
return typeof arguments;
}
console.log(test()); // object
object types
Getting real

128. toString
object types
Getting real

129. var obj = {};
console.log(obj.toString());
// '[object Object]'
object types
Getting real

130. // '[object Object]'
object types
Getting real

131. Object.prototype.toString.call([]);
// '[object Array]'
object types
Getting real

132. Object.prototype.toString.call(function() {});
// '[object Function]'
object types
Getting real

133. function test() {
return Object.prototype.toString.call(
arguments
);
}
console.log(test()); // [object Arguments]
object types
Getting real

134. function is(type, object) {
type = type[0].toUpperCase() + type.slice(1);
return Object.prototype.toString
.call(object) === '[object ' + type + ']';
}
object types
Getting real

135. function is(type, object) {
type = type[0].toUpperCase() + type.slice(1);
return Object.prototype.toString
.call(object) === '[object ' + type + ']';
}
object types
Getting real

136. function is(type, object) {
type = type[0].toUpperCase() + type.slice(1);
return Object.prototype.toString
.call(object) === '[object ' + type + ']';
}
object types
Getting real

137. function is(type, object) {
type = type[0].toUpperCase() + type.slice(1);
return Object.prototype.toString
.call(object) === '[object ' + type + ']';
}
object types
Getting real

138. function is(type, object) {
type = type[0].toUpperCase() + type.slice(1);
return Object.prototype.toString
.call(object) === '[object ' + type + ']';
}
object types
Getting real

139. is(object', {});
is('array', []);
is('function', function() {});
is('object', []);
object types
Getting real

140. is(object', {}); // true
is('array', []);
is('function', function() {});
is('object', []);
object types
Getting real

141. is(object', {});
is('array', []); // true
is('function', function() {});
is('object', []);
object types
Getting real

142. is(object', {});
is('array', []);
is('function', function() {}); // true
is('object', []);
object types
Getting real

143. is(object', {});
is('array', []);
is('function', function() {});
is('object', []); // false
object types
Getting real

144. instead loops
Use array methods
#5

145. var numbers = [10, 20, 30];
for(var i = 0; i < numbers.length; i++) {
console.log('array[' + i + '] =', numbers[i]);
}
instead loops
Use array methods

146. var numbers = [10, 20, 30];
for(var i = 0; i < numbers.length; i++) {
console.log('array[' + i + '] =', numbers[i]);
}
instead loops
Use array methods

147. var numbers = [10, 20, 30];
for(var i = 0; i < numbers.length; i++) {
console.log('array[' + i + '] =', numbers[i]);
}
instead loops
Use array methods

148. array[0] = 10
array[1] = 20
array[2] = 30
instead loops
Use array methods

149. forEach
instead loops
Use array methods

150. var numbers = [10, 20, 30];
numbers.forEach(function(item, index) {
console.log('array[' + index + '] =', item);
});
instead loops
Use array methods

151. var numbers = [10, 20, 30];
numbers.forEach(function(item, index) {
console.log('array[' + index + '] =', item);
});
instead loops
Use array methods

152. var numbers = [10, 20, 30];
numbers.forEach(function(item, index) {
console.log('array[' + index + '] =', item);
});
instead loops
Use array methods

153. array[0] = 10
array[1] = 20
array[2] = 30
instead loops
Use array methods

154. var numbers = [10, 20, 30];
function logNumbers(item, index) {
console.log('array[' + index + '] =', item);
}
numbers.forEach(logNumbers);
instead loops
Use array methods

155. var numbers = [10, 20, 30];
function logNumbers(item, index) {
console.log('array[' + index + '] =', item);
}
numbers.forEach(logNumbers);
instead loops
Use array methods

156. signature
forEach method

157. arr.forEach(callback[, thisArgument]);
signature
forEach method

158. callback(
currentValue,
index,
array
)
signature
forEach method

159. var numbers = [10, 20, 30];
numbers.forEach(function(item, index, array) {
console.log('array[' + index + '] =', array[index]);
});
instead loops
Use array methods

160. var numbers = [10, 20, 30];
numbers.forEach(function(item, index, array) {
console.log('array[' + index + '] =', array[index]);
});
instead loops
Use array methods

161. var numbers = [10, 20, 30];
numbers.forEach(function(item, index, array) {
console.log('array[' + index + '] =', array[index]);
});
instead loops
Use array methods

162. array[0] = 10
array[1] = 20
array[2] = 30
instead loops
Use array methods

163. var numbers = [10, 20, 30];
numbers.forEach(function(item, index, array) {
console.log('array[' + index + '] =', this[index]);
});
instead loops
Use array methods

164. var numbers = [10, 20, 30];
numbers.forEach(function(item, index, array) {
console.log('array[' + index + '] =', this[index]);
});
instead loops
Use array methods

165. var numbers = [10, 20, 30];
numbers.forEach(function(item, index, array) {
console.log('array[' + index + '] =', this[index]);
});
instead loops
Use array methods

166. array[0] = 10
array[1] = 20
array[2] = 30
instead loops
Use array methods

167. var numbers = [10, 20, 30];
var numbers2 = [11, 21, 31];
function logNumbers(item, index, array) {
console.log('array[' + index + '] =', this[index]);
}
numbers.forEach(logNumbers, numbers2);
instead loops
Use array methods

168. var numbers = [10, 20, 30];
var numbers2 = [11, 21, 31];
function logNumbers(item, index, array) {
console.log('array[' + index + '] =', this[index]);
}
numbers.forEach(logNumbers, numbers2);
instead loops
Use array methods

169. var numbers = [10, 20, 30];
var numbers2 = [11, 21, 31];
function logNumbers(item, index, array) {
console.log('array[' + index + '] =', this[index]);
}
numbers.forEach(logNumbers, numbers2);
instead loops
Use array methods

170. array[0] = 11
array[1] = 21
array[2] = 31
instead loops
Use array methods

171. map
instead loops
Use array methods

172. var numbers = [10, 20, 30];
var numbers2 = numbers.map(plusOne);
function plusOne(number) {
return number + 1;
}
console.log(numbers2);
instead loops
Use array methods

173. var numbers = [10, 20, 30];
var numbers2 = numbers.map(plusOne);
function plusOne(number) {
return number + 1;
}
console.log(numbers2);
instead loops
Use array methods

174. var numbers = [10, 20, 30];
var numbers2 = numbers.map(plusOne);
function plusOne(number) {
return number + 1;
}
console.log(numbers2);
instead loops
Use array methods

175. var numbers = [10, 20, 30];
var numbers2 = numbers.map(plusOne);
function plusOne(number) {
return number + 1;
}
console.log(numbers2);
instead loops
Use array methods

176. var numbers = [10, 20, 30];
var numbers2 = numbers.map(plusOne);
function plusOne(number) {
return number + 1;
}
console.log(numbers2);
instead loops
Use array methods

177. var numbers = [10, 20, 30];
var numbers2 = numbers.map(plusOne);
function plusOne(number) {
return number + 1;
}
console.log(numbers2);
instead loops
Use array methods
?

178. var numbers = [10, 20, 30];
var numbers2 = numbers.map(plusOne);
function plusOne(number) {
return number + 1;
}
console.log(numbers2); // [11, 21, 31]
instead loops
Use array methods

179. every
instead loops
Use array methods

180. var numbers = [10, 20, 30];
var isAllEven = numbers.every(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(isAllEven);
instead loops
Use array methods

181. var numbers = [10, 20, 30];
var isAllEven = numbers.every(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(isAllEven);
instead loops
Use array methods

182. var numbers = [10, 20, 30];
var isAllEven = numbers.every(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(isAllEven);
instead loops
Use array methods

183. var numbers = [10, 20, 30];
var isAllEven = numbers.every(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(isAllEven);
instead loops
Use array methods

184. var numbers = [10, 20, 30];
var isAllEven = numbers.every(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(isAllEven);
instead loops
Use array methods

185. var numbers = [10, 20, 30];
var isAllEven = numbers.every(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(isAllEven);
instead loops
Use array methods
?

186. var numbers = [10, 20, 30];
var isAllEven = numbers.every(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(isAllEven); // true
instead loops
Use array methods

187. var numbers = [10, 20, 25, 30];
var isAllEven = numbers.every(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(isAllEven);
instead loops
Use array methods

188. var numbers = [10, 20, 25, 30];
var isAllEven = numbers.every(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(isAllEven); // false
instead loops
Use array methods

189. some
instead loops
Use array methods

190. var numbers = [11, 21, 30];
var hasEven = numbers.some(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(hasEven);
instead loops
Use array methods
?

191. var numbers = [11, 21, 30];
var hasEven = numbers.some(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(hasEven); // true
instead loops
Use array methods

192. var numbers = [11, 21, 31];
var hasEven = numbers.some(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(hasEven);
instead loops
Use array methods

193. var numbers = [11, 21, 31];
var hasEven = numbers.some(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(hasEven); // false
instead loops
Use array methods

194. filter
instead loops
Use array methods

195. var numbers = [11, 21, 30];
var justEven = numbers.filter(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(justEven);
instead loops
Use array methods

196. var numbers = [11, 21, 30];
var justEven = numbers.filter(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(justEven);
instead loops
Use array methods

197. var numbers = [11, 21, 30];
var justEven = numbers.filter(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(justEven);
instead loops
Use array methods
?

198. var numbers = [11, 21, 30];
var justEven = numbers.filter(checkEven);
function checkEven(number) {
return number % 2 === 0;
}
console.log(justEven); // [30]
instead loops
Use array methods

199. reduce
instead loops
Use array methods

200. arr.reduce(callback[, initialValue]);
signature
reduce method

201. callback(
accumulatedOrPreviousValue,
currentValue,
index,
array
)
signature
reduce method

202. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum);
instead loops
Use array methods

203. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum);
instead loops
Use array methods

204. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum);
instead loops
Use array methods

205. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum);
instead loops
Use array methods

206. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum);
instead loops
Use array methods

207. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum);
instead loops
Use array methods
?

208. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum); // 60
instead loops
Use array methods

209. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum); // 60
instead loops
Use array methods

210. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum); // 60
instead loops
Use array methods
= 30

211. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum); // 60
instead loops
Use array methods
30

212. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum); // 60
instead loops
Use array methods
= 60
30

213. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum, 1);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum);
instead loops
Use array methods

214. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum, 1);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum);
instead loops
Use array methods

215. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum, 1);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum);
instead loops
Use array methods
?

216. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum, 1);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum); // 61
instead loops
Use array methods

217. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum, 1);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum); // 61
instead loops
Use array methods

218. var numbers = [10, 20, 30];
var resultSum = numbers.reduce(sum, 1);
function sum(previous, actual) {
return previous + actual;
}
console.log(resultSum); // 61
instead loops
Use array methods

219. var myName = ['fer', 'nan', 'do'];
var pName = myName.reduce(pLanguage, '');
function pLanguage(previous, actual) {
return previous + 'P' + actual;
}
console.log(pName);
instead loops
Use array methods

220. var myName = ['fer', 'nan', 'do'];
var pName = myName.reduce(pLanguage, '');
function pLanguage(previous, actual) {
return previous + 'P' + actual;
}
console.log(pName);
instead loops
Use array methods

221. var myName = ['fer', 'nan', 'do'];
var pName = myName.reduce(pLanguage, '');
function pLanguage(previous, actual) {
return previous + 'P' + actual;
}
console.log(pName);
instead loops
Use array methods

222. var myName = ['fer', 'nan', 'do'];
var pName = myName.reduce(pLanguage, '');
function pLanguage(previous, actual) {
return previous + 'P' + actual;
}
console.log(pName);
instead loops
Use array methods

223. var myName = ['fer', 'nan', 'do'];
var pName = myName.reduce(pLanguage, '');
function pLanguage(previous, actual) {
return previous + 'P' + actual;
}
console.log(pName);
instead loops
Use array methods
?

224. var myName = ['fer', 'nan', 'do'];
var pName = myName.reduce(pLanguage, '');
function pLanguage(previous, actual) {
return previous + 'P' + actual;
}
console.log(pName); // PferPnanPdo
instead loops
Use array methods

226. var numbers = [10, 20, 30];
var numbers2 = numbers.reduce(newArray, []);
function newArray(previous, actual) {
previous.push(actual);
return previous;
}
console.log(numbers2);
instead loops
Use array methods

227. var numbers = [10, 20, 30];
var numbers2 = numbers.reduce(newArray, []);
function newArray(previous, actual) {
previous.push(actual);
return previous;
}
console.log(numbers2);
instead loops
Use array methods

228. var numbers = [10, 20, 30];
var numbers2 = numbers.reduce(newArray, []);
function newArray(previous, actual) {
previous.push(actual);
return previous;
}
console.log(numbers2);
instead loops
Use array methods

229. var numbers = [10, 20, 30];
var numbers2 = numbers.reduce(newArray, []);
function newArray(previous, actual) {
previous.push(actual);
return previous;
}
console.log(numbers2);
instead loops
Use array methods
?

230. var numbers = [10, 20, 30];
var numbers2 = numbers.reduce(newArray, []);
function newArray(previous, actual) {
previous.push(actual);
return previous;
}
console.log(numbers2); // [10, 20, 30]
instead loops
Use array methods

231. reduceRight
instead loops
Use array methods

232. array methods?
When you shouldn’t use

233. to break a loop
When you need

234. with events
Working
#6

235. var $link = document.querySelector('a');
$link.onclick = function() {
console.log('clicked!');
};
with events
Working

236. var $link = document.querySelector('a');
$link.onclick = function() {
console.log('clicked!');
};
with events
Working

237. var $link = document.querySelector('a');
$link.onclick = function() {
console.log('clicked!');
};
with events
Working

238. var $link = document.querySelector('a');
$link.onclick = function() {
console.log('clicked!');
};
with events
Working
?

239. var $link = document.querySelector('a');
$link.onclick = function() {
console.log('clicked!');
};
// 'clicked!'
with events
Working

240. var $link = document.querySelector('a');
$link.onclick = function() {
console.log('clicked!');
};
$link.onclick = function() {
console.log('clicked again!');
};
with events
Working
?

241. var $link = document.querySelector('a');
$link.onclick = function() {
console.log('clicked!');
};
$link.onclick = function() {
console.log('clicked again!');
};
// 'clicked again!'
with events
Working

242. var $link = document.querySelector('a');
$link.addEventListener('click', function() {
console.log('clicked!');
}, false);
$link.addEventListener('click', function() {
console.log('clicked again!');
}, false);
with events
Working

243. // 'clicked!'
// 'clicked again!'
with events
Working

244. with closures
Remembering values
#7

245. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
}
with closures
Remembering values

246. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
}
with closures
Remembering values

247. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
}
with closures
Remembering values

248. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
}
with closures
Remembering values

249. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
}
with closures
Remembering values

250. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
}
with closures
Remembering values
?

251. // 70
with closures
Remembering values

252. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
}
with closures
Remembering values

253. var $links = Array.prototype.slice.call(
document.querySelectorAll('a')
);
$links.forEach(function($link, index) {
$link.addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', index);
}, false);
});
with closures
Remembering values

254. var $links = Array.prototype.slice.call(
document.querySelectorAll('a')
);
$links.forEach(function($link, index) {
$link.addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', index);
}, false);
});
with closures
Remembering values

255. var $links = Array.prototype.slice.call(
document.querySelectorAll('a')
);
$links.forEach(function($link, index) {
$link.addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', index);
}, false);
});
with closures
Remembering values

256. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) (function(i) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
})(i);
with closures
Remembering values

257. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) (function(i) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
})(i);
with closures
Remembering values

258. var $links = document.querySelectorAll('a');
for(var i = 0; i < $links.length; i++) (function(i) {
$links[i].addEventListener('click', function(e) {
e.preventDefault();
console.log('counter:', i);
}, false);
})(i);
with closures
Remembering values

259. to number
Converting
#8

260. parseInt('s55');
parseInt('10px');
parseInt('1.5x25');
parseInt('0x25');
to number
Converting
?

261. parseInt('s55'); // NaN
parseInt('10px');
parseInt('1.5x25');
parseInt('0x25');
to number
Converting

262. parseInt('s55');
parseInt('10px'); // 10
parseInt('1.5x25');
parseInt('0x25');
to number
Converting

263. parseInt('s55');
parseInt('10px');
parseInt('1.5x25'); // 1
parseInt('0x25');
to number
Converting

264. parseInt('s55');
parseInt('10px');
parseInt('1.5x25');
parseInt('0x25'); // 37
to number
Converting

265. ?

266. parseInt(string[, radix]);
signature
parseInt

267. parseInt('0x'[, 16]);
signature
parseInt

268. parseInt('0X'[, 16]);
signature
parseInt

269. parseInt('0'[, 8]);
signature
parseInt

270. parseInt('0'[, 10]);
signature
parseInt

271. parseInt('s55', 10); // NaN
parseInt('10px', 10); // 10
parseInt('1.5x25', 10); // 1
parseInt('0x25', 10); // 0
to number
Converting

272. parseFloat('s55'); // NaN
parseFloat('10px'); // 10
parseFloat('1.5x25'); // 1.5
parseFloat('0x25'); // 0
to number
Converting

273. parseFloat('s55'); // NaN
parseFloat('10px'); // 10
parseFloat('1.5x25'); // 1.5
parseFloat('0x25'); // 0
to number
Converting

274. Number('150'); // 150
Number('1.42'); // 1.42
to number
Converting

275. +'150'; // 150
+'1.42'; // 1.42
to number
Converting

277. devdocs.io

278. MDN
developer.mozilla.org/en-US/docs/Web/JavaScript

281. the box!
Think outside
the box!
Think outside

282. Fernando Daciuk
FullStack Engineer
Thanks!
/fdaciuk/talks npm install fdaciuk