Функции

• Объединить группу действий
• Не повторять код (DRY)
• Рекурсивный вызов
• Создать область видимости

Функции

function hello() {
    return 'Hello, World'!;
}
        

Аргументы

function min(a, b) {
    return a < b ? a : b;
}
        

min(2, 7);    // 2

min(3, 4, 2); // 3

min(13);      // undefined

Аргументы

function min(a, b) {
    return a > b ? b : a;
}
        

min(2, 7);    // 2
min(13);      // 13
       

Аргументы

function min(a, b) {
    if (b === undefined) {
        return a;
    }

    return a < b ? a : b;
}
        

min(2, 7);    // 2
min(13);      // 13
       

Аргументы. Значения по умолчанию

function min(a, b = Infinity) {
    return a < b ? a : b;
}
        

min(2, 7);    // 2
min(13);      // 13
       

Аргументы. Значения по умолчанию

function log(a = 'hello') {
    console.log(a);
}
        

log(); // hello
            

log(undefined); // hello
            

log(0); // 0
            

log(null); // null
        

Именованные аргументы

function BMI(params) {
    const { weight, height } = params;

    return weight / (height * height);
}
        

BMI({ weight: 60, height: 1.7 }) // 20.7
        

Именованные аргументы. Деструктуризация

function BMI(params) {
    const { weight, height } = params;

    return weight / (height * height);
}
        

BMI({ weight: 60, height: 1.7 }) // 20.7
        

Именованные аргументы. Достоинства

• Удобно, если несколько необязательных аргументов
• Неважен порядок аргументов
• Неограниченное число аргументов

Именованные аргументы. Недостатки

• Неявный интерфейс

arguments

Объект arguments - это массивоподобный объект, который содержит аргументы, переданные в функцию.

arguments MDN docs

arguments

function example() {
    arguments[1]; // 12
    arguments.length; // 2
}

example(3, 12);
        

arguments

function sum() {
    let sum = 0;

    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }

    return sum;
}
        

sum(); // 0
sum(2); // 2
sum(2, 4, 8);   // 14
        

Rest operator

function example(a, b, ...others) {
    console.log(a);
    console.log(b);
    console.log(others);
}
        

example(1, 2, 3, 4, 5);
// 1
// 2
// [3, 4, 5]
        

Rest operator

function sum(...numbers) {
    return numbers.reduce((sum, item) => {
        return sum + item;
    }, 0);
}
        

sum(1, 2, 3); // 6
        

Способы объявления функции

// function declaration
function add(a, b) {
    return a + b;
}
        

// function expression
const add = function (a, b) {
    return a + b;
}
        

function declaration

add(2, 3);

function add(a, b) {
    return a + b;
}
        

function declaration

add(2, 3); // 5

function add(a, b) {
    return a + b;
}
        

function expression

add(2, 3);

const add = function (a, b) {
    return a + b;
};
        

function expression

add(2, 3); // ReferenceError: add is not defined

const add = function (a, b) {
    return a + b;
};
        

Named function expression

const factorial = function inner(n) {
    return n === 1 ?
        1 : n * inner(n - 1);
}
        

typeof factorial; // 'function'
typeof inner; // undefined
factorial(3);    // 6
        

Arrow function

const add = (a, b) => {
    return a + b;
};
        

const add = (a, b) =>  (a + b);
        

const pow2 = a => Math.pow(a, 2);
        

arguments в стрелочных функциях

В браузере:

const func = () => console.log(arguments);

func(); // ReferenceError: arguments is not defined
            

arguments в стрелочных функциях

function argumentsTest(str) {
    console.log(arguments);

    const arrowFunc = (a, b) => {
        console.log(arguments);
    }

    arrowFunc(1, 2);
}


            

arguments в стрелочных функциях

function argumentsTest(str) {
    console.log(arguments); // [Arguments] { '0': 'test' }

    const arrowFunc = (a, b) => {
        console.log(arguments); // [Arguments] { '0': 'test' }
    }

    arrowFunc(1, 2);
}

