DEV Community

Cover image for Learn Javascript Functions
Zahab Kakar
Zahab Kakar

Posted on • Originally published at zahab.tech

Learn Javascript Functions

Introduction

This article explains JavaScript function in detail and followed the previous JavaScript article Learn JavaScript__Part1. Therefore if you are not familiar with JS basics, you may check the mentioned articles.

What are Functions in JavaScript?

Functions are containers that hold reusable code and perform a particular task. Not just JavaScript but almost all programming languages have a concept of functions and every developer must deal with that while coding.

Functions are independent pieces of code and manage the large code. Before moving on how it performs a task, let's see how we can create a function.

In javaScript the function keyword is used to declare a function, to identify a function it should have a name.
Here is the syntax for function declaration

function  name(){

YOUR_CODE

}
Enter fullscreen mode Exit fullscreen mode

Here is the example, the function "sayHi" can be created using a function keyword followed by "sayHi" [function name] and a set of parentheses, the function code will be written inside the curly braces. Whenever the function is called, it performs whatever instruction is written inside it, here I created this function that whenever it is called it should print I like JavaScript.

  function sayHi(){
      console.log("I like JavaScript")
  }
  sayHi();

// I like JavaScript
Enter fullscreen mode Exit fullscreen mode

Here is another function example


  function myFunction(){
      console.log("Hello world");
      let c =  3 + 5;
      console.log(c);
  }

  myFunction();

/*
      Hello world
      8
*/

Enter fullscreen mode Exit fullscreen mode

JavaScript functions can be used as reusable code. In below example, I don't need to type the code every time I need it, I can just call the function.


  function myFunction(){
      console.log("Hello world");
      let c =  3 + 5;
      console.log(c);
  }

  myFunction();
  myFunction();

/*
      Hello world
      8
      Hello world
      8
*/

Enter fullscreen mode Exit fullscreen mode

Functions also accept parameters - parameters are the symbolic name for "data" that goes into a function. A function can have one or more parameters.

In the below example, the function has a parameter called num, num accepts a value and performs the function task based on that value. The parameter value will be initialized while calling the function.

  function myFunction(num){
     console.log(num * num)
  }
  myFunction(3);
  myFunction(10);


/*     9
       100
*/
Enter fullscreen mode Exit fullscreen mode

You don't need to console.log in functions, the " return " is used to return the function statements.

  function myFunction(a, b){
    return a + b;
  }
  console.log(myFunction(3, 5));

//     8
Enter fullscreen mode Exit fullscreen mode

What are the arrow functions?

ES6 introduced more cleaner and proper method for declaring function, let's compare these two functions.

// Normal function
const square = function(number){

return number * number;

}

//Arrow function
const square = number=> number * number;

Enter fullscreen mode Exit fullscreen mode

I write the function called square in an arrow function method. To convert a JavaScript function to an arrow function method, you need to remove the function keyword and after the parenthesis we need a (=>), if there is no parameters for the function, just add an empty parenthesis.

If the return is just a single line, you can remove the return and curly braces.
You can read the arrow function as " number goes to number times number".

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Feel free to contact me on Twitter

Discussion (5)

Collapse
lukeshiru profile image
Luke Shiru • Edited on

Worth mentioning that nowadays you can use the Arrow function syntax, which makes your code way simpler. To illustrate I'll transform some of the functions in your post:

const sayHi = () => console.log("I like JavaScript");
const myFunction1 = () => (console.log("Hello world"), console.log(3 + 5));
const myFunction2 = number => number ** 2;
const myFunction3 = (number1, number2) => number1 + number2;
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
zahab profile image
Zahab Kakar Author

Thank you, Yes it worths but that is the ES6 concept and might confuse some beginners.

Collapse
lukeshiru profile image
Luke Shiru • Edited on

I recently teach this to a few juniors, and they got it faster than the old version, mainly because is less verbose, look at it without syntax highlight:

function (number) { return number * 2 };
Enter fullscreen mode Exit fullscreen mode
number => number * 2;
Enter fullscreen mode Exit fullscreen mode

Arrow functions look more like value → result, while the old syntax is more like function (value) return result, which feels like more words to say the same. Still my point is not so much you should only show Arrow functions, my point is that you should show both. Nowadays arrow functions are used a lot, and if this is "learn JavaScript Functions", arrow functions should be included.

Cheers!

Thread Thread
zahab profile image
Zahab Kakar Author

Thanks for your comment, I just edited the article and added the arrow functions concept too :)

Collapse
suhakim profile image
sadiul hakim

Talk about Higher Order function in Javascript