JavaScript как платформа разработки

JavaScript
как платформа разработки

Никита Дубко, Software Engineer

10 июля 2018

Никита Дубко

Software Engineer в iTechArt;
Департамент D7;
Опыт разработки 10+ лет;
Технологии: Full Stack.

JavaScript

Язык

Движок

Brendan Eich

Сооснователь Mozilla
Создатель языка JavaScript

Netscape Navigator

Mocha

↓

LiveScript

↓

JavaScript (1995)

JavaScript

ECMA Script (ECMA-262) — ядро
Browser Object Model (BOM)
Document Object Model (DOM)

↓

Developer Tools

Синтаксис

Операторы

var a = "Hello, World!";
// undefined
a
// "Hello, World!"
typeof a
// "string"
1, 2, 3, 4
// 4

Точка с запятой (;)

alert("Test")
var a = 1
// ✅ Success

alert("Test")
[1, 2, 3].forEach(console.log)
// ❌ TypeError: Cannot read property '3' of undefined

W3C рекомендует: всегда ставьте точку с запятой после простых операторов.

alert("Test");
[1, 2, 3].forEach(console.log);

Строгий режим

"use strict";
function strictFunction() {
    "use strict";
}

Преобразовывает ошибки в исключения
Запрещает использование with
Не добавляет новых переменных в контекст из eval
"Чинит" ошибки предыдущих версий стандарта
Запрещает использование ключевых слов из будущих версий стандарта

Объявление переменных

var a, b, c;
a = 1;
b = "two";
c = [3];

var d = 42;
var e = [1, 2, 3].reduce(function(p, c) { return p + c; });

Именование переменных

существительное;
имя чётко указывает на назначение переменной;
используется camelCase (исключение — константы).

var arrayLength = [1, 2, 3].length;
var camelCase = "";

var SOME_CONST = 42;

«Всплытие» переменных

a = 1;
var a;
console.log(a); // 1

«Всплытие» переменных

b = "some string";
if (1 > 0) {
    var b = "1 > 0";
} else {
    var b = "WAT???";
}
console.log(b); // "1 > 0"

Типы данных

number,
string,
boolean,
null,
undefined,
object*

Number

255
0xFF
2.55e2 (2.55 * 10²)
0b11111111
Number.MIN_VALUE — минимальное безопасное целое число
Number.MAX_VALUE — наибольшее представимое положительное число

NaN (Not-A-Number)

0 / 0; // NaN
"string" - 2; // NaN

NaN == NaN; // false
NaN === NaN; // false

var x = 0 / 0;
x !== x; // true

±Infinity

1 / 0; // Infinity
-1 / 0; // -Infinity

Infinity === Infinity + Infinity; // true

1e100500; // Infinity

String

UTF-16
Неизменяемые

"Double Quoted \"String\""
'Single\nQuoted\nString'
`Backtick (ES6) String`

Boolean

true;
false;

null

var x = null;
x; // null

undefined

var u;
u; // undefined

Object

var obj = {
    property: 'value',
    'some-really-strange name with spaces': false,
    'можно даже так 🙈': 42,
    method: function() { console.log('😃'); }
};

Object

var obj = new Object();
obj.property = 'value';
obj['some-really-strange name with spaces'] = false;
obj['можно даже так 🙈'] = 42;
obj.method = function() { console.log('😃'); };

Array

var a = [1, 2, 3];
var b = [];
b[0] = 1;
b[13] = 14;

var c = new Array(100);

var d = [,,,,,,,,,,];

typeof

typeof 123; // number
typeof 'Students Lab 2018'; // string
typeof true; // boolean
typeof null; // object O_o
typeof undefined; // undefined
typeof {}; // object
typeof []; // object

Математические операторы

унарные + и -
бинарные + и -
++ и --
*, /
% (остаток от деления)

Побитовые операторы

& (AND), | (OR), ^ (XOR)
~ (NOT)
<< (LEFT SHIFT), >> (RIGHT SHIFT)
>>> (ZERO-FILL RIGHT SHIFT)

Присвоение

a = 1
b += 2 эквивалентно b = b + 2
c /= 3 эквивалентно c = c / 3
d -= 4 эквивалентно d = d - 4
e *= 5 эквивалентно e = e * 5
f &= 0xFF эквивалентно f = f & 0xFF
g ^= 0b101 эквивалентно g = g ^ 0b101
...

Оператор «запятая»

var a, b, c;
a = 1, b = a, c = b + 1; // 2

Не путать с разделителем аргументов функции, полей объекта и элементов массива:

var a = [1, 2, 3];
var o = { x: 42, y: 24 };
var f = function(a, b, c) {};

Операторы сравнения

>, <
>=, <=
==, ===
!=, !==

12 > 10; // true
({}) != ({}); // true
NaN === NaN; // false

== или ===

=== не преобразует типы
== пытается привести обе стороны к одному типу для сравнения

