Javascript Functions

Code, Code, Code.

As part of my final assessment at Flatiron School, I was asked to write a post about Javascript functions. I am going to give an overview of functions as a whole and then go a little further in describing arrow functions. I know this research really helped me get a better grasp on them and hopefully, it will be helpful to you as well.

Javascript functions are a block of code you use to perform a task or calculate a value. For a code to qualify as a function it must take in an input and produce an output where there is an obvious connection. This is great for when we need to perform the same action in multiple places in our app. The ability to call code many times without repetition, and as a structure of larger programs can be indispensable.

There are two different ways to create a function. There function definitions(which can also be called a function declaration or statement), and function expressions. A javascript definition is comprised of three things:

• The name of the function.
• A list of parameters, enclosed in parentheses and separated by commas.
• The statements that define the function, enclosed in curly brackets, {...}.

function add(number1,number2){
return number1 + number2
}

You then call or invoke the function like this:

add(4, 6;)
10

The other way to create a function is with function expression. Those vary a little from a definition in that they can be anonymous, it does not have to have a name. They can have a name and that can make it easier to trace in a debugger stack.

const add = function(number1, number2) {return number1 + number2}
let x = add(4,6) //x gets the value of 10
const add = function addUp(number1, number2) {return number1 + number2}
let x = add(5,6) //x gets the value of 11

Simply defining a function does not actually execute the function. You need to call the function somewhere else in your code. If you look at the code snippets above you will see that when I called the function I followed it with parenthesis, which was filled with the arguments. Those parentheses are what invoked the function.

Now I’m going to talk a little about the arrow function. Which was brought on by ES6. This site has examples of all the changes brought on by ES6, it also compares the difference from ES5. Arrow functions are praised by javascript developers for their concise syntax, scoping, and this binding. Some companies, like Airbnb’s eslint configuration, require its use, for all anonymous functions. That being said it does have its drawbacks. Here is a list of the main ones:

• Does not have its own bindings to this or super, and should not be used as methods.
• Does not have arguments, or new.target keywords.
• Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
• Can not be used as constructors.
• Can not use yield, within its body.

Arrow funtcions' biggest boon, is the removal of the function keyword, which I almost always misspell(which you probably didn’t notice I misspelled at the beginning of this paragraph). With arrow functions it allows you to achieve the same outcome with fewer keystrokes. Here are some of the basic syntaxes for arrow functions:

1. With one param, and a simple expression return isn’t needed.

params => expression

2. Multiple params parenthesis is needed, but if still an expression return not needed.

(param1, param2) => expression

3. Multiline statements require curly brackets and return.

param => {
  let a = 1;
  return a + param1;
}

4. Multi-param would require parenthesis, with multiline which requires curly brackets.

(param1, param2) => {
  let a = 1;
  return a + param1;
}

Here is a link to more advanced syntaxes from MDN, which is one of the resources I gathered this info from. It's very in-depth, I would advise reading it if you want to go much further into arrow functions.

Another difference between arrow and traditional functions is the handling of this. In a traditional function, this refers to the window, whereas in an arrow function it refers to the scope in which it was created. Here are examples of both traditional and arrow functions in regards to this:

Traditional:

window.age = 10; // <-- notice me?
function Person() {
  this.age = 42; // <-- notice me?
  setTimeout(function () { // <-- Traditional function is executing on the window scope
    console.log("this.age", this.age); // yields "10" because the function executes on the window scope
  }, 100);
}

var p = new Person();

Arrow:

window.age = 10; // <-- notice me?
function Person() {
  this.age = 42; // <-- notice me?
  setTimeout(() => { // <-- Arrow function executing in the "p" (an instance of Person) scope
    console.log("this.age", this.age); // yields "42" because the function executes on the Person scope
  }, 100);
}

var p = new Person();

You see in the traditional function the log is “10” because this refers to the window.age, which is set outside of the function. Whereas the arrow function the log is “42” which is set within the function, and that is where arrow functions grab this from.

A quick anecdote about implicit vs explicit. Growing up my grandmother would always get upset when people didn’t do something for her. Our reply would always be that we didn't know she wanted us to do that thing because she didn’t ask anyone. She would always reply that I shouldn’t have to ask, which would always end in a collective facepalm from everyone in the area. How does that have anything to do with Javascript arrow functions? Well, I’m glad you asked. When it comes to arrow functions there are two different ways to get you returns, they are mostly based on how you write your function. The main difference is whether your function has the word return in it. The name for an implicit return is a block body and the name for an explicit return is a concise body.

Implicit returns only work when you have a single line and are not using curly brackets.

params => expression
(param1, param2) => expression

Explicit returns work when you use curly brackets.

param => {
  let a = 1;
  return a + param1;
}
(param1, param2) => {
  let a = 1;
  return a + param1;
}

I hope this basic dive into javascript functions was helpful. It definitely gave me a better understanding of functions and the differences between them. I put links to the resources I used while researching this post. I encourage you to go over the documentation. It goes way deeper than would make sense for this post.

SOURCES:

Functions

Functions :: Eloquent JavaScript

JavaScript Functions

Arrow function expressions

ES6 In Depth: Arrow functions - Mozilla Hacks - the Web developer blog