 |
You don't know all about functions in JavaScript. Or do you feel quite confused when in JavaScript there are quite a few ways to initalize functions and different types of functions. In this article, we take a brief look at the types of functions in JavaScript. And state the difference between functions.
Table of
contents
· Function declaration
· Function contructor
· Function expression
· Arrow function
· Different between function
declaration and function expression
Function
declaration
This is the
function that every newbie when learning JavaScript learns first. With simple
syntax.
function name([param[, param, [..., param]]]) {
[statements]
}
The first
function to declare the data type is function. name is the name of the function
(this is a must have). The name of an argument to be passed to the function
(may or may not). The statements which include the body of the function.
More about
function declarations. If default, the function will return undefined. If there
is a return value, it will return that value (any data type).
Function
contructor
If you study
programming, then surely once in your life you have heard about OOP (object
orented program). In JavaScript also implements this through function
constructor. The syntax is like function declaration. For being reusable. Let's
see an example of how function constructor work.
function User(name, age, job) {
this.name = name
this.age = age
this.job = job
}
const student = new User('aka', 18, 'student')
const teacher = new User('tak', 40, 'teacher')
console.log(student) // => Object { name: "aka", age: 18, job:
"student" }
console.log(teacher) // => Object { name: "tak", age: 40, job:
"teacher" }
With a
function creation like function declaration. Note that the name of the function is capitalized.
Function
expression
A function
expression is very similar to and has almost the same syntax as a function
declaration. The main difference between a function expression and a function
declaration is the function name.Let's see the ways to create function
expression.
// in normal
const getName = function () {
console.log('Function to get name')
}
getName() // => Function to get name
// in callback function
setTimeout(function () {
console.log('Function expression')
}, 1000)
// in function constructer
function User(name, age, job) {
this.name = name
this.age = age
this.job = job
this.toString = function () {
return `${this.name} - ${this.age} - ${this.job}`
}
}
const student = new User('aka', 18, 'student')
const teacher = new User('tak', 40, 'teacher')
console.log(student.toString()) // => aka - 18 - student
console.log(teacher.toString()) // => tak - 40 – teacher
// In IIFE
(function () {
console.log('Code runs!')
//
=> Code runs!
})();
We have four
ways to initialize a function expression. In these functions we can completely
remove the name if not needed. And will name it if you want to declare the
function name, what will you do?.
Arrow
function
If the
function expression has no name and only returns a value, it will turn into an
arrow function.
(a) => { return a + 10 }
For arrow
function you don't need to name it at all, just get the value and return the
result.
Different
function declaration vs function expression
The main
difference between a function expression and a function declaration is the
function name. This part has been example above.
Regarding
hoisting, the function declaration can be hoisting. The function expression
cannot be hoisted at all. We've got an article on hoisting you can check out
here. Let's also see an example:
logA() // => log a
logB() // => ReferenceError: can't access lexical declaration 'logB'
before initialization
function logA() {
console.log('log a')
}
const logB = function () {
console.log('log b')
}
Conclusion
We have gone
through the four types of function in JavaScript. Understand how to initialize
each function. And state the difference between function declaration and
function expression. In the next article, let's go deeper into the difference
between function declaration and function expression.
Thank you
for joining with me. Have a good day!
0 Nhận xét