DEV Community: Axel Yaguana

Learn About JavaScript Functions in 3 Minutes ⏱️

Axel Yaguana — Tue, 06 Apr 2021 15:47:42 +0000

No matter what programming language you pick up to develop strong software, you always end up using functions to make code more effective.

A function is a piece of code that performs a task, it's made to be reusable and saves many coding lines. Do you remember your algebra classes? Well, a JavaScript function is similar to those of your math lectures in a certain way.

So, in this blog you're going to learn about JavaScript functions and how to use them.

Understanding a JavaScript function syntax

A function has a name, input arguments, its logics and something to output. So, basically, the syntax of a function in JavaScript is:

function myFunc(arg1, arg2, arg3) {
     //Function logics
}

Where:

function is the reserved word to make JavaScript understand it's a function.
myFunc is your function's name. You can use any name, but you may want a name that makes sense to you.
arg1, arg2, arg3 ... are the input arguments. They can be as many as you need. Or your function may need no argument at all.
//Function logics is into curly braces {} and this is where all the magic of the function happens. It contains the code to be executed.

Function Expression

In JavaScript you can store a function in a variable and invoke it with the variable name:

const multiplicacion = function mult(num1, num2) {
     return num1 * num2
}
```


Now, if we want to invoke this function, we code this:


```
const operacion = multiplicacion(3, 4)

//Expected output: 12
```


**BE CAREFUL!** You can't call `mult` as a function, it will return an error:


```
const operacion2 = mult(3, 4)

//Expected output: Uncaught ReferenceError: mult is not defined
```



Notice the keyword `return`. This makes a function to return something.

## Anonymous Function
Yes, you can define a function with no name. They're useful while passing a callback function or creating a closure.


```
const anonimo = function () {
     console.log('It is an anonymous function')
}

anonimo()

//Expected output: It is an anonymous function
```


## Arrow Functions

![](https://miro.medium.com/max/3200/1*UayxZEMi_mVgb14UC_zHyw.png)

Arrow functions were implemented in **ECMAScript 6**. The main benefit is less code since you can create a function in just one line!

Let's compare an arrow function to a traditional one:



```
//Traditional Function
const traditionalGreeting = function (name){
     return `Hi, ${name}`
}


//Arrow Function
const arrowGreeting = (name) => `Hi, ${name}`


traditionalGreeting('Maria')
//Expected output: Hi, Maria

arrowGreeting('Axel')
//Expected output: Hi, Axel
```


See how we can create the same traditional function in just one code line. If you'd like me to write a post about arrow functions let me know in the comments section.

## Function Scope
When you declare a variable inside a function, you can't access to it from anywhere outside. Let's see this example which raises a number to the second power


```
const funcScope = secondPower(numero) {
     const power = 2
     return numero * power
}

