JavaScript

Function

Agenda

  • Function
  • Constructor
  • Hosting
  • Scope

Function

Function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function can return a value.

function hello() {
  return 'Hello';
}

hello() // hello
hello() // hello
function имя(параметры) {
  ...тело...
}

Function

function имя(параметры) {
  ...тело...
}

Function can have params

function hello(name) {
  return 'Hello ' + name;
}

hello('Vik') // Hello Vik
hello('Arni') // Hello Arni

Function

function имя(параметры) {
  ...тело...
}

Function can have params

function hello(name) {
  return 'Hello ' + name;
}

hello('Vik') // Hello Vik
hello('Arni') // Hello Arni

Call Function

Программный код, образующий тело функции, выполняется не в момент определения функции, а в момент ее вызова. Функции в языке JavaScript могут вызываться несколькими способами:

 - как функции

 - как методы

 - как конструкторы

 - и косвенно, с помощью их методов call и apply

function hello() {
  console.log('Hello');
}

hello() // Hello

Return value

Если в функции отсутствует инструкция return, то функция возвращает undefined. Если возврат из функции происходит в результате выполнения инструкции return, возвращается значение выражения, следующего за инструкцией return, или undefined, если инструкция return не имеет выражения.

Return value

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

function calc (a, b) {
    const sum = a + b;

    return;
}

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

console.log(sum(1, 2)); // undefined
console.log(calc(1, 2)); // undefined
console.log(getSum(1, 2)); // 3

Local variable

  • Важное свойство функций в том, что переменные, созданные внутри функции (включая параметры), локальны внутри этой функции. Это означает, что переменные и функции будут внутри вызываемой функции будут создаваться каждый раз при вызове функции, и эти отдельные её инкарнации никак друг с другом не связаны.

Local variable

function calc (a, b) {
    const sum = a + b;

    return sum;
}

console.log(calc(1, 2)); // 3
console.log(sum); // <-- Error! The variable is local to the function

A variable declared inside a function is only visible inside that function

Outer variable

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  console.log(message);
}

showMessage(); // Hello, John

A function can access an outer variable as well

Edit outer variable

let userName = 'John';

function showMessage() {
  	userName = "Bob";
	let message = 'Hello, ' + userName;
  	console.log(message);
}

console.log(userName);  // John
showMessage(); 		// Hello, Bob
console.log(userName);  // Bob

A function can access an outer variable as well

Edit outer variable

Redeclare variable in function

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // переопределение локальной переменной 
  			// в области видимости функции и присвоение значения

  let message = 'Hello, ' + userName;
  console.log(message); // Hello Bob
}

showMessage();

console.log( userName ); // John, переопределенная переменная userName
		// в функции showMessage не доступна в не функции showMessage,
		// но у нас создана переменная в глобальной области видимости

var variable

local scope via var

var userName = "Vic";

function showMessage() {
  console.log(userName)
  var userName = "Bob";

  let message = 'Hello, ' + userName;
  console.log(message); 
}

showMessage(); // 'Hello, Bob'

console.log( userName ); // Vic

Declare function

Function declaration

function myVeryUsefulFunction() {
  // function body
  console.log('meow');
}

Function expression

var myVeryUsefulFunction = function() {
  // function body
  console.log('meow');
};

Function invocation

myVeryUsefulFunction(); // -> meow

Anonymous function

Function that has no name is called anonymous function.
Sometimes it is called lambda-function.

function() {
  console.log('hi');
}

The difference between FD and FE

 Основное отличие между Function Declaration и Function Expression - функции, объявленные как Function Declaration, создаются интерпретатором до выполнения кода. Это позволяет вызывать Function Declaration до ее объявления. 

Hosting

function func1() {
    function funcExample() {
        return 'one';
    }
     
    return funcExample();
     
    function funcExample() {
        return 'two';
    } 
};

console.log(func1()) // two
function func1() {
    function funcExample() {
        return 'one';
    }
     
    var variable = funcExample();
     
    function funcExample() {
        return 'two';
    }

    return variable; 
};

console.log(func1()) // two

Поднятие или hoisting — это механизм в JavaScript, в котором переменные и объявления функций, передвигаются вверх своей области видимости перед тем, как код будет выполнен.

Conditional function declaration

let test;

if (1 === 1) {
    test = function() {
        console.log(true);
    };
} else {
     test = function() {
        console.log(false);
    };
}

test();

Function constructor

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

let animal = new Animal('rabbit')

Любая функция, кроме некоторых встроенных, может создать объект.

Для этого ее нужно вызвать через директиву new.

Например, функция Animal в примере ниже создаст новый объект.

Function as a method

function log123() {
    console.log(123);
}

var obj = {
    name: 'Arni',
    method: function() {
        console.log('method');
    }
}

obj.method();
obj.method2 = log123;
obj.method2();

Метод - это не что иное, как функция, которая хранится в виде свойства объекта.

Function as a callback

var func = function(callback) {
    var name = "Nick";

    return callback(name);
};
 
console.log( func( function(n){
    return "Hello " + n;
}) );

Так же функция, может быть передана в другую функцию в качестве аргумента.

Scope

Глобальными называют переменные и функции, которые не находятся внутри какой-то функции. То есть, иными словами, если переменная или функция не находятся внутри конструкции function, то они — «глобальные».

В JavaScript все глобальные переменные и функции являются свойствами специального объекта, который называется «глобальный объект».


В браузере этот объект явно доступен под именем window.

Running

  • Сначала браузер ищет в коде Function Declaration и объявления var, каждое такое объявление добавляется в глобальный объект window. Функции, объявленные как Function Declaration создаются сразу, и могут быть использованы до их объявления, а переменные - равны undefined.
  •  
  • Далее начинается стадия выполнения, происходит присваивание значений переменных, когда браузер доходить до соответствующей строчки кода.

Scope Local variable

var funcExp2 = function (name) {
    var test = 10;

    return name;
}

funcExp2('Arni');

console.log(test); // VM112:9 Uncaught ReferenceError: test is not defined

Scope Local variable

(function() {
  var x = 1;
  console.log(x);
})();

(function() {
  var x = 2;
  console.log(x);
})();

Both variables share same name, but are different variables of different scopes.

var k = 4;
 
var outerScope = function() {
    console.log( k ); // ???

    var k = 8; 
    console.log( k );  // ???
 
    var innerScope = function() {
        var k = 12;
        console.log( k );  // ???
    };

     
    innerScope();
    console.log( k );  // ???
};
 
outerScope();
let k = 4;
 
let outerScope = function() {
    console.log( k );

    let k = 8; 
    console.log( k );
 
    let innerScope = function() {
        let k = 12;
        console.log( k );
    };

     
    innerScope();
    console.log( k );
};
 
outerScope();  // ???

Links

  1. https://learn.javascript.ru/function-basics
  2. https://learn.javascript.ru/functions-closures
  3. https://developer.mozilla.org/ru/docs/Web/JavaScript/Closures
  4. http://dmitrysoshnikov.com/ecmascript/ru-chapter-6-closures/
  5. https://learn.javascript.ru/call-apply
  6. https://learn.javascript.ru/bind

Examples

  1. https://gist.github.com/OlegRovenskyi/66e764398c4afcff43fda42cabfc7134

JS function

By Oleg Rovenskyi

Made with Slides.com

JS function

  • 659

More from Oleg Rovenskyi