(function addHandler() {
  let element = document.getElementById("btn");
  element.onclick = function() {
    alert("helloy");
  }
})();


//example

/*function logPrice (price) {
  console.log(price);//выводит в консоль свой параметр
}
function currencize(logger,currency) {//функция currencize принимает на вход функцию
//		и возвращает функцию logPrice т.е функцию используем как переменную или как объект
  //параметр logger вызывает logPrice которая у нас объявлена  const logPriceEuro = currencize(logPrice,'param');
  function currencized(price) {//создаем вложенную функцию
//			return будет вызывать currency, а это второй аргумент  const logPriceEuro = currencize(logPrice,'param');
    return logger(currency + price);
  }
  currencized.currency  = currency;//в функцию currencized будем передавать logPrice
  return currencized;
}
const logPriceEuro = currencize(logPrice,'param');
document.write(42);*/

//example
/*1) напишим функцию,которая принимает три параметра
принимает три параметра тип пирога,радиус, и резать или не резать
type-строка
radius-число
slice-резать или не резать

2) задаем значение*/


	function cookPie (type,radius, slice) {
	  console.log('#cookPie:o',type,radius,slice);
//	  2)
	  type = 'choco';
	  radius = 42;
	  slice = false;
	  
	  console.log('#cookPie:1',type, radius,slice);
	}
//	3) вне функции мы вызываем три переменные
	const type = 'lemon';
	const radius = 30;
	const slice = true;
//	4) вызываем функцию на исполнение
	cookPie(type,radius,slice);
//	5) выводим значение переменных
	console.log('#global:o',type,radius,slice);
	
/*	результат выполнения
	#cookPie:o lemon 30 true
 #cookPie:1 choco 42 false
#global:o lemon 30 true*/

//passing objects to function

/*Теперь передаем в функцию один параметр объекта
затем у этог объекта будем менять проперти
и будем выводить еще раз этот объект*/
	/*function cookPie(pieOptions) {
	  console.log('#cookPie:0',pieOptions);
	  
	  pieOptions.type = 'choco';
	  console.log('#cookPie:1',pieOptions);
	  
//	  затем переопределим параметр и выведем его еще раз
	  pieOptions = {};//полностью переопределяем наш объект
	  console.log('#cookPie2', pieOptions);
	}
//	создание самого объекта с нашими настройками пирога
	const options = {type:'lemon', radius:30, slice:true};
//	передаем его в метод cookPie
	cookPie(options);
//	и выводим уже глобально
	console.log('#global:o',options);*/
	
//	как сработает эта функция
//	1) вызываем функцию cookPie с некоторым объектом options
//	залогируем первой строчкой  console.log('#cookPie:0',pieOptions);
//	что нужно помниить что pieOptions ссылается на  const options = {type:'lemon', radius:30, slice:true};
	
//extra arguments are ignored
//	example

	/*function cookPie(type, radius,slice) {
	  console.log('#cookPie',type, radius, slice);
	}
	cookPie('lemon',21,true,'extra','args');*/
	
/*
	результат вывода
	#cookPie lemon 30 true
#global:o lemon 30 true
#cookPie lemon 21 true*/

//example
//та же функция,те же три параметра,только передаем один

function cookPie(type, radius,slice) {
  console.log('#cookPie',type, radius, slice);
}
cookPie('lemon');

/*#cookPie lemon 30 true
#global:o lemon 30 true
 #cookPie lemon undefined undefined*/

//passing arguments to function
	в данном приере arguments[0] это не массив это аргумент.
	function cookPie() {
	  console.log('#cookPie0',arguments[0], arguments[1], arguments[2]);
		console.log('#cookPie1',arguments.length);
		console.log('#cookPie2',arguments.callee);
		console.log('#cookPie3',Array.isArray(arguments));
	}
	cookPie('lemon', 14, true);
