Что такое анонимная функция и с чем ее едят?

Question

[Александр]

Здравствуйте. Расскажите, пожалуйста, что такое анонимная функция, для чего она нужна, и как она используется на практике. А так же, насколько я знаю, она используется в замыканиях - хотелось бы узнать и об этом тоже.

Answer 1

[Dmitriy Mozgovoy]

На самом деле классика случая анонимной+замыкание:

var name="admin"
    
    setTimeout(function(){
        alert(name);
    },1000);

А анонимная функция без имени, а без имени она потому что ее вызывают не по имени, а по ссылке на нее.
т.е полный пример с замыканием:

function sayAfter(text,delay){  
    setTimeout(function(){
        alert(text);
    },delay);
   }

  sayAfter("lol",1000);

Аудитория требует более тонкого примера применения...

(function(){
        var x, y, z;

        //много разного кода, много переменных, которые не нужны в глобальной области видимости
    })();

Comments

[Alexander Tartmin]

buksttabu: в качестве аргумента можно передавать или анонимную функцию или ссылку на неё или её имя.

[Евгений Петров]

Во всех этих примерах можно применить именованные функции.

[Dmitriy Mozgovoy]

Евгений Петров: ну можно много чего;) а еще можно было тупо код слепить со строковых переменных, но мы этого не делаем и применяем анонимную функцию, ведь вопрос что такое анонимная и как ее можно применять, а не есть ли альтернативы в решении.

[Евгений Петров]

Дмитрий Brain: Ну это вовсе не объясняет отличия анонимных функций от именованных.

[Dmitriy Mozgovoy]

Евгений Петров: нус... у Вас есть шанс всем нам показать, как еще точнее можно объяснить анонимы зеленым, кроме как отсутствие имени у функции и вызов ее по ссылке =))) Заодно и статью на вики переправите=)

[Dmitriy Mozgovoy]

Евгений Петров: что не мешает ей быть в тоже время анонимной. Это уже какой то троллинг=)
"Анонимная (безымянная) функция — в программировании особый вид функций, которые объявляются в месте использования и не получают уникального идентификатора для доступа к ним."

[Евгений Петров]

Дмитрий Brain: Вы уверяете, что function tt () {} — это анонимная функция?

[Dmitriy Mozgovoy]

Евгений Петров: дак это Ваш пример - у меня никакого tt там не было.

Answer 2

[Сергей Протько]

Анонимная функция (еще можно встретить такое название как лямбды) - функция без имени. Может быть использована в момент объявления, можно присвоить переменной, можно еще всякие штуки делать. Если хочется знать что еще можно с ними делать, добро пожаловать в чудный мир Лямбда-исчислений и функционального программирования.

Answer 3

[Денис Инешин]

Анонимные функции очень часто используются для выполнения какого-то кода в коллбэках, где в целом не нужно создавать отдельную именную функцию под это действие. Например:

button.addEventListener('click', function (event) {
    // эта анонимная функция будет вызвана при клике
}, false);

// или можно так, посложнее, но обычно это лишнее
function btnClick (event) {
    // это уже функция с именем
}
button.addEventListener('click', btnClick, false); // <-  в данном случае мы передали ссылку на функцию

Замыкания же, это такой прием для хранения скрытых данных, и тут конечно тоже можно использовать анонимные функции, но соль не в этом.

Comments

[Евгений Петров]

Замыкание — это контекст функции + все захваченные внешние контексты. Никакой это не приём, а суть работы функций.

[Александр]

Вопрос: что такое коллбэки?

[Денис Инешин]

Александр: коллбэк или функция обратного вызова - это некая функция, которая вызывается после того, как было выполнено некое действие или условие. Например клик мышкой или аякс-запрос.

[Александр]

Спасибо.

Answer 4

[Alexander Tartmin]

Анонимная функция это функция без имени

function() { ... }
function funcWithName() { ... }

Вот самый лучший пример использования

$( document ).ready(function() {
  // Handler for .ready() called.
});

Про замыкания с помощью анонимной функции не слыхал...

Comments

[Иван]

А я правильно понимаю, что функция ready в роли аргумента принимает только функцию и потому мы и отправляем ей анонима?

[Alexander Tartmin]

Иван: совершенно верно!

[Евгений Петров]

Иван: С таким же успехом можно передать ссылку на именованную. Разницы тут нет никакой.

[Сергей]

разница в том, что вам не надо плодить 100500 разных именованных функций, чтобы устанавливать их как обработчики событий. Тем более, что чаще всего это пара строк кода

[Евгений Петров]

Сергей: Я вас огорчу — jQuery создаёт именованные функции взамен ваших анонимных. Иначе он не смог бы снять слушатель.
Вы просто привыкли к библиотеке, которая делает всё за вас, и думаете, будто так и в нативном JS происходит.

[Сергей]

Да пусть jQuery создает их сколько хочет. Проблема использования именованных функций в качестве колбэков в том, что запутаешься в именах.
Я одно не понимаю, зачем вы упоминаете про именованные функции в вопросе про анонимные функции? У вас какая особая жизненная позиция по этому поводу? или вы что-то знаете, чего все не знают?

Answer 5

[Йцу Йцуевич]

Ещё можно тебе голову сломать вот этим:

function getFunction(name){
  if (!name) return function(){ return "Who are you?" }
  else       return function(){ return "Hello " + name; }
}

// Вызов
var petya   = getFunction("Петя");
var unknown = getFunction();

