Basic concepts and feature of javascripts. Working with arrays, functions and OOP. Presentation prepared for summer Academy @BinaryStudio

1. JavaScript

2. 1995, Brendan Eich, Netscape
ECMAScript

4. Usage
Browsers Server Desktop

5.  interpreted
JS Features:

6. runtime interpreters
Futhark, InScript, JScript, KJS, Linear B, QtScript, Rhino, YAJI, Duktape
just-in-time interpreters
~2008
Carakan, Chakra, SpiderMonkey, SquirrelFish, Tamarin, V8, JavaScriptCore, Nashorn

7. ie9 Chakra

8. google’s V8
no intermediate byte codes, no interpreter
property access
point.x
# ebx = the point object
cmp [ebx,<hidden class offset>],<cached hidden class>
jne <inline cache miss>
mov eax,[ebx, <cached x offset>]

9.  interpreted
 loose typed
JS Features:

10. Number String Boolean Object
Array Function Classes
Date
Regexp
Error
Null Undefined
variable types

11. variable declaration
naming rules:
 a-z, A-Z, _, $
 num6ers (4ever)
 case sensitive (type / Type)
 non-reserved words

12. ES5

13. ES6

14. variable declaration
naming rules:
 a-z, A-Z, _, $
 num6ers (4ever)
 case sensitive (type / Type)
 non-reserved words
var a;
var a = 5;
a = 5;
a;
ReferenceError: a is not defined
ways of declaration:
let a;
let a = 5;

15.  interpreted
 loose typed
 closures
JS Features:

16. closures
function parent(){
var width = 5;
var keyword = 'ages';
console.log(width);
console.log(keyword);
console.log(age);
child();
function child(){
var width = 20,
age = 5;
console.log(width);
console.log(keyword);
console.log(age);
}
console.log(age);
console.log(width);
}
5
ages
ReferenceError: age is not defined
20
ages
5
5
ReferenceError: age is not defined

17. closures
function parent(){
var width = 5;
var keyword = 'ages';
console.log(width);
console.log(keyword);
console.log(age);
if (true){
var width = 20,
age = 5;
console.log(width);
console.log(keyword);
console.log(age);
}
console.log(age);
console.log(width);
}
5
ages
ReferenceError: age is not defined
20
ages
5
5
5

18. closures
function parent(){
var width = 5;
var keyword = 'ages';
console.log(width);
console.log(keyword);
console.log(age);
if (true){
let width = 20,
age = 5;
console.log(width);
console.log(keyword);
console.log(age);
}
console.log(age);
console.log(width);
}
5
ages
ReferenceError: age is not defined
20
ages
5
20
ReferenceError: age is not defined
ES6

19.  interpreted
 loose typed
 closures
 multi-paradigmal
JS Features:
 imperative
 functional
 object-oriented

20. Arrays
var a = new Array();
a = [];
console.log(a.length);
var b = new Array(3,4,5,6);
b = [3,4,5,6];
console.log(b[2]);
a[3] = 'wat';
console.log(a.length);
console.log(a);
read & write
same}
same}
element accessing
element modifying
5
4
0
[undefined × 3, "wat"]

21. Arrays
modifying
var ar = [3,5];
adding el to array
adding several els to array
form string splitted with char
reversing order of els
adding new els to array
removing last element
[3,5, 10];
[3,5, 10, -5, 20, -2];
[3,5, 10, -5, 20];
3 + 5 + 10 + -5 + 20
[20, -5, 10, 5, 3];
[20, -5, 10, 5, 3, -3, -5];
ar.push(10);
ar.push(-5, 20, -2);
ar.pop();
var str = ar.join(' + ');
ar.reverse();
var secAr = [-3, -5];
ar = ar.concat(secAr);
assigning el to undefined [20, -5, 10, 5, undefined, -3, -5]delete ar[4]

22. Arrays
modifying
var ar = [3, 5, -10, 6, 20, -10];
returns ar from pos 1
returns 4 els from pos 2
adds els to the start
returns ar from pos 2 from the end
[5, -10, 6, 20, -10];
[-10, 6, 20, -10];
[20, -10];
[4, -5, 7, 5, ‘newbie’, ‘new one’, 20, -10];
ar.slice(1);
ar.slice(2,4);
ar.slice(-2);
ar.splice(2,1);
ar.splice(1,2, 'new one');
ar.splice(1,0, 'newbie');
ar.shift();
ar.unshift(5);
ar.unshift(4, -5, 7);
ar.unshift(); does nothing [4, -5, 7, 5, ‘newbie’, ‘new one’, 20, -10];
adds el to the start [5, ‘newbie’, ‘new one’, 20, -10];
removes el from the start [‘newbie’, ‘new one’, 20, -10];
removes el from pos 2
removes 2 els from pos 1, adds el
adds el to pos 1
[3, 5, 6, 20, -10];
[3, ‘new one’, 20, -10];
[3, ‘newbie’, ‘new one’, 20, -10];

23. Arrays
traversing
var ar = [-2, 4, 7];
Iterates through array 0 6 9
a should be earlier
for (var i = 0; i < ar.length; i++){
console.log(ar[i] + 2);
}
ar.sort(function(a, b){
if (a > b){
return -1;
} else if (a === 0) {
return 0;
} else {
return 1;
}
});
ar.sort(function(a, b){
return b - a;
});
do nothing
b should be earlier
same result
[7, 4, -2]
[7, 4, -2]