---------------------------------------------------------------------
  // нет return ответ undefined
		// var foo =function(x){
		// 	let y=x*2;
		// 	console.log(foo(4));
		// }

	// в стрелочной функции при наличии фигурных скобок нужно ставить return
	// неправильно
	// 	var foo = (x)=>{
	// 		let y=x*2;
	// 	}

	// 	console.log(foo(4));//ошибка

		// правильный вариант
		// var foo = (x)=>{
		// 	 let y=x*2;
		// 	  return y;
		// }

		// console.log(foo(4));//8


		// пример

		// если нету фигурных скобок,то return не нужен
		// var foo = (x,y)=>x*y;
		// console.log(foo(3,4));//12


		// пример
		// var foo =function(){
		// 	return 10;
		// }
		// console.log(foo(2));//10

		// var foo = ()=>10;
		// console.log(foo(2));//10

// В ES6 появился упрощенный синтаксис функций через =>. Эта стрелка заменяет команду function и, если внутри функции только одна строка, - то return тоже не нужен - функция вернет результат выполнения этой строки.

// В следующем примере вы видите функцию в новом стиле, а ниже эквивалент в старом стиле:

let func = x => x+1;
alert(func(3));

let func = function(x) { return x + 1; };
alert(func(3));
// пример
// Если у функции несколько параметров - их надо брать в скобки:

let func = (x1, x2) => x1 + x2;
alert(func(3, 4));

let func = function(x1, x2) { return x1 + x2; };
alert(func(3, 4));
// пример
// Если функция вообще без параметров - то нужны пустые круглые скобки:

let func = () => 3 + 4;
alert(func());

let func = function() { return 3 + 4; };
alert(func());
// пример
// Если в функции несколько строк - необходим return:

let func = () => { let a = 3; let b = 4; return a + b; };
alert(func());

let func = function() { let a = 3; let b = 4; return a + b; };
alert(func());
// пример

// Стрелочные функции удобно использовать в качестве анонимных:

let arr = [1, 2, 3, 4, 5];

//Старый стиль:
arr.forEach(function(value) {
alert(value);
});

//Новый стиль:
arr.forEach(value => alert(value));

// пример
let add = (x, y) => x + y;

let square = x => x * x;

let giveMeAnswer = () => 42;

let log = () => console.log('Logging');

let multiply = (x, y) => {
    let result = x * y;
    return result;
};

let getPerson = () => ({ name: 'John' });

//(() => console.log('IIFE'))();


let numbers = [1, 2, 3 ,4 , 5, 6, 7 ,8 ,9 ,10];

let sum = 0;

numbers.forEach(num => sum += num);

let squared = numbers.map(n => n * n);



let person = {
    name: 'Bob',
    greet: function() {
        window.setTimeout(() => {
            console.log('Hello, my name is ' + this.name);
            console.log('"this" is', this);
        }, 2000);
    }
};

person.greet();

let Task = () => console.log('Creating a task');

let task = new Task();

Task.bind();
Task.call();
Task.apply();
------------------------------------------------------------------------------
На первый взгляд может показаться, что стрелочные функции являются исключительно “синтаксическим сахаром” и не несут в себе никакой новой функциональности. Действительно, их использование выглядит очень удобным и значительно соркащает объемы необходимого кода, особенно если вы сторонник функционального JavaScript:

// раньше
var sum = function() {
  return [].reduce.call(arguments, function(m, n) {
    return m + n;
  }, 0);
}

// сейчас
var sum = (...args) => args.reduce((m, n) => m + n, 0);
Чтобы разобраться с новой синтаксической конструкцией, рассмотрим простую функцию add, которая возвращает сумму двух переданных ей аргументов:

// раньше
var add = function(a, b) {
  return a + b;
};

// сейчас 
var add = (a, b) => a + b;
Создание стрелочной функции состоит из имени add, передаваемых ей параметров (a, b) и тела функции a + b.