1 == "1"; // true
1 === "1"; // false

({}) == true; // false
({}).toString() == true; // false
"[object Object]" == "true"; // false

Значения null и undefined равны == друг другу и не равны чему бы то ни было ещё.
При преобразовании в число null равен 0, а undefined равен NaN.

null == undefined; // true
null === undefined; // false

null > 0; // false
null == 0; // false
null >= 0; // true O_o

Приводите к нужному типу явно!

Логические операторы

|| (OR)
&& (AND)
! (NOT)

falsy и truly

falsy
- false
- 0
- ''
- null
- undefined
- NaN
truly — все остальное

var b = true && 0 && '';
b === 0; // true
// -------------------------------
var result = true;
if (result) {
    result = 0;
    if (result) {
        result = '';
    }
}
var b = result;

var a = false || 0 || 'value';
a === 'value'; // true
// -------------------------------
var result = false;
if (!result) {
    result = 0;
    if (!result) {
        result = 'value';
    }
}
var a = result;

function test(a, b, c) {
    a = a || 'default';
    b = b || 42;
    c = c || false;
}

Условия

if (a > b) {
    console.log('a > b');
} else {
    console.log('a <= b');
}

if (a > b) console.log('a > b');
else console.log('a < b');

Тернарный оператор

var isMore = (a > b) ? true : false;
// -------------------------------
var isMore;
if (a > b) {
    isMore = true;
} else {
    isMore = false;
}

Циклы

for
while
do ... while

Цикл for

for (var i = 0; i < 10; i++) {
    console.log(i);
}

for (var i = 10, b = 'init'; i > 0; ) {
    console.log(i);
    i--;
}

Цикл while

var isLucky = true;
while (isLucky) {
    isLucky = Math.random() > 0.5;
}

Цикл do ... while

var isLucky = false;
do {
    isLucky = Math.random() > 0.5;
} while (isLucky);

break, continue

while (true) {
    if (Math.random() > 0.5)
        break;
}
while (true) {
    if (Math.random() < 0.5)
        continue;
    break;
}

switch

switch (number) {
    case 1:
    case 2:
        console.log('один или два');
        break;
    case 3:
        console.log('три');
        break;
    default:
        console.log('мы это не проходили :|');
}

Преобразование типов

Приведение к строке

a + ""
String(a)
a.toString()

Приведение к числу

+'123'
Number(a)
parseInt(a)
parseFloat(a)

Приведение к boolean

!!a
Boolean(a)

Функции

function someFunction(someArgument) {
    var myVar = someArgument + ' test';
    var result = callSomeAnotherFunction(myVar);
    return result;
}

someFunction('2018');

arguments

function printArguments() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}
printArguments(1, 'two', [1,2,3]);

function returnUndefined() {
    doSomething();
    var a = 1 + 12;
}

var result = returnUndefined();
result === undefined; // true

function returnUndefined() {
    doSomething();
    return;
    var a = 1 + 12; // не будет исполнено
}

var result = returnUndefined();
result === undefined; // true

Имя функции

Если функция что-то делает, вычисляет — начинается с глагола:
getData, callPolice, joinItechart.
Если возвращает какой-то признак — формы глаголов to be или to have:
isStudent, hasKnowledge.
Если функция названа правильно, вам не нужно будет исследовать тело функции в месте её вызова.

Анонимные функции

var filtered = a.filter(function(element) {
    return !!a;
});

Function expression

var isMore = function(a, b) {
    return a > b;
}

new Function()

var sum = new Function('a, b', 'return a + b;');
sum(1, 2); // 3

Стек вызовов

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

function foo() {
    foo();
}
foo();

Объекты

var myObject = {
    a: 1,
    b: 'two',
    c: [3, 4, 5],
    d: {
        e: 'и так можно'
    },
    f: function() { console.log('я сделяль'); }
}

Свойства объекта

var obj = {
    a: 1,
    f: function() { console.log('test'); }
};

for (key in obj) {
    console.log(key + ': ' + obj[key]);
}

Методы объекта

var obj = {
    isMore: function(a, b) { return a > b; }
}

obj.isLess = function(a, b) { return a < b };
obj.isLess(1, 2); // true

obj['странное имя 😱'] = function() { return '😱'; }

Работа с ссылками

var user = { name: 'Tony Stark' };

var admin = user;

admin.name = 'Eddard Stark';
user.name; // 'Eddard Stark'

.toString()

.valueOf()

Массивы

var a = [];

var fruits = ["Яблоко", "Апельсин", "Слива"];
fruits[0]; // Яблоко
fruits.length; // 3

Методы массивов

unshift, shift
push, pop

length – не количество элементов массива, а последний индекс + 1.

var a = [1];
a[1000] = 'lol';
a.length; // 1001

var a = [1, 2, 3];
a[3] = 4;
a[4] = 5;
a.length; // 5

