Javascript Basics

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

nikita.semenistyi@binary-studio.com