Объявление
Все стрелочные функции создаются с помощью function expression, то есть они всегда будут эквиваленты следующему ES5 коду:

// function expression: два способа в ES6
var f = function() { return 42; }
var f = () => 42;

// function declaration: один способ в ES6
function f() {
  return 42;
}
Поэтому следует помнить, что перед использованием стрелочной функции её всегда необходимо создать заранее.

Параметры
Обычно параметры помещаются в круглые скобки (a, b). Если необходимо передать функции всего один параметр, то круглые скобки можно не использовать var f = x => x * 2, но лучше подобную возможность не использовать и всегда окружать параметр скобками var f = (x) => x * 2, чтобы избежать недопонимания. В случае, если в параметрах нет необходимости, объявление функции будет выглядеть следующим образом:

var f = () => 42;

f(); // 42
Тело функции
В случае, когда необходимо выполнить всего одну инструкцию (как во всех примерах, рассмотренных выше) достаточно просто указать эту инструкцию, как тело функции:

var add = (a, b) => a + b; // возвращает a + b
В ситуациях, когда одной инструкции оказывается недостаточно, тело функции необходимо заключить в фигурные скобки { ... } и пользовать ключевым словом return:

var g = (a, b) => {
  let m = Math.pow(2, parseInt(a));
  return b + m;
}
Все возможности обычных функций могут быть использованы и со стрелочными, включая параметры по умолчанию, остаточные параметры, реструктурирующее присваивание и так далее.

Анонимные функции
Чаще всего анонимные стрелочные функции используются при итерациях по элементам массивов с методами map, forEach, reduce, filter и другими:

const double = (arr) => arr.map( item => item * 2 );
double([1,2,3,4]); // [2, 4, 6, 8]

const filter = (arr) => arr.filter( item => !!item );
filter([false, undefined, 0, 1, 'str']); // [1, "str"]

const sum = (...args) => args.reduce((m, n) => m + n, 0);
sum(10, 15, 20); // 45
this больше не проблема
Главная причина появления стрелочных функций в ES6 — недопонимание, которое возникает у большинства разработчиков при работе с ключевым словом this. Чтобы понять, что же такого чудесного принесли с собой стрелочные функции рассмотрим простой пример:

// ES5
var obj = {
  btn: document.links[0],
  log: function (message) {
    console.log(message);
    return this;
  },
  init: function() {
    var self = this;
    self.btn.addEventListener('click', function() {
      self.log('Button Clicked!');
    }, false);
  }
};
Чтобы выполнить какой-либо метод из объекта до появления стрелочных функций, необходимо было воспользоваться одним из методов замены ключевого слова this: как в этом примере записать его в переменную self, или воспользоваться методом функций bind. Данные способы, несмоненно, работали, но выглядели достаточно скверно и могли смутить других разработчиков, которые попытались бы разобраться в коде. Стрелочные функции полностью решают данную проблему. Теперь код, приведённый выше, будет выглядеть следующим образом:

// ES6
var obj = {
  btn: document.links[0],
  log: function(message) {
    console.log(message);
    return this;
  },
  init: function() {
    this.btn.addEventListener('click', () => this.log('Button Clicked!'), false);
  }
};
                                                                                                  -------------------------------------------------------------------------------------
                                                                                                    // немедленно вызываемая функция
// (function(){

// })();

//передача параметров в немедленно вызываемую функцию
(function sum(a,b){
	let y= a+b;
	return ;
})(2,3);//undefined

(function sum(a,b){
	let y= a+b;
	return y;
})(2,3);//5


(function sum(a,b){
	 return a+b ;
})(2,3);//5

// пример
let elements = document.getElementsByTagname('a');
for (var i = 0; i <elements.length; i++) {
elements[i].addEventListener('click',function(e){
	e.preventDefaul();
	alert('link#'+i)
},false);
}

Основной способ – это воспользоваться объектом события.
 Для отмены действия браузера существует стандартный метод event.preventDefault()

