DEV Community

loading...
Cover image for Javascript Functions

Javascript Functions

Oscar Pacheco Ortiz
Full-Stack Web Deveoloper by day / Game developer by night
・4 min read

Table Of Contents

Functions

A fundamental building block for Javascript programs. The most common feature in all programming languages. What exactly is a function in technical terms? a function is a block of code that is defined once and can be executed or invoked numerous times. Another quick note is functions are also objects, meaning they can be manipulated by other programs too.

We can declare a function by using the function keyword, following by a name of our liking, followed by a pair of opening and closing parentheses, a space for between the parameters and the curly braces with zero or more statements inside.

  function buzz() { }
Enter fullscreen mode Exit fullscreen mode

There is another way of declaring functions in modern javascript, and thats with the arrow function. Which actually looks like an arrow, but does have its own section that we will get too since it has limitations.

  () => {}
Enter fullscreen mode Exit fullscreen mode

Inside of the parentheses we can include identifiers or in other words parameters, these parameters act as local variables for the body of the function. To get a value out of those variables we can simply invoke our function by including some values or in technical terms arguments. We use these arguments to compute a value and return that value part of the invocation.

If a function is assigned to a property of an object, that function becomes a method of that object. This is where things start to get a bit more complex since we are now invoking on or through an object, as where the object becomes the context of the this keyword. The this keyword is a while other article to discuss about so we will skip that for now, but it's something good to note down about when creating methods for objects. With that being said we are also allowed to simply assign a function to a variable and pass them to other functions. Since functions are objects like we mentioned before, you can set properties on them and invoke methods on them too.

Traditional Functions

The function keyword is the only way to declare a function. We can also declare function expressions which pretty much a function stored inside a variable. For example

Function declaration


function printName(str) {
   return "Hello " + str
}

console.log(printName('oscar')) // output "Hello oscar"

Enter fullscreen mode Exit fullscreen mode

Function expression

let addUp = function(a,b) {
  return a + b
} 

console.log(addUp(1,2)) // output 3
Enter fullscreen mode Exit fullscreen mode

One of the major differences between a function declaration and function expression is the function name, which in function expressions can be left out to create anonymous functions. By default functions return undefined if there is no specific return statement with any value to return. One other thing to note about functions is that they can be conditionally declared too inside if/else statements, but typically has inconsistent results so it's not a very good pattern to use.

A cool feature that comes with declaration functions is hoisting, you are able to use your function before you declare it.

printHello(); // logs 'Hello'

function printHello() {
   console.log('Hello');
}

Enter fullscreen mode Exit fullscreen mode

Function expressions on the other hand are NOT hoisted. So you can not use your function expression before you create them.

Arrow Functions

We were introduced into arrow functions in ES6, it's a nice compact alternative to a traditional function expression, but has limitations and can't be used in all situations. It does not have bindings like this or super keywords and not suitable for call, apply, or bind methods, cant be used as constructors either.

Let's break down a declared function into a arrow function

  function(name) {
    return 'Hello ' + name;
  }
Enter fullscreen mode Exit fullscreen mode

We start off by removing the function keyword and leave the arguments, and add an arrow between the arguments and curly braces.

  (name) => {
  return 'Hello ' + name;
}
Enter fullscreen mode Exit fullscreen mode

next we will remove the curly braces and return statement. The return statement is automatically implied.

  (name) => 'Hello ' + name;
Enter fullscreen mode Exit fullscreen mode

and for the last step we can remove the parantheses since we only have a single argument being passing into the parameters.

  name => 'Hello ' + name;
Enter fullscreen mode Exit fullscreen mode

As we mentioned before, it is highly recommended that we don't use arrow functions are methods to avoid bugs or any other issues, arrow functions are best for non-method functions.

Conclusion

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!

Discussion (7)

Collapse
sudheervajrapu profile image
Sudheer

well put @cleveroscar 👏👏

there's a typo it should be "if/else".

Collapse
cleveroscar profile image
Oscar Pacheco Ortiz Author

I believe I spaced it out just for readability, but good catch! Thank you for that!

Collapse
sudheervajrapu profile image
Sudheer

I didn't mean about spaces.. It's misspelled as esle.. instead of else

Thread Thread
cleveroscar profile image
Oscar Pacheco Ortiz Author

Two heads are always better than one! I made sure to fix that typo.

Collapse
vishalraj82 profile image
Vishal Raj

@cleveroscar I did learn somethign new. It would be nice if you can put more research on why function expressions are not a drop-in replacement for function declarations. More on the technical side.

Collapse
cleveroscar profile image
Oscar Pacheco Ortiz Author

It would be my pleasure!

Collapse
animeshdhanuk profile image
Animesh Dhanuk

Good. Get Modern ES6 Snippets For JavaScript --> dev.to/animeshdhanuk/15-modern-es6...