Beginners Guide of the JavaScript language features for web analysts.

1. JavaScript for Web Analytics
Beginners Guide by Lukáš Čech

2. Lukáš Čech
(in numbers)
Male human (35)
Internet (20)
Etnetera (11)
Analytics (8)
Father (4)
MeasureCamp (3)
Double father (2)
*) as of 16.9.2017

3. Inspired by
Principy JavaScriptu
by Riki Fridrich

4. JavaScript is a high-level,
dynamic, weakly typed, object-
based, multi-paradigm, and
interpreted programming
language.

5. High-level
Dynamic
Interpreted

7. Weakly-typed

8. var x = [0];
x == x // true
x == !x // true
['',''] == ',' // true
['',''] === ',' // false
'5' - 3 // 2
'5' + 3 // 53

9. Object-based
Multi-paradigm

11. The basics of the basics – Primitive types
Undefined
Null
Boolean
Number
String

12. The basics – Reference types
Object*) (Associative Array)
→ Array
→ Function (IIFE1)
Regex
*) JSON2

13. Primitive
var key = 1;
function add (input) {
input++;
}
add(key);
console.log(key); // 1
var obj = {key: 1};
function add (input) {
input.key++;
}
add(obj);
console.log(obj.key); // 2
Reference

14. var obj = {key: 1};
function add (input) {
input.key++;
}
add(JSON.parse(JSON.stringify(obj)));
console.log(obj.key); // 1

15. length
slice(start, end)
substring(start, end)
substr(start, length)
indexOf(), lastIndexOf()
split(separator), concat()
search(), replace()
Array Methods and PropertiesString Methods and Properties
length
push(item), pop()
shift(), unshift()
slice(), splice()
indexOf()
join(), concat()
sort(), reverse()

16. Operations & Comparisons
+, -, *, /, %, ++, --
=, +=, -=, *=, /=, %=
==, ===, !=, !==, <, >, >=, <=
&&, ||, !, typeof, instanceof
?
&, |, ~, ^, <<, >>, >>>
Still the basics

17. Control Structures
Functions
if-else, switch
for, for/in
while, do/while
try..catch, throw

18. The almost-nerdy stuff
Hoisting
Scope
Scope Chain
call(), apply(), bind()
this
Closure

19. function logString () {
var string = 'a';
console.log(string);
};
logString(); // a
console.log(string);
// Uncaught ReferenceError
// 'string' doesn't exist in global scope
var string;
string = 'a';
function logString () {
console.log(string);
};
logString(); // a
Scope ChainGlobal Vs. Function Scope

20. for (var i=0; i<3; i++) {
setTimeout(function() {
console.log(i);
}, 0);
}
// 3
// 3
// 3
function async (i) {
setTimeout(function() {
console.log(i);
}, 0);
};
for (var i=0; i<3; i++) {
async(i);
}
// 0
// 1
// 2
Calling function creates own scopeClosure is created

21. The nerdy stuff
Event Loop
Events
Callbacks

22. console.log('start');
setTimeout(function() {
console.log('hello from callback');
}, 0);
console.log('end');
// "start"
// "end"
// "hello from callback"

23. The sooo-nerdy stuff
Async
AJAX
JSONP / CORS

24. I'd have a
beer...
Event 💡

25. Sync 😢

26. Honey, bring
me a beer!!!
Async 🙌

27. Callback 😍

28. Neighboring Galaxies
Tag Management,
HTTP, DNS, SSL, Cookies,
HTML/DOM, Browsers, Console,
Local Storage, API, REST, jQuery
Web servers, Databases, Node.js, Mobile,
Linters, Package Managers, Bundlers, Task
Runners, Selenium, PhantomJS, CasperJS,
Charles Proxy, VCS, Babel, React,...

29. Don't try this at home
"use strict";
Prototypal inheritance
Promises
ECMAScript 6+
Immutable Stateless JS