//Here you can't access power
```


Accessing `power` outside the function is not be possible. 

## Invocation vs Referencing 
To invoke a function means to call it and to execute it. On the other hand, to reference a function is just that, to make your program know there's a function anywhere else. 

Imagine you have a function called `myFunc`. So, if you just want to make reference to it, you type `MyFunc`. On the contrary, if you want to invoke it, you type `myFunc()`. Notice the parenthesis `()`. But to understand it better, let's see an example using events.

In this example there's a button and when the user clicks it, it shows an alert saying 'Hello!'.

We have this structure in HTML:

Click Me



In JavaScript we have this:

const sayHello = () => alert('Hello!')

const boton = document.querySelector('button')

boton.addEventListener('click', sayHello)



As you see, in the line `boton.addEventListener('click', sayHello)` the arguments are `'click'` (the event) and `sayHello` (a function). But the latest is just being referenced, since **we don't need it to be executed** unless the user clicks the button.

So far, you have learned the basics of JavaScript functions. The key to become a good developer is practice. So I ask you to **write your own functions** and to practice all you need. 

If you liked what you read, you can subscribe my posts. Or you can follow me on [Twitter](https://twitter.com/axlyaguana11). I'll be glad to hear you opinions.

Concepts You Need to Know If You are a JavaScript Beginner

Axel Yaguana — Tue, 30 Mar 2021 18:09:52 +0000

JavaScript is undoubtedly a must have if you want to become a web developer. That's because it allows you to create web apps which interact with users.

So, if you're a JavaScript beginner, I'll tell you some basics to get into context and make your learning curve smoother. This way you'll understand the background instead of doing a copy-paste of code.

Variables: types, initialization and declaration

A variable is a representation somewhere in memory that stores a value. You can declare and initialize a variable in just one code line:

var x = 5;

Alternatively, you can first declare the variable and then initialize it (with more than one line):

var x;  // Declaration
x = 5;  // Initialization

`var` vs `let` vs `const`

Before ECMAScript 6 (2015), the only way to declare a variable was using var. But now you can use let and const. The main differences have to do with scope, re-assignation and hoisting.

To put it simple, var has global/function scope, that's to say, you can access to this variable from anywhere in your code, except if you declared it in a function. Function scope means you can access your variable just inside the function itself.

let and const have block scope, that means you can access to them just in the block code they are declared. You can understand it better after analyzing this table:

I suggest you using let or const rather than var.

Functions

A function is a block of code that perform a task. They're useful when writing web apps since they make code more readable. As a JavaScript beginner, you have all you need to understand functions.

In general, every function in all programming languages have a name, arguments to input and a result to output. By the way, there're functions that don't need arguments to be invoked.

The syntax of a JavaScript function is as follows:

function func_name(arg1, arg2, arg3){
     //code to be executed
}

Where:

function is the reserved word to declare a function.
func_name is your function name. You can name it however you want, but I recommend a name that makes sense to you.
arg1, arg2, arg3 are the function's arguments. You can require as many as you want (or zero).
The line //code to be executed makes reference to the logics of your function.

Now let's see an example of a function that returns the addition of two numbers:

//Declaring the function
function esSuma(num1, num2){
     return num1 + num2
}

//Executing the function
let x = esSuma(3, 4)     //You assign the function to a variable
console.log(x)          //It prints 7

Arrow Functions

A new way to declare functions is arrow functions. As you advance as a developer, you'll see that arrow functions are easy to read and, sometimes, more adequate than the normal ones.

This is the syntax of an arrow function.

const x = (arg1, arg2) => {
     //Code to be executed
}

I'll be explaining the use of arrow functions and normal functions in other post (coming soon).

Scope

Scope in JavaScript is how accessible a variable is. There are basically two types: Local Scope and Global Scope.

Local Scope

You can access your variable just inside the block code or function it's declared. For example in a function:

//Here you can't access your y

function hola() {
     let y = 3
     console.log(y)
}

//Here you can't y
//y is considered to have function scope as well

In the same way, in a block code:

//Here you can't access x
{
     let x = 5
}

//Here you can't access x

Notice that I declared x using let. If I did the opposite, using var you could access the variable outside the block code. It turns out that var declares a global variable.

Global Scope

In this case you can access your variable wherever in your code. For example:

let w = 9

{
     //Here you can access w
}

As you read before, if you declare a variable using var, you create a global variable.

var q = 1

//q is a global variable

Arrays

Arrays are a type of variable developed to store multiple variables of multiple types. They're useful when you need to store many values related to a single variable.

For instance, imagine you're managing a group of people:

let people = ['Axel', 'Diego', 'Sofia', 'Valeria']

As you can see, the syntax of an array is:

let arrayName = [item1, item2, item3 ...]

You can modify arrays using methods.

Objects

Objects are representations of real life things into code. So an object has properties (its characteristics) and methods (things the object can do). Let's create an object called axel:

let axel = {
    height: 183,
    country: 'Ecuador',
    profession: 'Developer',
    returnInfo: function () {
        return this.height + ' ' + this.country + ' ' + 
        this.profession
    }
}

In this example, properties are height, country and profession. You can access them using dot (.) notation:

axel.country
//Expected output: 'Ecuador'

axel.profession
//Expected output: 'Developer'

On the other hand, returnInfo is an especial property that has a function as value. That's why it's a method. You can invoke this method:

axel.returnInfo()

//Expected output: '183 Ecuador Developer'

Why did we use `this` while coding the element method?

this makes reference to the object itself. So we are considering height, country and profession of axel. It's an important word to take into account.

Generating Object Templates

What if you have to create too many many objects of the same type? Creating 'manually' each of them is not efficient. So, to solve this problem you can use Object Templates.

Basically you create a function and, from this function, you create your objects.

function Usuario(height, country, profession) {
    this.height = height,
    this.country = country,
    this.profession = profession
    }
}

Now lets create an object using Usuario:

let juanito = new Usuario(176, 'Uruguay', 'Designer')

juanito is created and you can access its properties:

juanito.country
//Expected output: 'Uruguay'

These were some concepts you need to understand to make your learning path more productive. Basics of JavaScript are essential for every web developer.

If you're a JavaScript beginner and you think it's a lot of information, don't give up. You can master this and acquire more knowledge as time passes by. I challenge you to become a JavaScript Ninja. This is the beginning.

If you liked this post, you can subscribe. I'll continuously update blogs that may help you in your career as a developer.