Functions In JavaScript

#javascript #webdev #beginners #programming

Functions

Functions are important, vastly used, reusable code blocks, or just a piece of code that you can use again and again.

Functions accept parameters as variables, which makes them even more useful based on the Value Accepted by it as a parameter.

Parameters in functions can be of any data type, ranging from a simple integer, an array, or even an Array full of Arrays!

Ways to declare a function

There are several ways to declare a function. Something they all have in common is Parentheses () and Curly Braces {}

You can accept a parameter in a function just by writing it inside the Parentheses.

All the code executed by the function is contained within the curly braces.

1) The Classic Way

function sayHello () {
    console.log("Hello Dev!")
}

2) Function contained in a variable

const sayHello = function () {
    console.log("Hello Dev!")
}

3) The ES6 way; Arrow Functions

const sayHello = () => {
    console.log("Hello Dev!")
}

The javascript ES6 version introduced many amazing features to the language but one of the most useful was Arrow Functions.

They have a few differences from Normal Function, which we'll talk about in an upcoming post.

They're just functions stored in a variable but do not use the "function" keyword. Assign a pair of Parentheses to a variable and make an arrow => to determine that it's an arrow function and continue with curly braces as normal.

Note: Arrow Functions can't be used in any version before ES6

Calling (Running) a function

To call a function, first declare it in your code.

(Here, we'll use the arrow function we declared a while ago.)

const sayHello = () => {
    console.log("Hello Dev!")
}

We have our function declared!
Now, to call it anywhere within our file, we just need to mention the function name with parentheses.

sayHello()

// This prints out "Hello Dev!"

Accepting Parameters

To make our function use parameters provided by the user, we just need to name them within the Parentheses.

Let's make a simple arrow function that squares a number provided as a parameter and prints it to the console.

const square = (num) => {
    console.log (num * num)
}

// We mentioned "num" within the Parentheses of our function to denote that we need a parameter for "num".

// Notice how we don't use any quotation marks though we've never declared "num"

// To call this function, we'll simply name it with parentheses, but within the Parentheses, we can provide a value that will be given to "num"

square(5) // returns 25.

// We can have multiple parameters like this:

const person = (name, age, city) => {
    console.log(`
        Name: ${name}
        Age: ${age}
        City: ${city}
    `)
}

// We can provide values to multiple parameters like this:

person("Josh", 21, "London")

The above example returns:

Name: Josh
Age: 21
City: London

Note: While printing the name, age, and City provided by the user, we used something known as Template Literals, more posts on that topic soon!

We need to provide all possible parameters, We could just possibly add 2 parameters and it'll be considered as the first 2 parameters declared in the function body.

If we only want to provide the 1st and 3rd parameters, we can skip the 2nd parameter like this:

person("Mike", ,"Paris")

This will return:

Name: Mike
Age: Undefined
City: Paris

Nested Functions

We can create new functions inside of other functions but functions are block-scoped, i.e. You can only refer to the function within the function you declared it and not anywhere else in your code.

Hope you learned something useful today! Peace Out ✌️

Top comments (5)

Jake Metz • Mar 24 '22 • Edited

Very minor of course but there's a distinction between 'parameters' and 'arguments'.

Function parameters are the names listed in the function's definition. Function arguments are the real values passed to the function. Parameters are initialized to the values of the arguments supplied.

So, it would be arguments provided by the user and not parameters.

Took me a while to wrap my head around that but helped me converse with other devs when describing how my code was working.