let elements = document.getElementsByTagName('a');
for (var i = 0; i <elements.length; i++) {
elements[i].addEventListener('click',function(e){
	e.preventDefault();
	alert('link#'+i)
},false);
};//document.getElementsByTagname is not a function

let elems = document.getElementsByTagName('a');
for (let i = 0; i <elems.length; i++) {
	(function(lacalIndex){
		elems[i].addEventListener('click',function(e){
	e.preventDefault();
	alert('link#'+ lacalIndex);
	},false)
})(i);
};//Identifier 'elements' has already been declared
    // at <anonymous>:1:1

    var elems = document.getElementsByTagName('a');

for (var i = 0; i <elems.length; i++) {
	(function(lacalIndex){
		elems[i].addEventListener('click',function(e){

			return function(e){
				e.preventDefault();
	alert('link#'+ lacalIndex);
	};
	
	
})(i),false);
};
пример
var counter = (function(){
	var i = 0;

	return{
		get:function(){
			return i;
		},
		set:function(val){
			i=val;//undefined
		},
		increment:function(){
			return ++i;//2 сработает префиксная форма
		}
	}
})();
console.log(counter.get());//0
console.log(counter.set(2));
console.log(counter.increment());//3
console.log(counter.increment());//4
console.log(counter.increment(counter.i));//5

различные способы объявления функции
function a(){};//декларация функции
let B = function(){};//функциональное выражение
let C = (function(){});//функциональное выражение с оператором группировки
let D = function foo(){};//именнованное функциональное выражение
let E = (function(){})();//самовызывающееся функциональное выражение
let f = new function();//конструктор функции
let g = new function(){}; //вырожденный случай:конструктор объекта

пример
var a = function(){return 1;}()+12;
var a = function(){return 1;}()+'';
var a = function(){return 1;}()+ ' '-1;

пример
операторы(+,-,!,~,void)
+function(){return false;}();//Оператор унарный плюс предшедствует своему операнду и оценивает его, пытается преобразовать его в число
-function(){return false;}();//-0
!function(){return false;}();//true
~function(){return false;}();//-1
 void function(){return false;}();//undefined
 комбинированные  операторы

 -function(){return false;}();
 let c= 5*(2-function(){return 1}());//5
 let c= 5*2- -~function(){return 1}();//8

 пример
 let f = function getFactorial(n){
 	return n ? n*getfactorial(n-1):1;
 }
 f(-5);
  -----------------------------------------------------------------------
    Функциональные выражения
В JavaScript функция является значением, таким же как строка или число.

Как и любое значение, объявленную функцию можно вывести, вот так:

 
-------------------------------------------



function sayHi() {
  alert( "Привет" );
}

alert( sayHi ); // выведет код функции
Обратим внимание на то, что в последней строке после sayHi нет скобок. 
То есть, функция не вызывается, а просто выводится на экран.

Функцию можно скопировать в другую переменную:
------------------------------------------
 function sayHi() {   // (1)
  alert( "Привет" );
}

var func = sayHi;    // (2)
func(); // Привет    // (3)

sayHi = null;
sayHi();  
-------           // ошибка (4)
Объявление (1) как бы говорит интерпретатору "создай функцию и помести её в переменную sayHi
В строке (2) мы копируем функцию в новую переменную func. Ещё раз обратите внимание: 
после sayHi нет скобок. Если бы они были, то вызов var func = sayHi() 
записал бы в func результат работы sayHi() (кстати, чему он равен? правильно,
 undefined, ведь внутри sayHi нет return).
На момент (3) функцию можно вызывать и как sayHi() и как func()
…Однако, в любой момент значение переменной можно поменять. 
При этом, если оно не функция, то вызов (4) выдаст ошибку.
Обычные значения, такие как числа или строки, представляют собой данные.
 А функцию можно воспринимать как действие.

Это действие можно запустить через скобки (), а можно и скопировать в другую переменную,
 как было продемонстрировано выше.

Объявление Function Expression
Существует альтернативный синтаксис для объявления функции, который ещё более наглядно показывает, 
что функция – это всего лишь разновидность значения переменной.

Он называется «Function Expression» (функциональное выражение) и выглядит так:
--------------------------------------------
 var f = function(параметры) {
  // тело функции
};
Например:

 var sayHi = function(person) {
  alert( "Привет, " + person );
};

sayHi('Вася');
Сравнение с Function Declaration
«Классическое» объявление функции, о котором мы говорили до этого, вида function имя(параметры) {...}, называется в спецификации языка «Function Declaration».

Function Declaration – функция, объявленная в основном потоке кода.
Function Expression – объявление функции в контексте какого-либо выражения, например присваивания.
Несмотря на немного разный вид, по сути две эти записи делают одно и то же:

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

// Function Expression
var sum = function(a, b) {
  return a + b;
}
------------------
Оба этих объявления говорят интерпретатору: 
"объяви переменную sum, создай функцию с указанными параметрами и кодом и сохрани её в sum".

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

Поэтому их можно вызвать до объявления, например:

 
sayHi("Вася"); // Привет, Вася

function sayHi(name) {
  alert( "Привет, " + name );
}
А если бы это было объявление Function Expression, то такой вызов бы не сработал:

 
sayHi("Вася"); // ошибка!

var sayHi = function(name) {
  alert( "Привет, " + name );
}
----------------------------------
Это из-за того, что JavaScript перед запуском кода ищет в нём Function Declaration (их легко найти: они не являются частью выражений и начинаются со слова function) и обрабатывает их.

А Function Expression создаются в процессе выполнения выражения, в котором созданы, в данном случае – функция будет создана при операции присваивания sayHi = function...

Как правило, возможность Function Declaration вызвать функцию до объявления – это удобно, так как даёт больше свободы в том, как организовать свой код.

Можно расположить функции внизу, а их вызов – сверху или наоборот.

Условное объявление функции
В некоторых случаях «дополнительное удобство» Function Declaration может сослужить плохую службу.

Например, попробуем, в зависимости от условия, объявить функцию sayHi по-разному:

 var age = +prompt("Сколько вам лет?", 20);

if (age >= 18) {
  function sayHi() {
    alert( 'Прошу вас!' );
  }
} else {
  function sayHi() {
    alert( 'До 18 нельзя' );
  }
}

sayHi();
Function Declaration при use strict видны только внутри блока, в котором объявлены. Так как код в учебнике выполняется в режиме use strict, то будет ошибка.
--------------------------------------
А что, если использовать Function Expression?

 var age = prompt('Сколько вам лет?');

var sayHi;

if (age >= 18) {
  sayHi = function() {
    alert( 'Прошу Вас!' );
  }
} else {
  sayHi = function() {
    alert( 'До 18 нельзя' );
  }
}

sayHi();
Или даже так:

 var age = prompt('Сколько вам лет?');

var sayHi = (age >= 18) ?
  function() { alert('Прошу Вас!');  } :
  function() { alert('До 18 нельзя'); };

sayHi();
Оба этих варианта работают правильно, поскольку, в зависимости от условия, создаётся именно та функция, которая нужна.

Анонимные функции
Взглянем ещё на один пример – функцию ask(question, yes, no) с тремя параметрами:

question
Строка-вопрос
yes
Функция
no
Функция
Она выводит вопрос на подтверждение question и, в зависимости от согласия пользователя, вызывает функцию yes() или no():

 



function ask(question, yes, no) {
    if (confirm(question)) yes()
    else no();
  }

function showOk() {
  alert( "Вы согласились." );
}

function showCancel() {
  alert( "Вы отменили выполнение." );
}

// использование
ask("Вы согласны?", showOk, showCancel);
Какой-то очень простой код, не правда ли? Зачем, вообще, может понадобиться такая ask?

…Оказывается, при работе со страницей такие функции как раз очень востребованы, только вот спрашивают они не простым confirm, а выводят более красивое окно с вопросом и могут интеллектуально обработать ввод посетителя. Но это всё потом, когда перейдём к работе с интерфейсом.

Здесь же обратим внимание на то, что то же самое можно написать более коротко:

 









function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Вы согласны?",
  function() { alert("Вы согласились."); },
  function() { alert("Вы отменили выполнение."); }
);
Здесь функции объявлены прямо внутри вызова ask(...), даже без присвоения им имени.

