Related Topics
JAVASCRIPT
In this example, outerFunction creates the inner function innerFunction. When outerFunction is executed, it defines outerVariable, and then it returns innerFunction. The closureFunction variable now holds a reference to innerFunction.
When we call closureFunction(), it logs “I am from the outer function!” even though outerFunction has already finished executing. This is because innerFunction maintains a reference to the scope of outerFunction where outerVariable exists, and this is what we call a closure.
Closures are particularly useful in scenarios like creating private variables and data encapsulation in JavaScript. They allow functions to “remember” their environment and maintain state even after the outer function has completed its execution.
One common use case of closures is with event handlers and callbacks, where you might want to access variables from the surrounding context when the event or callback is triggered.
let:
Introduced in ES6,
letallows you to declare block-scoped variables. Block scope means that the variable is only accessible within the block (enclosed by curly braces) in which it is defined.Like
var,letdeclarations are hoisted to the top of their scope, but unlikevar, they are not initialized. If you try to use aletvariable before its declaration, you’ll get a “ReferenceError.”letallows reassignment but does not allow redeclaration of the same variable within the same block.
Example:
const:
Also introduced in ES6,
constallows you to declare block-scoped variables that cannot be reassigned once their value is assigned.constdeclarations are also hoisted likelet, but they must be initialized with a value during declaration. You cannot declare aconstvariable without initializing it.constvariables cannot be reassigned, but their properties (for objects and arrays) can be modified.
Example:
In general, it’s a good practice to use const whenever you know the value of a variable won’t change throughout its lifetime. If you need to reassign a variable, use let. Avoid using var in modern JavaScript, as it has some scope-related issues and is considered less preferable compared to let and const.
Function context: When
thisis used inside a regular function (not an arrow function), its value is determined by how the function is called. It can vary depending on the calling context.
Implicit Binding: When a function is called as a method of an object,
thispoints to the object itself.
Explicit Binding: You can explicitly set the value of this using call(), apply(), or bind() methods on functions.
this in Arrow Functions: Arrow functions do not have their own this binding. Instead, they inherit this from the surrounding (lexical) scope.
3. Constructor context: When a function is used as a constructor with the new keyword, this inside the constructor function refers to the newly created instance of the object.
4. Event Handlers: In event handlers, this often refers to the DOM element that triggered the event.
It’s important to be aware of the context in which this is used to avoid unexpected behavior. The determination of this can be challenging, especially when using nested functions or working with different JavaScript frameworks, so pay close attention to the way functions are called in your code.
In the example above, we defined a constructor function Person. We then added a method sayHello to the Person.prototype. When we create an instance of Person with new Person('John'), the john object does not have a direct sayHello method, but it can access it through the prototype chain because john inherits from Person.prototype.
The prototype chain can be visualized like this:
Here, john is an instance of Person, which has Person.prototype as its prototype, which, in turn, inherits from Object.prototype, and finally, Object.prototype inherits from null. null is at the end of the chain, indicating the end of the prototype chain.
When a property or method is accessed on an object, JavaScript first looks for it in the object itself, then in its prototype (Person.prototype), and then in the prototype’s prototype (Object.prototype), and so on, until it either finds the property or reaches the end of the prototype chain (null).
If a property is not found in the entire prototype chain, the result will be undefined.
It’s important to note that you can use the Object.create() method to create an object with a specific prototype or set the prototype of an existing object using Object.setPrototypeOf(). However, modifying the prototype of built-in objects (like Object, Array, etc.) is generally discouraged and can lead to unexpected behavior.
In this example, doMath is a higher-order function that takes an operation function and two numbers (a and b). Depending on which operation function is passed, it performs either addition or subtraction on the given numbers.
Functions as Return Values: A higher-order function can also return a function as its result, allowing you to create specialized functions on the fly.
In this example, createMultiplier is a higher-order function that takes a multiplier and returns a new function that multiplies a given number by the provided multiplier. We use it to create double and triple functions that can quickly double or triple a given number.
Higher-order functions are versatile and allow you to write more expressive and reusable code. They are commonly used in functional programming, where functions are treated as first-class citizens and can be passed around, returned, and assigned to variables like any other data type.
JavaScript’s built-in higher-order functions like map, filter, and reduce on arrays are great examples of higher-order functions that provide a functional approach to dealing with collections of data. They take functions as arguments and use them to transform, filter, or aggregate arrays.
2. Inheritance using Class Syntax:
In both approaches, the parent object (Animal) is defined with a constructor function or a class, and its methods are added to the prototype (for constructor functions) or directly within the class definition (for class syntax). The child object (Dog) is created using either the constructor function with Object.create() or using the extends keyword with class syntax.
Inheritance allows the child objects to have access to the properties and methods of the parent object. Child objects can also override parent methods to provide their own implementation.
Note that JavaScript does not have classical inheritance like some other programming languages (e.g., Java, C++). Instead, it uses prototype-based inheritance, which provides a more flexible and dynamic way of handling object relationships.
Popular Category
Topics for You
Go through our study material. Your Job is awaiting.