24. var ar = [10, 20, -5];
ar.forEach(function(el, idx, array){
console.log(el, idx);
});
ar.filter(function(el){
if (el > 0) return true;
});
ar.map(function(el){
return el * 2;
});
ar.reduce(function(a, b){
return a + b;
});
ar.reduceRight(function(a, b){
return a + 0.5 * b;
});
Arrays
traversing
Iterates through array 0 6 9
returns filtered array [10, 20]
performs action on every el [20, 40, -10]
forms one value by performing action to els from the left 25
forms one value by performing action to els from the right 10
ES5

25. Functions
 first-class
 are actually objects
 can represent constructors for OOP
 can be passed as a parameter
 can take context
 variadic

26. Functions
function countToNumber(first, last){
var countOnce = function (options){
return options.interim + options.number + options.divider;
}
var result = '';
if (arguments.length === 1) last = 10;
while (typeof first === 'number' && typeof last === 'number' && first <= last){
var params = {
number: first,
divider: '-',
interim: result
};
result = countOnce(params);
first++;
}
return result;
}
console.log(countToNumber(1, 5));
function declaration
function expression nested function
passing hash as an argument
variadic function use
1-2-3-4-5-
declaration & call

27. (function (str, callback){
if (typeof str === 'string'){
str = str.replace(/pain/g, 'fun');
callback(str);
}
})(str, logFirstWord);
var str = 'invoking function is pain';
function logFirstWord(param){
if (typeof param === 'string'){
var words = param.split(' ');
console.log(words[words.length - 1]);
} else {
throw new Error('Parameter is not a string');
}
}
Functions
immediately-invoked
passing function as an argument
calling function as a constructor
fun
Immediately-invoked

28. Classes
 absent
 we’ll still call them classes though they’re objects
 access modifiers are absent
 we can emulate them
 inheritance is prototype-based
 composition over inheritance from the box

29. Classes
function Programmer(options){
this.languages = ['python', 'js'];
this.yearsXP = 1;
this.learnLanguage = function(name){
if (typeof name === 'string'){
this.languages.push(name);
}
}
}
var stewie = new Programmer();
stewie.learnLanguage('ruby');
console.log(stewie.languages);
var hamid = new Programmer();
hamid.learnLanguage('c#');
console.log(hamid.languages);
function-constructor
this points to the object's context
defining method by passing function as a property
creating instance of a Programmer class
["python", "js", "ruby"]
["python", "js", “c#"]
creating / instantiating

30. Classesfunction Programmer(options){
var languages = ['python', 'js'];
this.yearsXP = 1;
this.learnLanguage = function(name){
if (typeof name === 'string'){
languages.push(name);
logNewLanguage(name);
}
}
function logNewLanguage(language){
console.log(language);
}
}
Programmer.prototype.gainXP = function(years){
if (typeof years === 'number'){
this.yearsXP += years;
}
}
var suzy = new Programmer();
suzy.learnLanguage('php');
suzy.logNewLanguage('php');
private property
private method
logs ‘php’
TypeError: Object #<Programmer> has no method 'logNewLanguage‘
defining method using prototype
using prototype
privileged method

31. Classes
emulating private members
Programmer = function (options){
var languages = ['python', 'js'];
this.yearsXP = 1;
this.projects = [];
this.projects['Academy'] = {
monthsEstimated: 2,
codeLinesEstimated: 10000
};
}
Programmer.prototype.justCode = function(projectName) {
if (typeof projectName !== 'undefined' && typeof this.projects[projectName] !== 'undefined')
var percents = 30;
var linesScaffolded = scaffold.call(this, projectName, percents);
var linesCoded = codeWithHands.apply(this, [projectName, linesScaffolded]);
console.log('scaffolded ' + linesScaffolded, ' coded ' + linesCoded);
};
function scaffold(projectName, percents){
if (this.projects[projectName].codeLinesEstimated > 0 && percents > 0 && percents < 100){
return Math.ceil(this.projects[projectName].codeLinesEstimated / 100) * percents;
}
}
function codeWithHands(projectName, linesScaffolded){
return this.projects[projectName].codeLinesEstimated - linesScaffolded;
}
var lee = new Programmer();
lee.justCode('Academy');
public method
private method
private method
parameters as usual
parameters within array
context passing}
logs ‘scaffolded 3000 coded 7000’

32. Classes
inheritance
function Man(){
this.inheritedProperty = 5;
}
Man.prototype.setName = function(name) {
if (typeof name === 'string'){
this.name = name;
}
};
Man.prototype.introduce = function() {
console.log("Hi, my name is " + this.name);
};
var kelly = new Man();
kelly.setName('Kelly');
kelly.introduce();
function Programmer(){
this.selfProperty = 5;
}
Programmer.prototype = new Man();
var joe = new Programmer();
joe.setName('Joe');
joe.introduce();
constructor
constructor
inheriting prototype members of super
Hi, my name is Kelly
Hi, my name is Joe
Programmer
name: "Joe"
selfProperty: 5
__proto__: Man
inheritedProperty: 5
__proto__: Man
constructor: function Man(){
introduce: function () {
setName: function (name) {
__proto__: Object
__defineGetter__: function
__defineSetter__: function
....

33. Thanks
https://github.com/msemenistyi/js-basics/
@msemenistyi
nikita.s_binary
nikita.semenistyi@binary-studio.com