Javascript Functions Practice for Beginners

Functions in Javascript for Beginners

Explanation of the functions in Javascript from beginners to professional level. 

This article contains functions in the most basic form, then we show functions within functions substituted for variables. Objects will be used as variables using for, forEach loops... Arrays will be used with the maps, filter and call methods.

A function in JavaScript is a set of tasks performed and identified by a name, where it takes some input value to return an output value.

Firstly we will open the Google Chrome web browser, and we will go to the inspection tool by pressing the right button on an empty spot on the screen, clicking on Inspect.

From the inspection tool we will try to execute the JavaScript functions that we are developing in real time, a very useful method when programming, since we will know that what we are programming will work 100% on our page, and we will be able to implement it later in the code editor.

Example 1:

function sayHello(name){ 
   console.log(name); 
}

Basic Javascript Function

We will create a maps function with three variables that can be replaced by numbers or the values ​​that we want.

The function will be executed by typing its name and replaced with one of the values, the result can be seen in the console of the inspection tool.

Example 2:

function maps(x,y,z) { 
   console.log(x, y, z); 
} 
maps(20,10,15);

Functions that receive an object as a value

There are also functions that receive an object as a value.

An object in Javascript is an entity with properties. Objects in javascript are represented in braces and have a key with a value.

Example 3:

function maps2(obj) { 
   for(let key in obj){ 
       console.log(obj[key]); 
   } 
   console.log(obj.x, obj.y, obj.z); 
} 
maps2({x:20, y:10, z:15});

Try it Yourself

Create a function inside another function

We can create a function inside another function, with variables inside the function that cannot be accessed from outside.

Example 4:

function calc(params) { 
   var cont = 20; 
   function name(params, cont) { 
       return params + cont; 
   } 
   return name(params, cont); 
}

Try it Yourself

Example 5

Using functions inside functions with onclick Event:

Try it Yourself

Javascript Map method

Inside a function, we can use the map() method. It is an internal method in Javascript that creates a new array with the results of the call to the indicated function, applied to each of its elements.

Example 6:

function showMap(x,y,z,val){ 
   let mult = [x, y, z].map( (el) => el*val ); 
   for(let key in mult){ 
       console.log(key + ' => ' + mult[key]); 
   } 
}

Try it Yourself

Call method in Javascript

In the following function example, we will use the call method. This method calls a previous function with individually supplied arguments.

To use call, we will create a disc object and our function to call newDisc.

Example 7: 
var disc = {disc1: 0.5, disc2: 0.8}; 
var newDisc = function(client, disc){ 
   return this[client]*disc; 
} 
console.log(newDisc.call(disc, 'disc2', 10)); // 0.8*10=8 
console.log(newDisc.call(disc, 'disc1', 20));//0.5*20=10

Try it Yourself

Apply method in Javascript

The apply method has the same behavior as call but is integrated in a different way:

console.log(newDisc.apply(disc, ['disc1', 30]));//15

Try it Yourself

Bind method in Javascript

The bind method has the same behavior as call but is integrated in a different way:

var discount = newDisc.bind(disc); 
console.log(discount('disc1', 50));//25

Try it Yourself

You can create a function inside a variable and then use the variable whenever you need it:

var app = (function hello(){ 
   var msj = 'hello'; 
   return { 
       msj: msj 
   } 
})(); 
app;

← Previous Chapter - Next Chapter →