This article is about functions in JavaScript. If you are new to JavaScript have a look at the DataTypes in JavaScript first.
Functions explained
A JavaScript function is defined with the function
keyword, then the function name follows and then the parentheses ()
, with or without parameters. The code to be executed is placed within the curly brackets {}
. The same rules as variables apply to function names.
function name(parameter1, parameter2) {
// do something here
}
A function is an object , and therefore a value. It can be used like any other value in JavaScript. For example:
A function can be returned from a function:
function factory() {
return function doSomething() {};
}
A function can be passed to another function as an argument:
setTimeout(function() {
console.log('hello 500ms have passed.');
}, 500);
A function can be assigned to an object:
const obj = {
id: 1234,
printId: function() {
console.log(this.id);
},
};
obj.printId(); // logs 1234 in the console
this
In the above example we are calling console.log(this.id);
inside the function. THIS
in the context refers to the object on which the function is called. That is the reason why the above example prints the id to the console when being called.
It's very important to understand that this
refers to the object on which the function was called , not the object which the function was assigned to, for example:
const obj1 = {
id: 1,
fn: function() {
console.log(this.id);
},
};
const obj2 = { id: 2, fn: obj1.fn };
obj1.fn();
obj2.fn();
Both obj1 and obj2 to reference the same function, but on each invocation the this
context changes to the object on which that function was called.obj1.fn()
will correctly log the id of obj1. obj2.fn()
should log the id of obj1, what happens because this
context change, the id of obj2 will be logged.
call()
With the call
method the this
context can be set directly on the function, for example:
function printId() {
console.log(this.id);
}
const obj1 = { id: 1 };
const obj2 = { id: 2 };
printId.call(obj1); // prints 1
printId.call(obj2); // prints 2
printId.call({ id: 123456 }); // prints 123456
In this case the printId function wasn't assigned to any of the objects, this was set dynamically via the call function.
Arrow Functions
An arrow function expression or Lambda function is a compact alternative with some limitations, the differences and limitations are:
- No bindings to
this
orsuper
. - No arguments, or new.target keywords.
- Not suitable for
call
,apply
andbind
methods - Can't' be used as constructors.
- Can't use
yield
, within its body.
Arrow functions don't have a this
context, when a this
is referenced inside the arrow function, it refers to the nearest parent non-lambda function. For example:
function printId() {
return offset => {
console.log(this.id + offset);
};
}
const obj = { id: 999 };
const offsetter = fn.call(obj);
offsetter(1); // prints 1000 (999 + 1)
Another difference to normal functions is that arrow functions, do not have a prototype
property.
function normalFunction() {}
const arrowFunction = () => {};
console.log(typeof normalFunction.prototype); // prints 'object'
console.log(typeof arrowFunction.prototype); // prints 'undefined'
TL;DR
- Functions are a fundamental building part in JavaScript.
- Functions are objects.
-
this
refers to the object on which the function was called - Use
call()
to set context for functions. - Arrow functions don't have a binding to
this
orsuper
.
Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.
If you want to know more about Javascript , have a look at these Javascript Tutorials.
Top comments (0)