Переменные

var variable = 10 //доступна глобально
let letvariable = 100 //доступна только внутри фигурных скобок и на уровень ниже
const COLOR = 'blue' //нельзя менять значение. Можно менять obj и array через обращение к элементу внутри

Массивы

array = [1,1,2,4,8]
array.push(12)

Объекты

obj = {a: 42}
obj.name = "Name"

let job = 'Fullstack'
let person1 = {
    age: 30,
    'name': 'Имя',
    [a + b]: '', //динамический ключ
    job, //переменная в значение если совпадает с ключем то можно сократить
    print: () => 'Person', //нет this
    // toString: function(){ в новой версии function можно удалить
    toString(){
        // return `${this.age} ${this.name}`
        return Object
        .keys(this) //массив ключей
        .filter( key => key != 'toString') //фильтр по ключу, исключаем функцию
        .map(key => this[key])
        .join(' ')
    }
}

const first = {a: 1}
const second = {b: 1}

// Методы
// определяет, являются ли два значения одинаковыми значениями
Object.is(10, 10)

// обьединение, первый параметр {} чтобы не изменились first и second
Object.assign({},first, second, {new: 'new'})

// преобразование в массив
Object.entries(person)
// массив ключей
Object.keys(person)
//массив значений
Object.values(person)

Функции

// function
function summ(a, b){
    return a + b //возведение в степень
}
// стрелочная функция
let sum = (a, b) => {
    return a + b
}

function cube(a){
    return a ** 3 //возведение в степень
}

// стрелочная функция. Кавычки в передаваемых переменных необязательны если один параметр. Если всего одна возвращаемая строчка выполняемого кода можно сократить синтаксис
let cub = a => a ** 3

// параметры по умолчанию
function compute(a, b = 10){
    console.log(a + b)
}

Context

function log(){
    a = 10
    console.log(this)
}
// В стрелочной функции нет собственного контекста, он его не создает, this указывает на контекст который стоит выше
let arrowLog = () => console.log(this)

// выведет объект personal
const person = {
    age: 20,
    weight: 72,
    log: log,
    arrowLog: arrowLog,
    delayLog: function () {
        let self = this  // Так можно передать контекст this если не использовать стрелочную функцию
        setTimeout(function() {
            console.log(self.age)
        }, 500)
    },
    delayLog2: function () {
        setTimeout(() => console.log(this.age), 500)
    }
}
// выведет объект person
person.log()
// выведет window
person.arrowLog()

// this будет контекст функции Timeout, поэтому определили константу self
person.delayLog()

// Используем стрелочную функцию контекст объекта person
person.delayLog2()

Строки

let title = "Main page"
// при использовании обратных скобок можно вствлять переменную и использовать функции через ${}, можно использовать внтри другие кавычки, сохранаяются пробелы
let isVisible = () => Math.random() > 1
let template =  `
${isVisible ? '

Visible

' : ''}

${title}

` // Методы const str = 'Hello' // С каких сиволов начинается строка str.startsWith('He') // на какие символы заканчивается строка str.endsWith('lo') // поиск по символам str.includes('llo') // удалить пробелы по краям str.trim()

Rest, Spread

//Rest
// массив всех передаваемых аргументов
function average(){
    Array.from(arguments)
}
function averageRest(a, ...args){
    args
}

// Spread
let arrayS = [1, 1, 2, 3, 5]
// преобразует массив в отдельные элементы
Math.max(...arrayS)
// раньше использовался
Math.max.apply(null, arrayS)
// пример добавления элемента в массив
arrayS = [...arrayS, 8]

Destructuring

// для массивов
// let a = arrayS[0]
// let b = arrayS[1]
let [a, b = 1, , ...c] = arrayS

// для объектов
let adress = {
    country: 'Russia',
    street: 'Street',
    city: 'City',
    get: function(){
        return this.country;
    }
}
// нужно чтобы имена совпадали, можно задать свое имя через :
let {country, street = 'Улица', city: cityNewName, get,...all} = adress
// так же можно передавать функцию, но в ней используется this, поэтому дополнительно передаем объект adress
get.call(adress)

// копия объекта с изменением одного из поля и добавления новых
let newAdress = {...adress, street: 'Улица', code: 17}

Import /export

// файлы в js являются модулями

// файл module.js
export const COLOR = "#FFF"

export function compute (a, b) {
    return a + b
}

export default {
    Log(){
        console.log('log');
    }
}

// файд index.js
import {COLOR, compute} from './module.js'
// чтобы импортировать export default, нужно не указывать переменные в скобках
import Logger,{COLOR, compute} from './module.js'
// импорт все из модуля
import * as LoggerModule from './moule.js'

Классы

user = new Person('Имя')
console.log(user.__proto__ === Person.prototype)

class Programmer extends Person {
    constructor (name, job) {
        super(name) //обращение к переменной из родительского класса
        this._job = job
    }
    greet () {
        super.greet() //обращение к родительскому методу из родительского класса
        console.log(`Hi ${this.name}`)
    }
    //getter
    get job() {
        return this._job.toUpperCase()
    }

    //setter Нужен для валидации
    set job(job) {
        if(job.length < 2){
            throw new Error('Значение меньше 2')
        }
        this._job = job
    }
}

user = new Programmer('Имя', 'Проф')
console.log(user.job)
user.job = 'Работа'
console.log(user.job)

// Static
class Util {
    static average(...args){
        return args.reduce((acc, i) => acc += i, 0) / args.length
    }
}

Символы

let symbol = Symbol('demo')
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Циклы

// циклы по обьекту
for (let key in obj) {
    
}