argumentsTest('test');
            

Область видимости

const text = 'Привет';

function greet() {}
            

┌{ text, greet }
│
│
│
            

Создание области видимости

function greet() {
    const text = 'Привет';
    text; // 'Привет'
}
                

┌{ greet }
├─┬{ text }
│ │
│ │
│
│
│
                

Создание области видимости

function greet() {
    const text = 'Привет';
    text; // 'Привет'
}

text;   // ReferenceError:
        //    text is not defined
                

┌{ greet }
├─┬{ text }
│ │
│ │
│
│
│
                

Вложенные функции

function greet() {
    let text = 'Привет';

    function nested() {
        text; // 'Привет'
    }
}
                

┌{ greet }
├─┬{ text, nested }
│ │
│ │
│ ├─┬{ }
│ │ │
│ │
│
                

Затенение (Variable shadowing)

function greet() {
    let text = 'Привет';

    function nested() {
        let text = 'Пока';
        text; // 'Пока'
    }

    text; // 'Привет'
}
                

┌{ greet }
├─┬{ text: Привет, nested }
│ │
│ │
│ ├─┬{ text: Пока }
│ │ │
│ │ │
│ │
│ │
│ │
│
                

Блочные области видимости

let x = 10;
var y = 10;
{
    let x = 5;
    var y = 5;
    {
        let x = 2;
        var y = 2;
        console.log(x);
        console.log(y);
    }
    console.log(x);
    console.log(y);
}
console.log(x);
console.log(y);
        

Блочные области видимости

let x = 10;
var y = 10;
{
    let x = 5;
    var y = 5;
    {
        let x = 2;
        var y = 2;
        console.log(x); // 2
        console.log(y); // 2
    }
    console.log(x);
    console.log(y);
}
console.log(x);
console.log(y);
        

Блочные области видимости

let x = 10;
var y = 10;
{
    let x = 5;
    var y = 5;
    {
        let x = 2;
        var y = 2;
        console.log(x); // 2
        console.log(y); // 2
    }
    console.log(x); // 5
    console.log(y); // 2
}
console.log(x);
console.log(y);
        

Блочные области видимости

let x = 10;
var y = 10;
{
    let x = 5;
    var y = 5;
    {
        let x = 2;
        var y = 2;
        console.log(x); // 2
        console.log(y); // 2
    }
    console.log(x); // 5
    console.log(y); // 2
}
console.log(x); // 10
console.log(y); // 2
        

Выполнение кода

1. Инициализация
   1. function declaration
   2. var
2. Собственно выполнение

Всплытие функций

add(2, 3);  // 5

function add(a, b) {
    return a + b;
}
        

Всплытие переменных. var

add(2, 3);  // TypeError:
            // add is not a function

var add = function (a, b) {
    return a + b;
}
        

var add;
add(2, 3);

add = function (a, b) {
    return a + b;
};

Всплытие переменных. let/const

add(2, 3);  // ReferenceError: add is not defined

const add = function (a, b) {
    return a + b;
}
        

Функции в js

У функций есть собственные поля и методы

function sum(a, b){
    return a+b;
}

console.log(sum.length); // 2
console.log(typeof sum.bind); // "function"
        

Можно добавлять новые поля и методы

function sum(a, b){
    return a+b;
}

sum.myFunctionName = 'it is sum function';

console.log(sum.myFunctionName); // 'it is sum function'
        

Можно добавлять новые поля и методы

function sum(a, b){
    sum.counter++;

    return a+b;
}

sum.counter = 0; // sum.counter === 0

sum(1, 2); // sum.counter === 1
sum(2, 3); // sum.counter === 2
        

Мемоизация

function binPow = n => Math.pow(n, 2);
        

function binPow(n) {
    if (!binPow.memo) {
        binPow.memo = {};
    };

    if (!binPow.memo[n]) {
        binPow.memo[n] = Math.pow(n, 2);
    }

    return binPow.memo[n];
}
        

