What’s so Special About JavaScript Functions?
Tags: javascript, webdev, programming, beginners
Published: 2021-01-23 01:59:26

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

In JavaScript, there are multiple ways to declare a function. One way is to declare it with the function keyword. The other way is to declare it as an arrow function.

In fact, there are _two_ ways to declare a function with the `function` keyword. One way is using function declarations, which are also called function statements, and the other is to use function expressions.

In JavaScript, functions are first-class, which means that they’re objects we can define on the fly.

* * *

Function Declarations
=====================

Function declarations, also called function statements, are the way we define a function — with the `function` keyword followed by the name of the function.

For example, we can write the following to define a function with a function declaration:

```
function foo(){  
  return 'foo';  
}
```

A function declaration is stored in memory prior to executing the program. This means we can reference it anywhere in our code, even before it’s declared. Storing a variable in memory prior to executing the program is called “hoisting”  in JavaScript.

For example, if we write the following:

```
console.log(foo());

function foo() {  
  return 'foo'  
}

console.log(foo());
```

We get `foo` logged from both function calls.

* * *

Function Expressions
====================

Function expressions are functions stored as a value of a variable.

For example, to define a function as a function expression, we write:

```
const foo = function() {  
  return 'foo'  
}
```

Unless they’re function declarations or statements, function expressions aren’t stored in memory before the program runs. The function is defined in run-time, so we can only reference them after they’re declared.

For example, if write the follwing:

```
console.log(foo());

const foo = function() {  
  return 'foo'  
}

console.log(foo());
```

We’ll get the following error: `Uncaught ReferenceError: Cannot access ‘foo’ before initialization’`.

In the code above, we have the variable declaration when the program initially runs, but we don’t have the function assigned to it yet, so we can’t access it. Also, anything defined with the `let` , or `const` keywords can’t be used with those variables or constants before it’s defined, which also prevents it from being run.

* * *

When Should We Use Function Declarations or Expressions?
========================================================

It depends on personal style. Function declarations are more convenient — they’re available in any part of the script — while function expressions let us assign a function to a variable and reference the variable in various ways, like the calling methods it has.

First-Class Functions
=====================

As we see in the function expression example, we can assign a function to a variable in JavaScript. The term for this is a first-class function. First-class functions are functions defined on the fly as the program runs.

This is because in JavaScript, functions are objects just like everything else. Functions have their own methods and other properties and can be used just like objects.

For example, all functions have the `toString` method to convert them to a string with the code that defines the function.

Other methods in a function would be methods that call a function with a different `this` value, like `bind` , `call` , and `apply`.

We can use the `toString` method by writing the following code:

```
function foo() {  
  return 'foo'  
}

console.log(foo.toString());
```

Then we get the following from the `console.log`:

```
function foo() {  
  return 'foo'  
}
```

The `bind`, `call`, and `apply` methods are similar. They all take an object for the `this` keyword in the function as the first argument. `bind` and `call` take a comma-separated list of arguments for the other arguments and `apply` takes an array of arguments as the second argument.

For example, we can change the value of `this` in a function with the `call` method by writing the following code:

```
let obj = {  
  firstName: 'Joe',  
  lastName: 'Smith'  
}

let person  = {  
  firstName: 'Jane',  
  lastName: 'Smith',  
  getFullName()  {  
    return `${this.firstName} ${this.lastName}`  
  }  
}

console.log(person.getFullName());  
console.log(person.getFullName.call(obj));
```

The first example would be the same except that we change `call` to `apply`, since we didn’t pass in the second or subsequent arguments:

```
let obj = {  
  firstName: 'Joe',  
  lastName: 'Smith'  
}

let person  = {  
  firstName: 'Jane',  
  lastName: 'Smith',  
  getFullName()  {  
    return `${this.firstName} ${this.lastName}`  
  }  
}

console.log(person.getFullName());  
console.log(person.getFullName.apply(obj));
```

Then we get `Jane Smith` for the first `console.log`, since we haven’t changed the value with `apply` yet, but we changed the value of `this` to `obj` with the `apply` method in the second `console.log` so that we get `Joe Smith`.

We can call `bind` with an object passed in, as in the following code:

```
let person = {  
  firstName: 'Jane',  
  lastName: 'Smith',  
  getName() {  
    return `${this.firstName} ${this.lastName}`  
  }  
}

const joe = {  
  firstName: 'Joe',  
  lastName: 'Smith'  
}

console.log(person.getName.bind(joe)());
```

Then we get `'Joe Smith'` since we passed in the `joe` object into the first argument of the `bind` method, which sets the `this` object inside the `getName` method to the `joe` object.

In JavaScript, there are two ways to declare a function with the `function` keyword. One way is using function declarations, which are also called function statements, and the other is to use function expressions.

Function declarations are defining a function with the `function` keyword followed by the name of the function. They are available anywhere in the program.

Function expressions are functions assigned to variables. They’re only available after they’re declared and assigned to the variable.

In JavaScript, functions are first-class, which means that they’re objects that we can define on the fly.

With these features in mind, we can use in ways that are different from languages like Java, where functions can only be inside classes.