javascript basics
DESCRIPTION
Basic concepts and feature of javascripts. Working with arrays, functions and OOP. Presentation prepared for summer Academy @BinaryStudioTRANSCRIPT
JavaScript
1995, Brendan Eich, Netscape
ECMAScript
Usage
Browsers Server Desktop
interpreted
JS Features:
runtime interpretersFuthark, InScript, JScript, KJS, Linear B, QtScript, Rhino, YAJI, Duktape
just-in-time interpreters
~2008
Carakan, Chakra, SpiderMonkey, SquirrelFish, Tamarin, V8, JavaScriptCore, Nashorn
ie9 Chakra
google’s V8no intermediate byte codes, no interpreter
property access
point.x
# ebx = the point objectcmp [ebx,<hidden class offset>],<cached hidden class>jne <inline cache miss>mov eax,[ebx, <cached x offset>]
interpreted
loose typed
JS Features:
Number String Boolean Object
Array Function Classes
Date
Regexp
Error
Null Undefined
variable types
variable declaration
naming rules: a-z, A-Z, _, $
num6ers (4ever)
case sensitive (type / Type)
non-reserved words
ES5
ES6
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;
interpreted
loose typed
closures
JS Features:
closuresfunction 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);
}
5agesReferenceError: age is not defined
20ages5
5ReferenceError: age is not defined
closuresfunction 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);
}
5agesReferenceError: age is not defined
20ages5
55
closuresfunction 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);
}
5agesReferenceError: age is not defined
20ages5
20ReferenceError: age is not defined
ES6
interpreted
loose typed
closures
multi-paradigmal
JS Features:
imperative functional object-oriented
Arraysvar 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"]
Arrays modifying
var ar = [3,5];
adding el to arrayadding 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]
Arrays modifying
var ar = [3, 5, -10, 6, 20, -10];
returns ar from pos 1returns 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 2removes 2 els from pos 1, adds eladds el to pos 1
[3, 5, 6, 20, -10];[3, ‘new one’, 20, -10];
[3, ‘newbie’, ‘new one’, 20, -10];
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]
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 right10
ES5
Functions
first-class
are actually objects
can represent constructors for OOP
can be passed as a parameter can take context variadic
Functionsfunction 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
(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
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
Classesfunction 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-constructorthis 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
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
Classesemulating 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 usualparameters within array
context passing}
logs ‘scaffolded 3000 coded 7000’
Classesinheritance
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
Programmername: "Joe"selfProperty: 5__proto__: Man
inheritedProperty: 5__proto__: Man
constructor: function Man(){
introduce: function () {
setName: function (name) {
__proto__: Object
__defineGetter__: function __defineSetter__: function
....
Thanks
https://github.com/msemenistyi/js-basics/
@msemenistyi
nikita.s_binary