Функции в js – это функции высшего прядка

• может принимать другую функцию в качестве аргумента
• может возвращать функцию

Передача функции в качестве аргумента

                const log = function(number){
                  console.log(number);
                }

                [1, 2, 3].forEach(log);

                [1, 2, 3].forEach(function(number){
                  console.log(number);
                });

                [1, 2, 3].forEach(number => {
                  console.log(number);
                });
        

Функции в качестве возвращаемого значения

function getAwesomeFunction() {
    return function awesomeFunction() {
        return 'you are awesome';
    }
}
        

const awesomeFunction = getAwesomeFunction();

console.log(typeof awesomeFunction); // function
console.log(awesomeFunction()); // 'you are awesome'
        

Замыкание

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

Замыкание

const name = "Мир";

function greet() {
        return `Привет, ${name}`;
}

        

helloWorld(); // "Привет, мир!"
        

Замыкание

function makeCounter() {
    let currentCount = 0;

    return function () {
        return currentCount++;
    };
}
            

┌{ makeCounter }
├─┬{ currentCount }
│ │
│ │
│ ├─┬{ }
│ │ │
│ │
│

Замыкание

const counter = makeCounter();
counter(); // 0
counter(); // 1
counter(); // 2

const yetAnother = makeCounter();
yetAnother(); // 0
        

Замыкание

function greet(name) {
    return function () {
        return `Привет, ${name}!`;
    }
}

let helloWorld = greet('мир');
helloWorld(); // "Привет, мир!"
        

let helloKate = greet('Катя');
helloKate(); // "Привет, Катя!"
        

this в Java

public class User {
    private int age = 30;

    public void showAge() {
        System.out.println(this.age);
    }
}

public static void main(String []args){
    User vasya = new User();

    vasya.showAge();
}
        

this в Javascript

class User () {
    constructor() {
        this.age = 24;
    }

    showAge() {
        return this.age;
    }
}

const mike = new User();

mike.showAge(); // 24
        

Свойства this

• ключевое слово
• указывает на текущий контекст
• нельзя перезаписать

this за пределом объекта

this.innerWidth; // 1440
        

this.process.version; // 'v10.8.0'
        

Контекст исполнения

Значение this зависит от:

1. Типа участка кода
2. Как мы попали на этот участок
3. Режима работы интерпретатора

Тип участка кода. Глобальный в браузере

this.innerWidth; // 1440
        

window.innerWidth; // 1440
        

innerWidth; // 1440
        

Тип участка кода. Глобальный в Node.js

this.process.version; // 'v10.8.0'
        

global.process.version; // 'v10.8.0'
        

process.version; // 'v10.8.0'
        

Тип участка кода. Глобальный

console.log('Hello!');

        

window.console.log('Hello!');
        

this.console.log('Hello!');
        

Тип участка кода. Глобальный

this === global; // true
        

Как попали на участок кода. Простой вызов

function getSelf() {
    return this;
}

getSelf(); // global
        

Как попали на участок кода. Метод объекта

const block = {
    innerHeight: 200,

    getHeight: function () {
        return this.innerHeight;
    }
}
                

???.innerHeight;
                

Как попали на участок кода. Метод объекта

const block = {
    innerHeight: 200,

    getHeight: function () {
        return this.innerHeight;
    }
}

block.getHeight(); // 200
                

block.innerHeight;
                

Как попали на участок кода. Метод объекта

const block = {
    innerHeight: 200,

    getHeight: function () {
        return this.innerHeight;
    }
}

const getHeight = block.getHeight;
                

???.innerHeight;
                

Как попали на участок кода. Метод объекта

const block = {
    innerHeight: 200,

    getHeight: function () {
        return this.innerHeight;
    }
}

const getHeight = block.getHeight;
getHeight();
                

window.innerHeight;
                

Заимствование метода.

call

