Why Does foo.bar.baz Property Throw an Error?
If the bar property or bar.baz property is undefined or null or it doesn’t exist, then we will get an error indicating that either one is undefined or null .
Also, the object’s prototype also doesn’t have the property or is undefined or null .
We should check that these properties exist and isn’t null or undefined so that the code doesn’t throw an error.
What is the prototype of an object?
The prototype of an object is the template for an object. It’s used as a fallback of properties and methods if they don’t exist on the object itself.
Objects inherit properties and methods from their prototype in JavaScript.
For example, the following object:
const obj = {};
console.log(obj.__proto__)
has a prototype as defined by the __proto__ property. In the console.log output, we should see various properties and methods logged, like toString , toLocaleString , etc.
The JavaScript interpreter will search for properties and methods with the identifier we indicated into the code by searching the object, and up the prototype chain, until it exhausted all the prototypes in the prototype chain.
All objects ultimately inherit from Object.prototype .
What is an IIFE and what do we use it for?
IIFE stands for Immediately Invoked Function Expression. It’s a function that we defined on the fly and then run it immediately.
We do this by wrapping the function expression inside parentheses and then add the parentheses in the end to call that function.
An IIFE looks like:
(function () {
}());
or:
(() =>{
})();
The function can also be named if we write the following traditional function:
(function foo() {
})();
We can also return something from the function and assign it immediately:
const foo = (()=> {
return 'foo';
})();
Then the value of foo is 'foo' .
We can also pass in arguments like any other function:
const foo = ((a, b)=> {
return a + b;
})(1,2);
Then foo is 3.
IIFEs are useful for hiding items from the outside before we have modules. Also, it also lets us avoid polluting the global namespace before we have modules.
What is the Function.prototype.apply method?
The apply method lets us call a function with a different value of this and pass in values into the function arguments as an array.
For example, we can write:
function greet(greeting){
return `${greeting} ${this.name}`;
}
const person = {
name: 'Jane'
}
console.log(greet.apply(person, ['Hello']));
In the code above, we created a greet function, which takes a greeting argument.
Then we defined a person object with a name property.
We then call greet with the apply method by passing in person as the first argument, which is the value of this that we want in the function. The second argument is an array which we pass into greet as arguments.
In the case, we passed in 'Hello' of as the value of the greeting parameter.
The result of the console.log is Hello Jane .
apply doesn’t work with arrow functions since it doesn’t have its own this value.
What is the Function.prototype.call method?
The call method of a function is very similar to apply , except that we pass in a comma-separated list of arguments to call the function with arguments instead of passing in an array to pass in arguments to the function that call is called on.
For example, we can write the following code:
function greet(greeting){
return `${greeting} ${this.name}`;
}
const person = {
name: 'Jane'
}
console.log(greet.call(person, 'Hello'));
As we can see, the only difference between call and apply is whatever is after the first argument.
call doesn’t work with arrow functions since it doesn’t have its own this value.
What is Function.prototype.bind method?
The bind method lets us change the this value inside a function like call and apply .
Like call and apply , we pass in the object that we want to be the value of this inside the function as follows:
function greet(){
return `${this.name}`;
}
const person = {
name: 'Jane'
}
const greetPerson = greet.bind(person);
console.log(greetPerson());
bind doesn’t work with arrow functions since it doesn’t have its own this value.
In the code above, we passed person into bind , so this.name would be 'Jane' . We can assign the function returned by bind to a new variable or constant. Then we can call it as we did as we have above.
Therefore, console.log would give us ‘Jane’.
Conclusion
JavaScript programs will throw errors if we try to access a property when a parent’s property doesn’t exist.
IIFEs are functions that are created on the fly and then called right after it’s defined.
The call and apply methods let us call functions with a different this value and arguments that we pass in. bind lets us change the this value inside the function. Then we can call the returned function that has a different this value and then call it.