petya();  // петя
unknown;  // тИ кто???

Объяснение нужно? Если что, объясню!

Comments

[Евгений Петров]

Сможете объяснить, почему не использовать 2 именованные функции примерно так:

function getFunction (name) {
	return name ? b : a;

	function a () {
		return "Who are you?"
	}

	function b () {
		return "Hello " + name;
	}
}

[Йцу Йцуевич]

можно, но вопрос тут стоит на тему анонимных функций!!!

[Йцу Йцуевич]

А вообще иногда бывает бессмысленно давать имя функции которая используется только один раз, и кол-во имёт, с которым работаешь ограниченно (если только не имена a, b, c...).

Особенно это актуально для тех случаев, когда функция размещена в глобальной области видимости.
Тот же пример с
$(document).ready(function(){ /* code... */ });
Если каждый раз создавать функцию, придумывать имя (что порой тяжело) и закидывать её в .ready, не только код станет непонятный (т. к. функции доступны отовсюду), да и тяжело будет создать функцию с новым оригинальным названием. И кто-нибудь может "накрыть" вашу функцию создавая свою с таким же именем.

Это наверно следовало автору написать, надеюсь прочтёт

[Евгений Петров]

(function () {
	$(xxx);

	function xxx () {
		console.log(5654);
	}
})();

console.log(xxx); // Упс, нет такой

[Сергей delphinpro]

Евгений Петров: фу, сколько писанины =)) вот что бы так не писать, и следует использовать анонимную функцию =)

[Йцу Йцуевич]

вы о чём?
По-моему я тоже самое настрочил

$(document).ready делает тоже самое, но после загрузке "документа"
что его использовать, что сделать свою анонимку (кстате !function(){}() меньше на символ =) )
я не имел ввиду, что если не jQuery, то капут. Это тот же JS.
Вы ведь сейчас не дали "верхней" функции имя, а xxx это уже не "глобалка".

[Евгений Петров]

Йцу Йцуевич: $(function () {}) и (function () {})() — вообще разные вещи. Вы не отличаете вызов именованной функции и IIFE?

... т. к. функции доступны отовсюду ...
... И кто-нибудь может "накрыть" вашу функцию создавая свою с таким же именем ...

Вот я о чём. Первое я вообще не понял, а второе неверно.

[Йцу Йцуевич]

$(function(){}) - это вообще ошибка (в chrome), я такое не писал!
!function(){}() и (function(){})() - одно и тоже, первое просто меньше на символ (и возвращает - true)
$(document).ready(function(){}) - вообще метод jQuery

Вы вообще к чему разговор ведёте? Анонимные функции не любите? И от меня хотите "услышать", что лучше их не использовать или что???

С самого первого вашего коммента, понять не могу смысл ваших вопросов, я лишь показал возможности и не собираюсь вступать с кем-то в холивар.
Не нравится вам какая-то возможность, не используйте.
Тут парень просто попросил рассказать об этом (и о замыканиях), не больше!

[Йцу Йцуевич]

точнее в 3-ей строчке, это вызов!
А то сейчас опять пойдёт спор...

[Евгений Петров]

Я всего лишь попросил объяснить, чем отличается в вашем примере работа с анонимными функциями и именованными. А вы стали писать такое, что... Ну вот опять:

$(function(){})
$(document).ready(function(){})
Это — вообще одно и то же. Если у вас ошибка, проверьте, так ли записали.
К анонимным функциям имеет опосредованное отношение. Выше показано, как можно передать ссылку на именованную функцию без каких-либо последствий.

!function(){}()
(function(){})()
Это — способ применения FE там, где ожидается FD. И вот это и есть один из примеров применения анонимных функций.
Я написал вам тот пример и думал, что вы напишете — вот, вот применение анонимных функций. Увы.

А замыкание — это вообще организация работы функций. Любых. Именованных, анонимных. FE, FD, new Function(). Потому что по ECMAScript при создании функции всегда возвращается closure.

[Йцу Йцуевич]

вы попросили меня объяснить "... почему не использовать 2 именованные функции ..."
Я вам и ответил, что тема этого вопроса про анонимные функции!!!

Если в вашем случае a и b - это маленькие имена, то в реальности имена бывают большими и с анон-ми. получается меньше кода...

Насчёт $(function(){}), просто вставьте его браузер на любом сайте где нет jQuery (т. к. он его занимает), https://google.ru (а лучше на домашней (стандартной) странице) и увидите ошибку.
Или напишите пустую html страничку и пропишите скрипт: console.log($);

В вашем примере естественно была анонимная функция и я зарекнулся о ней:
"... Вы ведь сейчас не дали "верхней" функции имя ..."

Насчёт FE FD я не слышал раньше эти термины, за расшифровку или ссылку на статью (если в двух словах не объяснишь) буду благодарен

[Сергей Василенко]

Йцу Йцуевич, Евгений Петров, Сергей delphinpro, Не могу найти ответ....
Может вы в курсе, что означает этот jQuery код?
Здесь переменные twig шаблонизатора используются, но я не пойму для чего именно $(() =>

$(() => { 
                $('#module').bereket({
                    module_id: {{ module_id }},
                    lazy: {{ lazy_load ? 'true' : 'false' }},
                    pagination_class: '.pagination',
                    navigation_class: '.navigation',
                    products_class: '.products',
                    use_pagination: {{ pagination_data ? 'true' : 'false' }},
                    use_more: {{ btn_more_status ? 'true' : 'false' }},
                });
            });