Функциональное выражение, которое не записывается в переменную, называют анонимной функцией.

Действительно, зачем нам записывать функцию в переменную, если мы не собираемся вызывать её ещё раз? Можно просто объявить непосредственно там, где функция нужна.

Такого рода код возникает естественно, он соответствует «духу» JavaScript.

new Function
Существует ещё один способ создания функции, который используется очень редко, но упомянем и его для полноты картины.

Он позволяет создавать функцию полностью «на лету» из строки, вот так:

 var sum = new Function('a,b', ' return a+b; ');

var result = sum(1, 2);
alert( result ); // 3
То есть, функция создаётся вызовом new Function(params, code):

params
Параметры функции через запятую в виде строки.
code
Код функции в виде строки.
Таким образом можно конструировать функцию, код которой неизвестен на момент написания программы, но строка с ним генерируется или подгружается динамически во время её выполнения.

Пример использования – динамическая компиляция шаблонов на JavaScript, мы встретимся с ней позже, при работе с интерфейсами.

Итого
Функции в JavaScript являются значениями. Их можно присваивать, передавать, создавать в любом месте кода.

Если функция объявлена в основном потоке кода, то это Function Declaration.
Если функция создана как часть выражения, то это Function Expression.
Между этими двумя основными способами создания функций есть следующие различия:

Function Declaration	Function Expression
Время создания	До выполнения первой строчки кода.	Когда управление достигает строки с функцией.
Можно вызвать до объявления	Да (т.к. создаётся заранее)	Нет
Условное объявление в if	Не работает	Работает
Иногда в коде начинающих разработчиков можно увидеть много Function Expression. Почему-то, видимо, не очень понимая происходящее, функции решают создавать как var func = function(), но в большинстве случаев обычное объявление функции – лучше.

Если нет явной причины использовать Function Expression – предпочитайте Function Declaration.

Сравните по читаемости:

// Function Expression
var f = function() { ... }

// Function Declaration
function f() { ... }
Function Declaration короче и лучше читается. Дополнительный бонус – такие функции можно вызывать до того, как они объявлены.

Используйте Function Expression только там, где это действительно нужно и удобно.
-------------------------------------------------

// function a(){};//декларация функции
// let B = function(){};//функциональное выражение
// let C = (function(){});//функциональное выражение с оператором группировки
// let D = function foo(){};//именнованное функциональное выражение
// let E = (function(){})();//самовызывающееся функциональное выражение
// let f = new function();//конструктор функции
// let g = new function(){}; //вырожденный случай:конструктор объекта

// пример
// var a = function(){return 1;}()+12;
// var a = function(){return 1;}()+'';
// var a = function(){return 1;}()+ ' '-1;

// пример
// операторы(+,-,!,~,void)
// +function(){return false;}();//Оператор унарный плюс предшедствует своему операнду и оценивает его, пытается преобразовать его в число
// -function(){return false;}();//-0
// !function(){return false;}();//true
// ~function(){return false;}();//-1
//  void function(){return false;}();//undefined
 //комбинированные  операторы

 // -function(){return false;}();
 // let c= 5*(2-function(){return 1}());//5
 // let c= 5*2- -~function(){return 1}();//8

 // пример
 let f = function getFactorial(n){
  return n ? n*getfactorial(n-1):1;
 }
 f(-5);