Метод call() вызывает функцию с указанным значением this и индивидуально предоставленными аргументами.

Function.prototype.call() - JavaScript | MDN

fun.call(newThis, arg1, arg2, ...);
        

Как попали на участок кода. Заимствование метода

const mike = {
    age: 30,

    getAge: function () {
        return this.age;
    }
};
const jane = {
    age: 24
};
                

???.age;
                

Как попали на участок кода. Заимствование метода

const mike = {
    age: 30,

    getAge: function () {
        return this.age;
    }
};
const jane = {
    age: 24
};
mike.getAge.call(jane); // 24
                

jane.age;
                

apply

Метод apply() вызывает функцию с указанным значением this и аргументами, предоставленными в виде массива.

Function.prototype.apply() - JavaScript | MDN

    fun.apply(newThis, [arg1, arg2]);
        

apply

Math.min(4, 7, 2, 9); // 2
        

const numbers = [4, 7, 2, 9];
Math.min(arr); // NaN
        

Math.min.apply(Math, numbers); // 2
        

Math.min.apply(null, numbers); // 2
        

Spread operator

const numbers = [4, 7, 2, 9];

Math.min(...numbers); // 2
        

Как попали на участок кода. Callback

const person = {
    name: 'Jack',
    items: ['keys', 'phone', 'banana'],

    showItems: function () {
        return this.items.map(function (item) {
            return `${this.name} has ${item}`;
        });
    }
}

???.items
???.name




        

Как попали на участок кода. Callback

const person = {
    name: 'Jack',
    items: ['keys', 'phone', 'banana'],

    showItems: function () {
        return this.items.map(function (item) {
            return `${this.name} has ${item}`;
        });
    }
}

person.showItems();

person.items
???.name




        

Как попали на участок кода. Callback

const person = {
    name: 'Jack',
    items: ['keys', 'phone', 'banana'],

    showItems: function () {
        return this.items.map(function (item) {
            return `${this.name} has ${item}`;
        });
    }
}

person.showItems();

person.items
global.name




        

Результат

'undefined has keys'
'undefined has phone'
'undefined has banana'
        

Как попали на участок кода. Стрелочные функции

const person = {
    name: 'Jack',
    items: ['keys', 'phone', 'banana'],

    showItems: function () {
        return this.items.map(item => {
            return `${this.name} has ${item}`;
        });
    }
}

person.showItems();

person.items
person.name




        

Результат

'Jack has keys'
'Jack has phone'
'Jack has banana'
        

Как попали на участок кода. Callback

const person = {
    name: 'Jack',
    items: ['keys', 'phone', 'banana'],

    showItems: function () {
        return this.items.map(function (item) {
            return `${this.name} has ${item}`;
        }, this);
    }
}

person.showItems();

person.items
person.name




        

bind

Метод bind() создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. <...>

fun.bind(thisArg, arg1, arg2, ...);
    

Как попали на участок кода. Callback

const person = {
    name: 'Jack',
    items: ['keys', 'phone', 'banana'],

    showItems: function () {
        return this.items.map(function (item) {
            return this.name + ' has ' + item;
        }.bind(this));
    }
}

???.items
???.name




        

Как попали на участок кода. Callback

const person = {
    name: 'Jack',
    items: ['keys', 'phone', 'banana'],

    showItems: function () {
        return this.items.map(function (item) {
            return this.name + ' has ' + item;
        }.bind(this));
    }
}

person.showItems();

person.items
person.name




        

Частичное применение

Math.pow(2, 3);  // 8
Math.pow(2, 10); // 1024
        

const binPow = Math.pow.bind(null, 2);
        

binPow(3);  // 8
binPow(10); // 1024
        

Режим работы интерпретатора. Режим совместимости

function getSelf() {
    return this;
}

getSelf(); // global
        

Режим работы интерпретатора. Строгий режим

function getSelf() {
    'use strict';

    return this;
}

getSelf(); // undefined