Генераторы и Итераторы

    // Iterator
    // Итераторами можно пользоваться в циклах for of
    const array11 = [1,2,3,4,5]
    const iter = array11[Symbol.iterator]()
    // console.log(iter.next())
    
    for (let item of array11) {
        // console.log(item)
    }
    for (let key in array11) {
        
    }
    
    const country2 = {
        values: ['ru', 'en'],
        [Symbol.iterator] () {
            let i =0
            return {
                next: () => {
                    const value = this.values[i]
                    i++
                    return {
                        done: i > this.values.length,
                        value
                    }
                }
            }
        }
    }
    
    // Generator
    // Создание итератора
    function *gen (num = 4) {
        for(let i = 0; i < num; i++){
            try{
                yield i
            } catch (e){
                console.log(e)
            }
        }
    }
    const iter2 = gen(3)
    console.log(iter2.next())
    console.log(iter2.throw('Error'))
    
    for(let i of gen(5)){
        console.log(i)
    }

Промисы

    // удобная конструкция позволяющая работать с асинхронным кодом
    const promise = new Promise ( (resolve, reject) => {
        setTimeout( () => {
            resolve('ok') //успешное выполнение
            reject('no') //ошибка
        }, 500)
    })
    
    promise.then(data => console.log(data)) //сработает после выполнения кода
    
    //динамичиский delay
    const delay = ms => new Promise( (resolve, reject) =>{
        setTimeout( (data) => {
            resolve(`Done ${ms}`)
            reject(`Error ${ms}`) //если нужно вызвать ошибку, она отлавливается в catch. Чтобы сработало нужно поставить перед resolve
        }, ms)
    } )
    delay(1000)
        .then(data => console.log(data)) //срабатывает после выполнения
        .then(data => delay(2000))
        .then(data => console.log(data))
        .catch( err => console.log(err)) //отлавливание ошибок
        .finally( data => console.log('Final')) //Вызывается в в любом случае в самом конце
        
    
    // Новый синтаксис
    // асинхронная функция
    // await delay(1000)  то же самое что  delay(1000).then(data => ) Работаем на плоском уровне, нет погружения во внутренние колбэки
    async function asyncDelay () {
        try{ //для обработки ошибок
            const data = await delay(1000) 
            console.log(data)
        } catch(e) {
            console.log('Error', e)
        }
    }
    asyncDelay()
    
    // глобальные промис
    // Ждет когда завершаться все промисы
    Promise.all([
        delay(1000),
        delay(500),
        delay(1000)
    ]).then(data => console.log(data))
    // Ждет когда завершаться самы быстрый
    Promise.race([
        delay(1000),
        delay(500),
        delay(1000)
    ]).then(data => console.log(data))

map set

    // map аналог обьекта только более продвинутый
    const map = new Map(
        [['a',1]] //тип передаваемого значение entries, массив в массиве
    )
    // console.log(map.get('a')) //доступе к элементам через метод get
    map.set('b', 2).set('c', 10) //добавление
    map.clear() //очистить
    map.has() //проверка ключа
    map.delete() //удаление по ключу
    map.size //количетво элементов
    
    map.entries() //элементы
    map.keys() //ключи
    map.values() // значения
    
    
    // Set аналог массива
    //удаляет дубликаты
    const set = new Set([1, 1, 2, 3, 5, 8, 8])
    set.add() //доабвлеие
    set.clear() //очистить
    set.has() //проверка ключа
    set.delete() //удаление по ключу
    set.size //количетво элементов
    
    set.entries() //элементы
    set.keys() //ключи
    set.values() // значения
    console.log(set)

Reflect

    class Student{
        constructor(name){
            this.name = name
        }
        greet () {
            console.log(`Hi ${this.name}`)
        }
    }
    class ProtoStudent{
        university = 'Oxford'
    }
    // третим параметрам передаем какой портотип будет у обекта
    let student = Reflect.construct(Student, ['Name'], ProtoStudent)
    console.log(student.__proto__ === ProtoStudent.prototype)
    
    let student2 = Reflect.construct(Student, ['Name'])
    // запкск метода
    Reflect.apply(student2.greet, {name: 'tester'}, [])
    
    // список ключей
    console.log(Reflect.ownKeys(student2))
    
    // Блокировка модификации обьекта
    Reflect.preventExtensions(student2)
    
    // Проверка заблокирован или нет обьект
    console.log(Reflect.isExtensible(student2))
    

Proxy

    // Это класс позволяющий добавлять ловушки на обьекты
    // Например можно сделать валидатор для геттеров и сеттеров и потом применять для лубых обьектов
    const validator = {
        get(target, prop) {
            return prop in target ? target[prop] : `Поля ${prop} в объекте нет`
        },
        set(target, prop, value){
            if(value.length > 2){
                Reflect.set(target, prop, value)
            }else{
                console.log(`Длина должна быть больше 2 символов. Сейчас ${value.length} символа`)
            }
        }
    }
    const form = {
        login: 'tester',
        password: '12345'
    }
    // первым параметром передаем объект за которым нужно следить
    const formProxy = new Proxy(form, validator)
    
    console.log(formProxy.login)
    
    function log(message){
        console.log('[log]', message)
    }
    
    const proxy = new Proxy(log, {
        // target функция которую хотим вызвать
        // thisArg контекст
        // argArray параметры 
        apply(target, thisArg, argArray){
            if(argArray.length === 1){
                Reflect.apply(target, thisArg, argArray)
            }else{
                console.log('Количество аргументов не совадает')
            }
        }
    })
    // Вызываем proxy, индитична log
    proxy('1')