
As you may know, `this` keyword is very tricky in Javascript. In this article, we will together demistify `this` keyword in JavaScript in detail and in a way that's easy to understand!

![Server-side rendering vs Static-site rendering](this.png)

## What is `this`?

In JavaScript, `this` is a keyword that refers to the current context or object. It can be used in different ways depending on its location within the code. Basically, `this` is a reference to the object that the current code is a part of.

## How does `this` work?

The value of `this` is determined at runtime, based on how the code is executed. The value of `this` can change depending on the context in which it is used.

To better understand this concept, let's look at some examples:

### Example 1: Using `this` inside an object method

```js
const person = {
  name: "John",
  sayHello: function () {
    console.log(`Hello, my name is ${this.name}!`);
  },
};

person.sayHello();
```

In this example, we have an object called `person` with a property called `name` and a method called `sayHello`. The `sayHello` method uses the `this` keyword to refer to the `person` object, so it can access the `name` property.

When we call `person.sayHello()`, the value of `this` inside the `sayHello` function will be the `person` object. Therefore, it will output "Hello, my name is John!".

### Example 2: Using `this` with a function that is not an object method

```js
const sayHello = function () {
  console.log(`Hello, my name is ${this.name}!`);
};

const person1 = {
  name: "John",
  sayHello: sayHello,
};

const person2 = {
  name: "Jane",
  sayHello: sayHello,
};

person1.sayHello();
person2.sayHello();
```

In this example, we have a function called `sayHello` that uses the `this` keyword to refer to the object that it is called on. We then create two objects called `person1` and `person2`, each with a `name` property and a `sayHello` method that uses the `sayHello` function.

When we call `person1.sayHello()`, the value of `this` inside the `sayHello` function will be the `person1` object. Therefore, it will output "Hello, my name is John!". When we call `person2.sayHello()`, the value of `this` inside the `sayHello` function will be the `person2` object. Therefore, it will output "Hello, my name is Jane!".

### Example 3: Using `this` with a callback function

```js
const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(`The button was clicked by ${this.textContent}`);
});
```

In this example, we have a button element in the HTML document, and we use JavaScript to add an event listener to it. The event listener function uses the `this` keyword to refer to the button element that triggered the event.

When we click the button, the value of `this` inside the event listener function will be the button element. Therefore, it will output "The button was clicked by [the text content of the button]" (e.g. "The button was clicked by Click me!").

## Why is `this` important?

Understanding the `this` keyword is important in JavaScript because it allows us to write more dynamic and reusable code. By using `this`, we can refer to the current context or object and make our code more flexible.

However, it's important

### Using `this` in Constructor Functions

Another common usage of `this` is in constructor functions. Constructor functions are used to create objects with similar properties and methods. When we use the `new` keyword with a constructor function, it creates a new instance of the object.

```js
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("Alice", 25);
console.log(person1.name); // Alice

const person2 = new Person("Bob", 30);
console.log(person2.age); // 30
```

In the `Person` constructor function, `this` refers to the instance of the object that is being created. We use `this` to set the `name` and `age` properties of the object.

### The Value of `this` in Event Listeners

In event listeners, the value of `this` is often important. In this context, `this` refers to the element that triggered the event. Let's consider an example:

```html
<button id="my-button">Click me!</button>
```

```js
const button = document.getElementById("my-button");

button.addEventListener("click", function () {
  console.log(this); // logs the button element
});
```

In this example, we use `document.getElementById` to get a reference to the button element. We then attach an event listener to the button using `addEventListener`. When the button is clicked, the event listener is triggered, and `this` inside the event listener function refers to the button element.

### Avoiding `this` Pitfalls

While `this` can be a powerful tool in JavaScript, it can also cause confusion and bugs if not used correctly. Here are a few pitfalls to be aware of:

- **`this` in Arrow Functions**: Arrow functions don't have their own `this` binding, so they always use the `this` value of their enclosing context. This can be useful, but can also lead to unexpected behavior if the enclosing context isn't what you expect.
- **`this` in Callback Functions**: Callback functions are often used in asynchronous code, where `this` can be lost. In these cases, it's common to use the `bind` method to ensure that `this` refers to the correct value.
- **`this` in Object Methods**: When defining methods on objects, it's important to be aware of how `this` will be used. If the method is called on the object itself, `this` will refer to the object. However, if the method is called on a different object or in a different context, `this` will no longer refer to the original object.

In general, it's important to pay attention to where `this` is being used and to think carefully about its value in different contexts. With practice, using `this` effectively can become second nature, and it can be a powerful tool for writing clean and modular JavaScript code.

### Using `call`, `apply`, and `bind` to Control `this`

Sometimes, we may want to explicitly set the value of `this` for a function, rather than relying on the default behavior. We can use the `call`, `apply`, and `bind` methods to achieve this.

#### `call`

The `call` method allows us to call a function with a specified `this` value and arguments provided individually.

```js
const person = {
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};

const person1 = {
  firstName: "John",
  lastName: "Doe",
};

const person2 = {
  firstName: "Mary",
  lastName: "Doe",
};

console.log(person.fullName.call(person1)); // John Doe
console.log(person.fullName.call(person2)); // Mary Doe
```

In this example, we define an object `person` with a `fullName` method that returns the first name and last name properties of the object. We then define two more objects, `person1` and `person2`, and use the `call` method to call the `fullName` method with each object as the `this` value.

#### `apply`

The `apply` method is similar to the `call` method, but takes an array of arguments instead of individual arguments.

```js
const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);
console.log(max); // 7
```