var b = new Array(1000);
b.length; // 1000

Методы массивов

join, split
splice, slice
sort
reverse
concat
indexOf, lastIndexOf

Методы массивов

forEach
filter
map
every, some
reduce, reduceRight

this

Глобальный объект

var a = 5;
window.a; // 5

Замыкания

var phrase = 'Привет';
function sayHi(name) {
    console.log(phrase + ', ' + name);
}
sayHi('Anon');  // Привет, Anon

phrase = 'Пока';
sayHi('Anon'); // Пока, Anon

Замыкания

function sayHiBye(firstName, lastName) {
    console.log( "Привет, " + getFullName() );
    console.log( "Пока, " + getFullName() );
    function getFullName() {
        return firstName + " " + lastName;
    }
}

sayHiBye("Tony", "Stark");

Замыкания

function makeCounter() {
    var currentCount = 1;
    return function() {
        return currentCount++;
    };
}
var counter = makeCounter();
counter(); // 1
counter(); // 2

Замыкание — это функция вместе со всеми внешними переменными, которые ей доступны.

Модули

(function() {
    var message = "Привет";

    function showMessage() {
        console.log( message );
    }

    showMessage();
})();

Модули

(function(w) {
    var message = "Привет";

    function showMessage() {
        console.log( message );
    }

    w.showMessage = showMessage;
})(window);

Модули

var m = (function() {
    var message = "Привет";

    function showMessage() {
        console.log( message );
    }

    return { showMessage: showMessage };
})();

this

var user = {
    name: 'Tony',

    sayHi: function() {
        console.log( 'Hi, ' + this.name );
    }
};

user.sayHi(); // Hi, Tony

this

function Animal(name) {
    this.name = name;
    this.canWalk = true;
}

var animal = new Animal("ёжик");

Конструктор

function Animal(name) {
    // this = {};
    this.name = name;
    this.canWalk = true;
    // return this;
}

var animal = new Animal("ёжик");

Явное указание this

function showFullName() {
    console.log( this.firstName + " " + this.lastName );
}
var user = {
    firstName: "Tony",
    lastName: "Stark"
};

showFullName.call(user) // "Tony Stark"

Явное указание this

f.call(контекст, аргумент1, аргумент2, ...);
f.apply(контекст, [аргумент1, аргумент2, ...]);

var n = f.bind(контекст);

var animal = {
    eats: true
};
var rabbit = {
    jumps: true
};
rabbit.__proto__ = animal;

rabbit.jumps; // true
rabbit.eats; // true

var animal = {
    eats: true
};
function Rabbit(name) {
    this.name = name;
}
Rabbit.prototype = animal;

var rabbit = new Rabbit("Кроль");
rabbit.eats; // true

Object.defineProperty(obj, prop, descriptor)

Object.getOwnPropertyDescriptor(obj, prop)

Утиная типизация

instanceof

Встроенные библиотеки

Math
Date

JSON

eval

eval is evil 😈

try..catch

setTimeout и setInterval

В браузере (движке)

Как подключить к странице

<script src="path/to/script.js"
        type="text/javascript"></script>

Как подключить к странице

<script type="text/javascript">
    var head = document.getElementsByTagName('head')[0],
    script = document.createElement('script');
    script.src = 'script.js';
    head.appendChild(script);
</script>

defer, async

Event loop

console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);
console.log('Bye');

Демо

Материалы

Спасибо за внимание!

mefody.github.io/talks/itechart-js/
@dark_mefody
n.a.dubko@gmail.com

JavaScript как платформа разработки

Никита Дубко

JavaScript

Brendan Eich

Netscape Navigator

JavaScript

Developer Tools

Синтаксис

Комментарии

Операторы

Точка с запятой (;)

Строгий режим

Объявление переменных

Именование переменных

«Всплытие» переменных

«Всплытие» переменных

Типы данных

Number

NaN (Not-A-Number)

±Infinity

String

Boolean

null

undefined

Object

Object

Array

typeof

Математические операторы

Побитовые операторы

Присвоение

Оператор «запятая­»

Операторы сравнения

== или ===

Приводите к нужному типу явно!

Логические операторы

falsy и truly

Условия

Тернарный оператор

Циклы

Цикл for

Цикл while

Цикл do ... while

break, continue

switch

Преобразование типов

Приведение к строке

Приведение к числу

Приведение к boolean

Функции

arguments

Имя функции

Анонимные функции

Function expression

new Function()

Стек вызовов

Объекты

Свойства объекта

Методы объекта

Работа с ссылками

.toString()

.valueOf()

Массивы

Методы массивов

Методы массивов

Методы массивов

this

Глобальный объект

Замыкания

Замыкания

Замыкания

Модули

Модули

Модули

this

this

Конструктор

Явное указание this

Явное указание this

Object.defineProperty(obj, prop, descriptor)

JavaScript
как платформа разработки

Оператор «запятая»