Непонятная структура кода (новичковый вопрос)

[LowCoder]

На данном сайте есть статья по drag n drop
http://javascript.ru/ui/draganddrop

в ней есть такая структура

var dragMaster = (function() {
    // private методы и свойства
    var dragObject
 
    function mouseDown(e) {
        клик на переносимом элементе: начать перенос
    }
 
    function mouseMove(e){
        if (dragObject) {
            отобразить перенос объекта
        }
    }
 
    function mouseUp(e){
        if (dragObject) {
            конец переноса
        }
    }
 
    // public методы и свойства    
    return {
        init: function() {
            // инициализовать контроллер
            document.onmousemove = mouseMove
            document.onmouseup = mouseUp
        },
 
        makeDraggable: function(element){
            // сделать элемент переносимым
            element.onmousedown = mouseDown
        }
    }
 
}())

мне соверешенно непонятно зачем нужны скобки в перед словом function

var dragMaster =     =>(<= вот эта скобка function() и вот эти
}()) в конце

почему нельзя было написать?

var dragMaster = function() {...код функции с вложенными функциями ...}

но так не работает понятное дело Объясните плиз а то вообще не въеду. Только если можно подробно на уровне 1 класс 1 четверть. Статьи с сайта читал есть подозрения что надо курить замыкания. Но просто не понимаю что вообще это за конструкция

var somthing = ()

и не функция вроде и не объект.. Объект же объявляется через фигурные скобки... Совсем не пойму

[Riim]

Функция создается и сразу запускается.

[UDN]

Объясню на примере:
var ms=(new Date).getTime(); /*получить ms с 1970 года*/
Здесь скобки требуются для инициализации объекта
в противном случае потребуетсяв к функции обращатся так
var ms=(new Date);ms.getTime();
Подобная конструкция применяется для минимизации.
var start=(new Date).getTime();
... my code ...
var ms=(new Date).getTime()-start; на выходе скорость выполнения
участка кода.

[UDN]

Проще говоря это одна из форм записи

[UDN]

var dragMaster = function() {...код функции с вложенными функциями ...}
можешь записать
function dragMaster() {...код функции с вложенными функциями ...}

[LowCoder]

Спасибо за ответы

[LowCoder]

Объясню на примере:
var ms=(new Date).getTime(); /*получить ms с 1970 года*/
Здесь скобки требуются для инициализации объекта
в противном случае потребуетсяв к функции обращатся так
var ms=(new Date);ms.getTime();
участка кода.

Все равно есть непонятки
вот эти два примера кода выдают разный результат

var ms=(new Date).getTime();
alert("Time"+ms);

Time1245469872876
а этот

var ms=(new Date);
ms.getTime();
alert("Time"+ms);

выдает
TimeSat Jun 20 2009 07:50:16 GMT+0400

Т.е понятно что в первом случае это кол-во миллисекунд а второе тоже самое но в отформатированном варианте. Но как то неаккуратненько. (c) Т.е нельзя сказать что вызовы абсолютно идентичны.

[LowCoder]

И еще сорри за занудство - но даже ести это как бы создание функции и сразу её запуск то зачем нужны скобки в конце кода

}()) в конце блока кода

что они дают и зачем нужны? Без них кстати не работает. Почему нельзя было написать так

}var dragMaster = (function() {...} )

А занудство тоже оправдано поскольку этап первоначльного въезжание в язык наиболее сложный так как непонятны многие базовые концепции, а еще в такой язык как с ЖаваСкрипт с исключительно путанным синатксисом. Похоже разработчки стандарта ЕСМА употребляли .. причем даже не траву а что то сильно потяжелее. Совершенно непонятно зачем было делать настолько сложный и запутанный язык для совершенно прикладных задач. Но это конечно имхо.

[Riim]

вот эти два примера кода выдают разный результат

Они и должны выдавать разный результат.

но даже ести это как бы создание функции и сразу её запуск

Ни если даже, а так и есть.

что они дают и зачем нужны? Без них кстати не работает.

Они запускают эту созданную функцию.

с исключительно путанным синатксисом

Совершенно непонятно зачем было делать настолько сложный и запутанный язык

Мне все это сразу понятно становилось. Не знаю, что вы тут путанного увидели.

[Dmitry A. Soshnikov]

LowCoder,

Материал:

- "проблема": http://javascript.ru/ecma/part12#a-12.4
- решение: http://javascript.ru/ecma/part11#a-11.1.6

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

Функции деляться на:

- "Функция-Объявление" (FunctionDeclaration, FD);
- "Функция-Выражение" (FunctionExpression, FE).

Разницу сейчас тоже не буду описывать, т.к. это не важно в данном вопросе.

Так вот, исходя из п.12.4:

ИнструкцияВыражение не может начаться с открывающей фигурной скобки, т.к. тогда оно было бы неотличимо от Блока. Также ИнструкцияВыражение не может начинаться с ключевого слова function, т.к. тогда оно было бы неотличимо от ОбъявленияФункции

Т.е.

function a() {}();

Ошибка, т.к. неотличимо от "Функция-Объявление", которую нельзя вызвать сразу.

Соответственно, нужно переделать выражение так, чтобы оно стало "Функция-Выражение". Самый простой способ - оператор группировки.

(function a() {})();

Все ок, т.к. теперь это FE.

Но основная суть данных конструкций, это создание "private"-переменных, которые будут доступны в наших функциях/объектах (а их мы вернём наружу и сможем использовать), но не будут загрязнять глобальное пространство. На простом синтетическом примере:

var a = (function () { var b = 10; return b; })();

Создаём FE, и тут же её вызываем. Переменная "а" теперь 10, но переменная "b" не существует после вызова функции.

Конструкию (function () { _наш_код_ })(); можно назвать инициализирующим пространством нашего объекта/библиотеки и т.д. Это пространство позволит вернуть наружу минимальный интерфейс, но (повторюсь) внутри себя иметь множество дополнительных, вспомогательных объектов, которые будут не видны снаружи:

var a = (function () {
  
  // "private"
  var b = 10;
  
  function c() {
    return b + 10;
  }

  // интерфейс наружу
  return {
    test: c,
    q: b,
    z: function () {
      return c() + 10;
    }
  };  

})();

// "a" инициализирован
// надеюсь, понятно, что "а" - есть возвращённый объект, но не функция!
// функция (FE) использовалась нами лишь для создания
// "нашего пространства" и для возвращения этого объекта

alert(a.test()); // 20
alert(a.q); // 10
alert(a.z()); // 30

Однако, ни "b", ни "c" не доступны посредством "а" напрямую.