DEV Community

Cover image for Beyond Syntax: Exploring the Depths of JavaScript Functions
Md Alfaz Hossain
Md Alfaz Hossain

Posted on

Beyond Syntax: Exploring the Depths of JavaScript Functions

Hello, developers today I will dive into the JavaScript functions. Let's start.....

In JavaScript function is one kind of non-primitive data type. The function is also one kind of object in JavaScript because in JavaScript all non-primitive data types are one kind of object.
A JavaScript function is a block of code designed to perform a particular task. When we use the same logic randomly in our code then we often use function for it.

Function
In JavaScript, we can define a function using the keyword function. A function has the function keyword, followed by aq name and a parenthesis.
The code to be excited by the function is placed inside curly braces {}. A JavaScript function is executed when something invokes it or calls it.

function add(num1,num2){
  let num3 = num1+num2;
  console.log(num3) //output is 13
}
add(8,5)//function call 
Enter fullscreen mode Exit fullscreen mode

Function return
When JavaScript reaches a return statement the function will stop executing. When a function is invoked or called it will execute after finding the return it will return the value to the caller.
When a function does not return anything it will return undefined implicitly and come out from the function

function myCall(){
console.log("hello Bangladesh")//output is hello Bangladesh
}
let x= myCall();
console.log(x) //output is undefined
Enter fullscreen mode Exit fullscreen mode

Function declaration and function expression
A function declarations means the normal function declaration like

function sleep(){
console.log("I am sleeping")
}
sleep()// output is I am sleeping
Enter fullscreen mode Exit fullscreen mode

But function expression is a bit different. When a function is stored in a variable and called with a variable name is called a function expression

const a = function(){
console.log("Hello Bangladesh")
}
a() // output is Hello Bangladesh
Enter fullscreen mode Exit fullscreen mode

This function is also called an anonymous function.

Function hoisting:
Hoisting is a JavaScript behavior of moving declaration on the top of the current scope. When a function is called before it is declared using the JavaScript hoisting method hosited the function at the top of the function call as a result it does not give any error.

add(8,5)//function call 
function add(num1,num2){
  let num3 = num1+num2;
  console.log(num3) //output is 13
}
Enter fullscreen mode Exit fullscreen mode

But remember function defined using an expression are not hoisted and give an error

add(8,5)//function call 
const add = function(num1,num2){
  let num3 = num1+num2;
  console.log(num3) //give an error
}
Enter fullscreen mode Exit fullscreen mode

Self-invoke functions:

When a function calls itself then it is called self invoke the function
(function(){
console.log("Hello Bangladesh");
})();

Function Parameters:
When parameters are more than arguments we passed then extra parameters will set value undefined.

function add(num1,num2){
  num3 =num1* num2 // here num1 is 8 ,num2 is undefined
  console.log(num3) //output is NaN
}
add(8,5)
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited
const a = function(){
console.log("Hello Bangladesh")
}
a() // output is Hello Bangladesh
Enter fullscreen mode Exit fullscreen mode

In your example, a is not an anonymous function. It's correct to say that the value of the function expression (the function expression is the part on the right of the assignment) is an anonymous function, but the act of assigning this anonymous function to a variable in this way makes it cease to be anonymous - it will acquire the name of the variable.This can be verified by checking the function's name:

const a = function(){
console.log("Hello Bangladesh")
}
console.log(a.name). // 'a' - not an anonymous function, it has a name

console.log((function(){
console.log("Hello Bangladesh")
}).name)  // '' - no name - anonymous function 
Enter fullscreen mode Exit fullscreen mode

You can review your understanding of anonymous functions here: