Explaining ‘this’ keyword in JavaScript

MD IMRUL MOLLA — Mon, 08 Jul 2024 05:26:32 +0000

1. Global Context

When used in the global context (outside of any function), this refers to the global object, which is window in browsers and global in Node.js.
console.log(this); // In a browser, this logs the Window object

2. Function Context

In a regular function, the value of this depends on how the function is called.

a. Function Invocation
When a function is called as a standalone function, this refers to the global object (in non-strict mode) or undefined (in strict mode).

function foo() {
  console.log(this);
}

foo(); // In non-strict mode, logs the global object (Window in browsers)
       // In strict mode, logs undefined

b. Method Invocation
When a function is called as a method of an object, this refers to the object the method is called on.

const obj = {
  method: function() {
    console.log(this);
  }
};

obj.method(); // Logs the obj object

c. Constructor Invocation
When a function is used as a constructor (with the new keyword), this refers to the newly created object.

function Person(name) {
  this.name = name;
}

const person = new Person('Alice');
console.log(person.name); // Logs 'Alice'

3. Arrow Functions

Arrow functions (=>) do not have their own this binding. Instead, this is lexically inherited from the outer function where the arrow function is defined.

const obj = {
  regularFunction: function() {
    console.log(this); // Logs obj

    const arrowFunction = () => {
      console.log(this); // Logs obj because it inherits `this` from regularFunction
    };

    arrowFunction();
  }
};

obj.regularFunction();

4. Event Handlers

In DOM event handlers, this refers to the element that received the event.

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // Logs the button element
});

5. Explicit Binding

JavaScript provides methods to explicitly set the value of this using call, apply, and bind.

a. call and apply
call and apply methods call a function with a specified this value and arguments. The difference between them is how they handle arguments.

function greet(greeting) {
  console.log(greeting + ', ' + this.name);
}

const person = { name: 'Alice' };

greet.call(person, 'Hello'); // Logs 'Hello, Alice'
greet.apply(person, ['Hi']); // Logs 'Hi, Alice'

b. bind
bind creates a new function that, when called, has its this keyword set to the provided value.

function greet() {
  console.log(this.name);
}

const person = { name: 'Alice' };
const boundGreet = greet.bind(person);

boundGreet(); // Logs 'Alice'

Summary

Global context: this refers to the global object.
Function context:
Regular function: this is the global object or undefined in strict mode.
Method: this is the object the method belongs to.
Constructor: this is the new object being created.

Arrow functions: this is lexically inherited from the outer function.
Event handlers: this is the event target element.
Explicit binding: Use call, apply, and bind to explicitly set this.

Guideline for Front End Web Developer

MD IMRUL MOLLA — Mon, 15 Jan 2024 10:21:34 +0000

Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website.
. Here's a simplified guideline for Front End Web Developer:

Learn HTML and CSS:
- Understand the structure (HTML) and styling (CSS) of web pages.
Master JavaScript:
- Learn the fundamentals, including variables, functions, and loops.
- Understand DOM manipulation for dynamic content.
Version Control/Git:
- Learn Git for version control to manage code changes.
Responsive Design:
- Understand how to make websites responsive using CSS media queries.
CSS Pre-processing:
- Learn a CSS pre-processor like Sass or Less for more efficient styling.
Build Tools:
- Familiarize yourself with build tools like Webpack for bundling and minification.
Frameworks/Libraries:
- Learn popular front-end libraries/frameworks like React, Angular, or Vue.js.
Package Managers:
- Understand package managers like npm or Yarn.
Browser Developer Tools:
- Master browser developer tools for debugging and optimizing code.
Basic Graphic Design:
- Gain basic design skills for creating visually appealing interfaces.
Cross-Browser Development:
- Ensure compatibility with various browsers.
APIs and RESTful Services:
- Learn how to fetch and handle data from APIs.
Web Performance Optimization:
- Optimize websites for speed and performance.
Testing/Debugging:
- Understand testing principles and tools (e.g., Jest).
Basic SEO:
- Learn SEO principles for better search engine visibility.
Web Accessibility:
- Ensure your websites are accessible to users with disabilities.
Progressive Web Apps (PWAs):
- Explore creating PWAs for enhanced user experiences.
Continuous Learning: Stay updated on new technology

Forem: MD IMRUL MOLLA