DEV Community

Cover image for JavaScript Function , First Class function / First Class Citizen in JavaScript
Md Pervez Hossain
Md Pervez Hossain

Posted on

JavaScript Function , First Class function / First Class Citizen in JavaScript

What is a Function in JavaScript?
In JavaScript, a function is a block of code designed to perform a particular task. A function is executed when "something" invokes it (calls it).

Image description

What is an Anonymous Function?
An anonymous function is a function that does not have a name. Writing an anonymous function as function() {} directly will result in a syntax error because function statements require a function name. Anonymous functions are used where functions are treated as values. You can use anonymous functions in function expressions, where the function is assigned to a variable. In this case, the anonymous function acts as a value assigned to the variable.

Image description

What is the Difference Between Function Statement and Function Expression?
The major difference is hoisting. Function statements are hoisted, meaning they can be called before they are defined in the code. Function expressions, including anonymous functions, are Also hoisted, but in the Function Expressions , function assign a variable as like a value . in the memory Creation Phase initially it sets "Undefined". when you try to invoke the function before initialed , it throw reference Error that is "sayHello is not a function"

Image description

What is a Function Declaration?
A function declaration is a standard way to declare a function using the function keyword, followed by the function name and a parameter list. Function declarations are hoisted in their scope.

Image description

What is a First-Class Function in JavaScript?
First-class functions are functions that can be treated as values. They can be passed as arguments to other functions, returned from Others functions, and assigned to variables As Value. the Kind of those abilities of Function is known as First class Function in JavaScript. first Class Function is Also Known as First Class citizens.
Key Points of First Class Function :
1. Passed As Arguments : Here hello function passed as an argument of test function.
Image description

2. Returned from others functions : Here x function is Returned from the hello function and hello function is assign to result variable means x function assign to result variable as value.
Image description

3. Assign to variable as like a value :
Image description

4. Also known is First Class citizen

What is a Named Function Expression?
A named function expression is an anonymous function assigned to a variable but with a name. This name can be used for internal references within the function body.

Image description
but here you can not call the x function global cope because During the memory creation phase , here x , is named function expression which is allocated in the memory as the value of the let variable, so when you call x() function, it throws Reference error, that is x is not defined. because x is not defined as a global function . It created a local variable . You can call this x() function inside the x function, you got the whole function as output.

Function Parameters and Function Arguments
Parameters: Identifiers or labels that receive values inside the function. They are local variables of the function and cannot be accessed outside of it.
Arguments: The actual values passed into the function.

Image description

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Anonymous functions are used where functions are treated as values. You can use anonymous functions in function expressions, where the function is assigned to a variable. In this case, the anonymous function acts as a value assigned to the variable.

A couple of issues with this:

  • Named functions can also be used in places where functions are treated as values.
  • The act of assigning an anonymous function to a variable makes it cease to be anonymous (you can check this by checking the name property of the function - a true anonymous function will return an empty string '' as its name). The function stored in greet in your example code is NOT anonymous.
// Check the name of an anonymous function (defined with function expression)
console.log( (function() { }).name )   // '' - empty string - anonymous

// Check the name of an 'anonymous' function that has been assigned to a variable
const myFunc = function() {}
console.log(myFunc.name)   // 'myFunc' - same name as variable - no longer anonymous
Enter fullscreen mode Exit fullscreen mode

First-class functions are functions that can be treated as values

This implies that there are some functions that are not first-class functions. All functions are always first-class citizens in JS.

A named function expression is an anonymous function assigned to a variable but with a name.

This seems a little confused - how can an anonymous function have a name? A named function expression is exactly that - a function with a name, defined in an expression. There are no anonymous functions involved. Also, a named function expression doesn't need to be assigned to a variable to be a named function expression.

...but in the Function Expressions , function assign a variable as like a value.

You seem to be confused here - function expression and assignment are two different, separate things. 'Function expression' is the act of defining a function by using the 'function' keyword in a place where a statement would be invalid. Assignment, as you know, is the act of assigning a value to a variable. Assignment is not required for function expression.

The 'function' keyword is interpreted by JS in one of two ways:

  • A function declaration statement: JS will interpret the keyword this way if it used at a place in the code where a statement is acceptable to use. In this case, a function name must be provided. The function will be defined and immediately stored in a variable with the same name as the function.
  • Function expression: This is the other way the keyword can be interpreted - anywhere where a statement would not be valid. The function will be defined, but not stored anywhere automatically. The function name in this situation is optional.
Collapse
 
pervez profile image
Md Pervez Hossain • Edited

Thanks for reading and Point out the mistakes. Kindly read and check my others post when you free .