объявление функции javascript

324
02 мая 2017, 07:09

Стажируюсь в компании на фронтенд-разработчика, пришел с строготипизированной джавы, и некоторые моменты мне не очевидны, а именно:

Объявление функции в js может быть двух видов:

function a(){...}

либо

var a = function(){...}

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

Быть может, влияет на работу GC?

Более предпочтителен развернутый ответ, нечто вроде "это одно и то же" - ответом являться не будет.

Заранее спасибо.

Answer 1

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

function a(){...}

Function Expression – объявление функции в контексте какого-либо выражения, например присваивания. Пример:

let a = function(){...}

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

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

Hello("World"); // Привет, Вася
function Hello(name) {
  alert( "Hello, " + name );
}

А если бы это было объявление Function Expression, то такой вызов бы не сработал:

Hello("World"); // ошибка!
let Hello= function(name) {
  alert( "Hello, " + name );
}

Это из-за того, что JavaScript перед запуском кода ищет в нём Function Declaration (их легко найти: они не являются частью выражений и начинаются со слова function) и обрабатывает их.

А Function Expression создаются в процессе выполнении выражения, в котором созданы, в данном случае – функция будет создана при операции присваивания Hello = function... В большинстве случаев обычное объявление функции (Function Declaration) – лучше. Function Expression желательно использовать только там, где это действительно нужно и удобно.

Answer 2

Разница в том, когда можно использовать функцию:

function justForContext() { 
 
  console.log(a); 
  console.log(b); 
 
  a(); 
  try{b();}catch(e){console.log("error calling b");} 
 
  function a() { 
    console.log("inside a"); 
  } 
  var b = function() { 
    console.log("inside b"); 
  } 
 
  console.log(b); 
  b(); 
 
} 
 
justForContext();

а готово к использованию везде в области видимости, а b - после присваивания.

READ ALSO
Запрет скролла над картами google

Запрет скролла над картами google

Я видел подобные вопросы на этом ресурсе и на оригинальном и у меня все-равно проблема

301
html checkbox values to array and ajax

html checkbox values to array and ajax

здравствуйте, есть несколько чекбоксов, как показано на скриншоте

315
Записать в БД несколько строк сразу

Записать в БД несколько строк сразу

СУБД: MySQL 55, сервер: Apache 24, PHP 7, пробую сделать без фреймворков

210
Производительность web-страницы и Electron/NW.js

Производительность web-страницы и Electron/NW.js

Как я понимаю Electron/NWjs по сути просто открывает окно браузера с нужным контентом, но если взять web-страницу и открыть её в Chrome и ту же саму страницу...

256