This post covers what JavaScript is and why it’s used, as well as some of its key features.
Checkout this video:
Introduction
In JavaScript, the thing called this is the object that “owns” the code. The value of this , when used in a function, is the object that “owns” the function. The value of this, when used in an object, is the object itself. The this keyword in an object constructor does not have a value because it has not been assigned a value. You can do that by using the point operator ( . ) to access a property of this . In general, this refers to whatever context the code is running in. But, in strict mode (and non-strict mode), it has different values depending on how you call it.
When used alone (as statement), return this; will return the global object:
“`javascript
function f() {
return this;
}
f() === window; // global object
“`
What is this in JavaScript?
In JavaScript, the thing called this is the object that “owns” the code. The value of this, when used in an object, is the object itself. In a function, this refers to the global object. In other words, this is the default binding for functions.
The value of this depends on how a function is called. It can be determined by four rules:
1. Default: If the function is not called as a method of an object, then this refers to the global object.
2. Implicit: If the function is called as a method of an object, then this refers to the object itself.
3. New: When a function is used with the new keyword, then this refers to the newly created object.
4. Explicity: You can explicitly set what this should be using one of the following methods: call(), apply() or bind().
How to use this in JavaScript?
In JavaScript, the thing called “this”, is determined by how a function is called. It can’t be set by assignment during execution, and it may be different each time the function is called. this also has a different value in arrow functions compared to non-arrow functions.
Arrow functions
An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So, in the following code, the this within the function that is passed to setInterval has the value of the global object, which is usuallywindow:
function foo() {
setInterval(() => {
// “this” here is safe because it refers to the global “this” object which can’t be modified by call/apply/bind
console.log(‘id:’, this.id);
}, 100);
}
Examples
Assuming the following code:
“`
var object1 = {
property1: 42,
property2: “hello world”,
}
var object2 = {
property1: 37,
}
var object3 = {};
console.log(object1.property1); //42
console.log(object2[“property1”]); //37
console.log(object3.property1); //undefined – no such property exists yet
object3.property1 = “goodbye”; //set property to value “goodbye”
console.log(object3.property1); //”goodbye”
“`
Conclusion
“This” is a keyword in JavaScript that refers to the object that is currently being processed by the code. It can be used to reference the object where the function was called, or the global object.
