What differences are there, if any, in these two ways of declaring a function?

I am currently going through, Eloquent JavaScript by Marijn Haverbeke, after being disappointed by another book that was highly recommended. I think I found a great book.

Up to chapter 3 (called Functions), the author has been demonstrating functions like so:

let greet = function (name){
	return "Hello, I am " + name
}
console.log(greet('Andy')) // Hello, I am Andy

but then in chapter three started to declare them as follows:

console.log(greet('Andy')) // Hello, I am Andy
function greet(name){
	return "Hello, I am " + name
}

The later is what I was expecting and used to in Python, AutoHotkey, PowerShell etc.

But in JavaScript what are the functional differences between the two? is this all down to just style or comfort?

He mentions the subtlety with the later example is that, the function call always works despite it being at line 1, even though the code execution having not reached the function declaration.

Any help would be greatly appreciated!

There is a slight difference between the two. In the first one, greet is the name of a variable set equal to a function. You can pass it around in functions or store it in a variable.

This is essentially what you get when you print the first greet function.

function (name){
    return "Hello, I am " + name
}

This is the second function

function greet(name){
    return "Hello, I am " + name
}

Whereas in the second, the function’s name is greet. It’s a Javascript object with a pure definitive name. This one can be hoisted and be called before it’s declared in the code.

A lot of the time I don’t think it will matter. In cases where you are performing function inheritance it will though. You will need a reference to the old version of the method so you can call it after your modifications.

2 Likes

The first is a function expression.

If the function name is omitted it is an anonymous function expression. The other type is an arrow function (arrow functions are always unnamed).

The second is just called a function declaration.

If the function name for a function declaration is omitted it is also an anonymous function. They are mainly used as an IIFE or a callback (because without a name you can’t invoke them by name).

(function (a, b) {
  console.log(a + b); // 3
})(1, 2);
document.addEventListener("click", function (e) {
  console.log(e.target, "was clicked");
});

The main differences:

  1. Function expressions are not hoisted (avoid relying on hoisting).

  2. Function expressions can be declared using let/const which can help prevent accidental function redeclaration (JS does not support function overloading, if two functions have different signatures they are the same as long as the identifier is the same).

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

function add(a) {
  return a + 10;
}

console.log(add(1, 2)); // 11
const add = function (a, b) {
  return a + b;
};
// SyntaxError: Identifier 'add' has already been declared
function add(a) {
  return a + 10;
}

You also can’t overwrite the identifier inside the function. Which is fairly unexpected behavior with function declarations (strict mode doesn’t help here).

function add() {
  add = 'test';
}

add();
add(); // TypeError: add is not a function
console.log(add); // test
const add = function() {
  add = 'test';
}
add(); // TypeError: Assignment to constant variable.
3 Likes

You guys are amazing, Thank you so much. I understand much better about the conts and pros of each now.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.