Differences in Javascript functions
There are several ways to define functions in Javascript, and there are differences in the way they work, so I have summarized them here to help you organize them in your own mind.
There are two types of function definitions: function declarations and function expressions, which differ in when they are executed.
A function declaration is defined by a function statement
A function declaration is defined “function name(){ }“. In this case, function is called a function statement.
A function object is created when the scope of the function declaration is invoked, so it will be invoked even if it is written before the function declaration.
// call function
hello('John')
function hello1(name) {
return `hello, ${name}`
}
Function expression is defined by the function operator
Function expression is defined “const function name = function(){ }“.
Function expressions can be either anonymous functions or named functions.
The function object is created when the function expression is executed.
It cannot be called before that time.
It made sense to me personally to think of a variable as containing a function object.
// anonymous function
const hello2 = function(name) {
return `hello, ${name}`
}
// named function
const hello3 = function funcHello(name) {
return `hello, ${name}`
}
// call function
hello2('John')
hello3('John')
For an arrow function without the function operator, it would be written as follows.
It seems that arrow functions tend to be preferred and used more often than anonymous or named functions.
const hello4 = (name) => {
return `hello, ${name}`
}
Constructor Function
The constructor function creates and returns an object, which is called an instance.
To create an instance, use the new operator.
Variables and functions can be defined as properties of the instance.
const Person = function(lastName, firstName) {
this.firstName = firstName
this.lastName = lastName
this.hello = function() {
return `hello, ${lastName} ${firstName}`
}
}
const person1 = new Person('John', 'Williams')
person1.hello()
About this
This refers to the object to which the function belongs when it is executed.
If it is created by a constructor function using the new operator, it refers to the instance itself.
function thisFunc1() {
console.log(this)
}
// this refer a global object
thisFunc1()
function thisFunc2() {
console.log(this)
}
// this refer thisFunc2 object
const func2 = new thisFunc2()
In the case of writing func3 in the following example, this refers to the instance itself, as in the case of creation by the new operator.
const func3 = {
testFunc: function() {
console.log(this)
}
}
func3.testFunc()
In reviewing the behavior of thisis, we must be careful to note that the behavior in functions and methods is different.
The property testFunc in an object is considered a method, while testFunc2() is considered a function.
Since this in testFunc refers to the instance itself and this in testFunc2 refers to the global object, it is preferable to assign this to another variable for use in such cases.
IIFE – Immediately Invoked Function Expression
A function that executes as soon as it is defined is called an immediate function.
Prior to ES2015, const and let could not be used to declare variables, but var was used.
This was supposedly used to separate it from the global scope.
Since ES2015, const and let can be used, but I have been looking at various libraries.
I have seen many libraries that still use const and let for purposes such as not polluting the scope and functions that are not reused.
var counter = (function(arg) {
var num = arg
return {
getNum: function() {
return num
},
setNum: function(newNum) {
num = newNum
},
increase: function() {
num += 1
},
decrease: function() {
num -= 1
}
}
}(10))
console.log(counter.getNum()) // output 10
counter.increase()
counter.increase()
counter.decrease()
console.log(counter.getNum()) // output 11
counter.setNum(100)
console.log(counter.getNum()) // output 100
getter / setter
A getter is called a getter and a setter is called a setter.
A function used to create an object, call the value of a property, or set a value to a property.
Similar to the immediate function, the counter process can be written as follows.
const counter = {
_num: arg,
get num() {
return this._num
},
set num(val) {
return this._num = val
},
increase: function() {
this._num += 1
},
decrease: function() {
this._num -= 1
}
}
console.log(counter.num) // output 10
counter.increase()
counter.increase()
counter.decrease()
console.log(counter.num) // output 11
counter.num = 100
console.log(counter.num) // output 100
Comments on this post