In this example, we use the `apply` method to find the maximum value in an array of numbers. We pass `null` as the `this` value (since the `Math.max` method doesn't require a `this` value), and pass the `numbers` array as the arguments.

#### `bind`

The `bind` method returns a new function with the `this` value set to a specified object.

```js
const person = {
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};

const person1 = {
  firstName: "John",
  lastName: "Doe",
};

const person2 = {
  firstName: "Mary",
  lastName: "Doe",
};

const fullName1 = person.fullName.bind(person1);
console.log(fullName1()); // John Doe

const fullName2 = person.fullName.bind(person2);
console.log(fullName2()); // Mary Doe
```

In this example, we define an object `person` with a `fullName` method. We then define two more objects, `person1` and `person2`, and use the `bind` method to create two new functions with the `this` value set to `person1` and `person2`, respectively.

### Note

The `this` keyword in JavaScript is used to refer to the current object in a particular context. The value of `this` can change depending on the location within the code where it is used. By understanding the different ways `this` can be used and how it changes, you can write more effective and modular code. Additionally, by using methods like `call`, `apply`, and `bind`, you can gain more control over the value of `this` in your functions.


Understanding The Value Of `this` Keyword In Javascript


If you're new to Next.js, you might have heard about server-side rendering (SSR) and static-site rendering (SSG) and how they can improve website performance and SEO. In this guide, we'll explore what SSR and SSG are and their main differences using simple language and code examples.

![Server-side rendering vs Static-site rendering](ssg.png)

## What is Server-Side Rendering (SSR)?

**Server-side rendering (SSR)** is a technique used to render web pages on the server and send them as HTML files to the client. With SSR, the server generates the HTML for each page requested by the client, so the client doesn't have to do any rendering work. This technique can improve website performance by reducing the amount of work required by the client to render a page.

## What is Static-Site Rendering (SSG)?

**Static-site rendering (SSG)** is a technique used to pre-render web pages at build time and serve them as static HTML files to the client. With SSG, the server generates the HTML for each page during the build process and saves it as a static file. When a client requests a page, the pre-rendered HTML is served to the client. This technique can improve website performance and reduce server load by serving pre-rendered pages as static HTML files to the client.

## The Main Differences between SSR and SSG

The main differences between SSR and SSG are:

### 1. When the HTML is generated

With SSR, the HTML is generated on the server dynamically each time a client requests a page. With SSG, the HTML is generated during the build process and saved as static files.

### 2. When the data is fetched

With SSR, the data is fetched each time a client requests a page, which can slow down the page load time. With SSG, the data is fetched during the build process and saved as static files, which can speed up the page load time.

### 3. Caching

With SSR, the HTML can be cached by the server or the client, but it can still be slower than serving static HTML files. With SSG, the HTML can be easily cached by the browser and loaded quickly by the client.

## How to Implement SSR and SSG in Next.js

In Next.js, you can implement SSR and SSG using the `getServerSideProps` and `getStaticProps` functions, respectively. Here are some code examples:

### Implementing SSR in Next.js

```js
// pages/my-page.js

import React from "react";

export default function MyPage(props) {
  return (
    <div>
      <h1>My Page</h1>
      <p>This is my page with server-side rendering!</p>
    </div>
  );
}

export async function getServerSideProps() {
  const data = await fetch("https://myapi.com/data");
  const jsonData = await data.json();

  return {
    props: {
      data: jsonData,
    },
  };
}
```

In this example, we have a page called `my-page.js` that is using SSR. The `getServerSideProps` function is used to fetch data from an API and pass it as props to the `MyPage` component.

### Implementing SSG in Next.js

```js
// pages/my-page.js

import React from "react";

export default function MyPage(props) {
  return (
    <div>
      <h1>My Page</h1>
      <p>This is my page with static-site rendering!</p>
    </div>
  );
}

export async function getStaticProps() {
  const data = await fetch
```

```javascript
  const jsonData = await data.json();

  return {
    props: {
      data: jsonData,
    },
  };
}
```

In this example, we have a page called `my-page.js` that is using SSG. The `getStaticProps` function is used to fetch data from an API and pass it as props to the `MyPage` component. The data is pre-rendered during the build process and saved as a static HTML file.

## In Summary

Server-side rendering (SSR) and static-site rendering (SSG) are powerful techniques that can improve website performance and SEO. With Next.js, you can easily implement both techniques using the `getServerSideProps` and `getStaticProps` functions.

Remember, SSR is best for pages that require dynamic data or frequent updates, while SSG is best for pages with static data or infrequent updates. By choosing the right rendering technique for each page, you can provide a better user experience and improve website performance.
I hope that this guide has helped you understand how to use server-side rendering (SSR) and static-site rendering (SSG) in Next.js, as well as the main differences between the two techniques.

By using SSR, you can pre-render pages on the server and deliver fully rendered pages to the client, which can improve website performance and SEO. On the other hand, SSG allows you to pre-render pages during the build process, which can result in faster page loads and better user experience.

When choosing between SSR and SSG, consider the needs of each page. Pages that require dynamic data or frequent updates are best suited for SSR, while pages with static data or infrequent updates are best suited for SSG.

Remember to use the getServerSideProps and getStaticProps functions to fetch data and pass it as props to your components. And don't forget to test your website performance using tools like Lighthouse or Google PageSpeed Insights.

I hope this guide has been helpful and that you are now ready to implement SSR and SSG in your Next.js projects!


A Simple Guide to Understanding Server-Side Rendering (SSR) and Static-Site Rendering (SSG) in Next.js


[Next.js](https://nextjs.org) is a popular React framework that enables developers to build server-side rendered React applications with ease. It offers a great development experience, a powerful plugin system, and many other features that make it an excellent choice for building modern web applications. In this blog post, we'll cover the steps you need to follow to start a new Next.js 13 project.

![Next.js Logo](nextjs.png)

## Prerequisites

Before you begin, you'll need to have Node.js and npm installed on your machine. You can download Node.js from the official website and install it using the installer. You can verify that Node.js is installed by running the following command in your terminal:

```nodejs
node - v;
```

You should see the version number of Node.js printed in the terminal.

## Creating a New Next.js Project

To create a new Next.js project, you can use the `create-next-app` CLI tool provided by Next.js. This tool creates a new Next.js project with all the necessary files and configurations.

To create a new project, open your terminal and run the following command:

```nodejs
npx create-next-app my-next-app
```

Replace `my-next-app` with the name of your project. This command will create a new Next.js project in a directory named `my-next-app`.

## Running the Project

Once the project is created, you can navigate to the project directory using the `cd` command:

```nodejs
cd my-next-app
```

To start the development server, run the following command:

```nodejs
npm run dev
```

This will start the development server and open your application in the browser. You can start making changes to your application and see the changes live in the browser.

## Remember

Starting a new Next.js project is easy and straightforward. With the `create-next-app` CLI tool, you can create a new project in seconds and start building your application right away. Next.js offers a great development experience and many features that make building modern web applications a breeze.


Quick Guide On How To Create A NextJS Project


React.js is a popular front-end JavaScript library used for building user interfaces. It's easy to learn, and it offers a lot of benefits to developers. However, like any other technology, it has its share of pitfalls that beginners can fall into. In this guide, we'll discuss some common beginner mistakes in React.js and how to avoid them with code examples.

## Not Understanding the Component Hierarchy

![Next.js Logo](mistakes.png)

One of the most common mistakes beginners make in React.js is not understanding the component hierarchy. React.js is a component-based library, which means that your application is made up of individual components that can be reused throughout your application. Each component can have its own state, and it can render other components.

Here's an example of a component hierarchy:

```js
function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

function Header() {
  return <h1>Header</h1>;
}

function MainContent() {
  return (
    <div>
      <h2>Main Content</h2>
      <p>Some content goes here...</p>
    </div>
  );
}

function Footer() {
  return <footer>Footer</footer>;
}
```

To avoid this mistake, make sure you understand the component hierarchy of your application. Break down your application into smaller components, and make sure each component has a single responsibility.

## Modifying State Directly

Another common mistake beginners make in React.js is modifying state directly. State is an object that holds the data of your component, and it should be treated as immutable. Directly modifying state can cause unexpected behavior in your application.

Here's an example of modifying state directly:

```js
function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    count++;
    setCount(count);
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
```

To avoid this mistake, use the `setState` method to update your state. This method ensures that your state is updated correctly and that your application is re-rendered when necessary.

Here's an example of using `setState`:

```js
function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
```

## Not Using Props Correctly

Props are a way of passing data from a parent component to a child component. They are an essential part of React.js and are used to create reusable components. Beginners often make the mistake of not using props correctly.

Here's an example of passing props:

```js
function App() {
  return (
    <div>
      <Header title="My App" />
      <MainContent />
      <Footer />
    </div>
  );
}

function Header(props) {
  return <h1>{props.title}</h1>;
}
```

To avoid this mistake, make sure you understand how props work in React.js. Use props to pass data from parent components to child components, and make sure you're not modifying props directly.

## Not Using Keys Correctly

Keys are a unique identifier for a component in a list. They help React.js identify which items have changed, added, or removed in a list. Beginners often make the mistake of not using keys correctly or not using them at all.

Here's an example of using keys:

```js
function App() {
  const items = ["Item 1", "Item 2", "Item 3"];

  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}
```

To avoid this mistake, make sure you always use keys when rendering lists in React.js. Keys should be unique and consistent, and they should not change over time.

## Not Cleaning Up Effect Hooks

Effect hooks are used to manage side effects in your component. Beginners often make the mistake of not cleaning up their effect hooks, which can lead to memory leaks in your application.

Here's an example of not cleaning up effect hooks:

```js
function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>{count}</p>
    </div>
  );
}
```

To avoid this mistake, make sure you clean up your effect hooks when your component is unmounted. Use the `return` statement in your effect hook to return a cleanup function.

## Don't forget

React.js is an excellent library for building user interfaces, but it has its share of pitfalls that beginners can fall into. By understanding the component hierarchy, using `setState` correctly, using props and keys appropriately, and cleaning up effect hooks, you can avoid these common mistakes and build better React.js applications.


Man Khi Kim

Blog

Categories

Understanding The Value Of `this` Keyword In Javascript

A Simple Guide to Understanding Server-Side Rendering (SSR) and Static-Site Rendering (SSG) in Next.js

Quick Guide On How To Create A NextJS Project