DEV Community: Ahmedammarr

All about "this" and "this" manipulation in Javascript

Ahmedammarr — Sun, 03 Dec 2023 15:52:23 +0000

Earlier I found it a bit tricky to understand the concept of this keyword, till I found the right way to understand it and the magic word here is the context.

So what is exactly `this`?

In JavaScript, the this keyword is a special keyword that refers to the current instance of an object or the context in which a function is executed. The value of this is determined by how a function is called or how an object is accessed.

and this is affected by the context as follows:

1- Global Context:

When this is used outside of any function or object, it refers to the global object. In a web browser, the global object is window.

console.log(this); // Points to the global object (e.g., window in a browser)

2- Function/Method Context:

Inside a function, the value of this depends on how the function is called. when a function is a method of an object, it refers to the object that the method is called on.

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

exampleFunction(); // Points to the global object (e.g., window in a browser)

const myObject = {
  myMethod: function() {
    console.log(this);
  }
};

myObject.myMethod(); // Points to myObject

3- Constructor Context:

When a function is used as a constructor with the new keyword, this refers to the newly created instance of the object.

function MyClass() {
  this.property = 'value';
}

const myInstance = new MyClass();
console.log(myInstance.property); // 'value'

class MyClass {
  constructor(name) {
    // 'this' refers to the instance being created
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// Creating an instance of MyClass
const myInstance = new MyClass("John");

// Calling a method using 'this'
myInstance.sayHello(); // Output: Hello, my name is John

4- Event Handler Context:

In event handlers, this often refers to the element that triggered the event.

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

`this` with arrow functions:

It's important to note that arrow functions behave differently regarding this. They do not have their own this context and inherit it from the enclosing scope.

In other words this in the arrow function refers to the object where that function was first defined.

// Regular function
function regularFunction() {
  console.log(this);
}

// Arrow function
const arrowFunction = () => {
  console.log(this);
};

const obj = {
  method1: regularFunction,
  method2: arrowFunction
};

obj.method1(); // `this` refers to obj (method1 is called as a method of obj)
obj.method2(); // `this` refers to the enclosing scope (arrowFunction was created in the global scope)

In the example above:

When method1 (which is a regular function) is called, this refers to the obj object because it is called as a method of obj.
When method2 (which is an arrow function) is called, this does not have its own context and refers to the this value of the enclosing scope at the time the arrow function was created. In this case, since arrowFunction is defined in the global scope, this refers to the global object (e.g., window in a browser environment).

`this` manipulation:

in order to manipulate and change the context of this we can use bind, call, and apply methods.

Here's an explanation of each, along with examples:

1- bind:

The bind method creates a new function that, when called, has its this keyword set to a specific object.

const john = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};
const alex = {
  name: 'Alex',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};
const greetJohn = john.sayHello.bind(john);
const greetAlex = john.sayHello.bind(alex);
greetJohn(); // Outputs: Hello, John!
greetAlex(); // Outputs: Hello, Alex!

2- call:

The call method invokes a function with a specified this value and individual arguments.

function introduce(age, job) {
  console.log(`Hi, I'm ${this.name}. I'm ${age} years old and work as a ${job}.`);
}

const person = {
  name: 'Alice'
};

introduce.call(person, 25, 'developer');
// Outputs: Hi, I'm Alice. I'm 25 years old and work as a developer.

Here, call is used to invoke the introduce function with the person object as the this value and additional arguments.

2- apply:

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

function introduce(age, job) {
  console.log(`Hi, I'm ${this.name}. I'm ${age} years old and work as a ${job}.`);
}

const person = {
  name: 'Bob'
};

introduce.apply(person, [30, 'engineer']);
// Outputs: Hi, I'm Bob. I'm 30 years old and work as an engineer.

Here, apply is used to invoke the introduce function with the person object as the this value and an array of arguments.

In summary:

Use bind when you want to create a new function with a fixed this value.
Use call when you want to invoke a function with a specific this value and individual arguments.
Use apply when you want to invoke a function with a specific this value and an array of arguments.

That's all, happy coding :)

Switch from a Framework/Library User to a Pro Frontend Engineer

Ahmedammarr — Sat, 04 Nov 2023 15:38:20 +0000

In the realm of front-end development, the distinction between being a framework/library user and a true software engineer is unmistakable. While the allure of frameworks and libraries is undeniable, a front-end engineer's journey extends beyond the mere consumption of these tools. As a front-end engineer, my constant pursuit is to elevate my skills beyond reliance on libraries and frameworks. I strive to reach a level where I can not only use these tools proficiently but also critically evaluate them, propose innovative solutions, and address any underlying issues. This journey underscores the importance of embracing raw programming languages and deepening one's grasp of fundamental concepts.

We can outline the steps for leveling up as follows:

1- Understanding the Fundamentals

Frontend software engineering begins with a profound understanding of the core principles of programming and web development. Beyond using frameworks like React or Angular, consider these fundamental concepts:

Master the building blocks of the web - Hypertext Markup Language (HTML) for structuring content and Cascading Style Sheets (CSS) for presentation. Understanding these fundamental languages is crucial to crafting responsive and visually appealing web pages.
JavaScript is the heart of front-end development. Learn to write clean, efficient JavaScript code that interacts with the Document Object Model (DOM) to create dynamic and interactive web applications.
Explore techniques to optimize the loading and rendering of web pages, including image optimization, lazy loading, and minimizing HTTP requests.

2- Dive into Web Technologies

True frontend software engineers are well-versed in a range of web technologies that extend beyond frameworks and libraries. Explore the following to deepen your expertise:

Web APIs: Familiarize yourself with the plethora of web APIs available in browsers, including the Fetch API, WebSockets, and Service Workers. These enable you to create sophisticated, client-side applications.
Progressive Web Apps (PWAs): Learn how to build PWAs, which offer improved user experiences through offline access, push notifications, and installability.
Responsive Design: Master the art of responsive web design, ensuring your applications adapt seamlessly to various screen sizes and devices.

3- Software Architecture in Frontend

Software engineering principles apply to frontend development just as they do to backend. Understand how to design frontend systems that are modular, scalable, and maintainable

Component-Based Architecture: Break down your user interface into reusable components. This promotes code reusability and maintainability and is a core concept in modern frontend development.
State Management: Grasp various state management patterns in frontend development, such as Flux, Redux, and the context API in React. Effective state management is crucial for maintaining data integrity in complex applications.
Design Patterns: Familiarize yourself with frontend design patterns like the Observer pattern and the Singleton pattern to create scalable and maintainable code.

4- Master Extra Skills:

Expand your skill set beyond the realm of front-end development by acquiring additional proficiencies such as:

Bash Scripting: Familiarize yourself with Bash scripting to enhance your ability to automate tasks, work with the command line, and streamline your development workflow.
Git Proficiency: Become well-versed in Git, a crucial version control system, enabling you to manage your codebase effectively, collaborate with teams, and track changes in your projects with precision.
CI/CD: Embrace CI/CD practices to automate the testing and deployment of your applications, ensuring efficiency and reliability in your software development processes.

5- Debugging and Problem Solving

Frontend software engineers demonstrate proficiency in debugging and problem-solving. Cultivate the skills necessary to efficiently identify and resolve issues. Craft comprehensive unit and integration tests to guarantee the dependability of your code, whether you're working within a framework or on the core web platform.

6- Contribute to Open Source and Be Critical:

As you embark on your journey to become a proficient front-end software engineer, it's vital to engage actively in the open-source community. Open source not only provides you with a platform to collaborate with other developers but also fosters a spirit of giving back to the community. Contribute to open-source projects, whether it's by submitting bug reports, fixing issues, or creating your own open-source tools. By actively participating in open source, you not only sharpen your skills but also make a valuable contribution to the development ecosystem.

Moreover, don't simply use libraries and frameworks blindly. Be critical about the tools you employ and take the time to understand how they work under the hood. This critical mindset enables you to spot potential issues, propose solutions, and make informed decisions when choosing the right tools for your projects. Being an active and discerning participant in the developer community sets you on the path to becoming a well-rounded front-end software engineer.

Finally,

The key to success in this dynamic field lies in your unending eagerness to learn and your commitment to staying abreast of the latest developments. Remember that the front-end landscape is ever-evolving, and your dedication to continuous learning and staying up to date is your passport to long-term success as a front-end software engineer.

React Typescript conditional rendering using objects

Ahmedammarr — Tue, 19 Oct 2021 23:34:10 +0000

Lately, I've been looking for a better way to write clean conditional rendering code instead of ternary and && operators and even if statements, because sometimes they can be confusing and I found that I can write the same functionality with objects, it makes the code more readable. let's see how we can write a well-typed object to render a component based on the parent component state and props

export default function Products({state}:ProductsStateEnum)
:ReactElement {
const [_ProductsState, setProductsState] = useState(state)
  const ProductsState: { [key in ProductsStateEnum]: ReactElement } = {
    loading: <Loader width={150} />,
    failed: (
      <div>
          <Badge bg='danger'>Somethig Went Wrong</Badge>
      </div>
    ),
    done: (
      <>
        {products?.map(
          ({ id, title, image, description, category, price }) => (
            <ProductCard
              key={id}
              id={id}
              title={title}
              description={description}
              category={category}
              price={price}
              image={image}
            />
          )
        )}
      </>
    )
  }

  return <div className='row p-3'>{ProductsState[_ProductsState]}</div>
}

We notice here that we didn't write any if statement or any operator, based on the state the component will render the React component with key that's equal to the _ProductsState,

Another and better solution from lukeshiru is using functions/components

import type { FC } from "react";

type State = "loading" | "failed" | "done";
type ProductsProps = { readonly state?: State };

export const Products: FC<ProductsProps> = ({ state = "loading" }) => {
    const ProductsState = (
        {
            loading: () => {/* Your loading code here */},
            failed: () => {/* Your failed code here */},
            done: () => {/* Your done code here */}
        } as Record<State, FC>
    )[state];

    return (
        <div className="row p-3">
            <ProductsState />
        </div>
    );
};

in the above code we can render only the exact state components when needed.

tell me if you know another way to write readable conditional rendering options!

Stop Googling split, splice, and slice!

Ahmedammarr — Thu, 08 Apr 2021 12:26:27 +0000

Ok, Split, Splice, and Slice methods are getting me confused every single time I use one of them, and no matter how many times I use them each time feels like the first time so I decided to summarize how they work in this article and save it as a memo to be my reference in such a situation.
Let's start!

split:

Split is a string method, It converts a string into an array of substrings

signature:

string.split(substring that separates our string, limit)


const str = "Good Morning Dev Community"

str.split("Morning Dev ")
//output:["Good ", "Community"]

str.split(" ") 
//output: ["Good", "Morning", "Dev", "Community"]

str.split("") 
//output: ["G", "o", "o", "d", " ", "M", "o", "r", "n", "i", "n", "g", " ", "D", "e", "v", " ", "C", "o", "m", "m", "u", "n", "i", "t", "y"]

str.split("",4) 
//output: ["G", "o", "o", "d"]

Splice:

Splice is an array method that adds, replaces, or removes items from the array and it returns the replaced/removed item

signature:

array.splice(start index, number of replaced/removed items, new items to be added or replacing the removed)


const colors = ["orange", "red", "blue", "black"]

colors.splice(1,1,"black") 
/* output:["red"]
- "red" is removed and replaced by "black"
- splice methods returns the removed item ["red"]
- colors = ["orange", "black", "blue", "black"]
*/

colors.splice(1,0,"white")
/* output:[]
- "white" is inserted at index 1 and there is no item removed
- splice method return an empty array
- colors = ["orange", "white", "black", "blue", "black"]
*/

colors.splice(3,2,"orange","purple")
/* output:["blue", "black"]
- "orange","purple" are inserted from index 3 and "blue", "black" are removed
- splice method returns ["blue", "black"]
- colors = ["orange", "white", "black", "orange", "purple"]
*/

colors.splice(3,2)
/* output:["orange", "purple"]
- "orange","purple" are removed
- splice method returns ["orange", "purple"]
- colors = ["orange", "white", "black"]
*/

Slice:

Slice is an array method that returns a new array with the selected items from the original array

signature:

array.slice(start index where the selection starts, end index where the selection ends)

const weekDays = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday"]

const mondayTuesday = weekDays.slice(1,3)
//mondayTuesday= ["Monday", "Tuesday"]

const allExceptSundayMonday = weekDays.slice(2)
//allExceptSundayMonday = ["Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

const allExceptSaturday = weekDays.slice(0,weekDays.length - 1)
//allExceptSaturday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]

Thank you, I hope we never google these three methods again ✌

Typescript Implicit vs Explicit types

Ahmedammarr — Mon, 01 Mar 2021 07:25:40 +0000

The expression implicit used to refer to something done behind the scene, on the other hand, explicit refers to the manual approach of applying things. from here let's discuss implicit and explicit typing in Typescript.
Type is the value that is annotated to a variable and it's compiled in run time, this helps catches errors in an early stage.

Implicit type means that the type is automatically declared for a variable.
So instead of annotating types explicitly

let isTrue: boolean = true;

we can let the compiler do it for us

let isTrue= true;  

isTrue= 10;

//$ error: Type '10' is not assignable to type 'boolean'

Arrays and objects also can be implicitly typed

let typescriptArr = [1,2]
typescriptArr = ['X','Y']
//$ error: Type 'string' is not assignable to type 'number'.

let typescriptObj = {
userName : 'Ahmed',
age:25
}

typescriptObj.age = 'something'
//$ error: Type 'something' is not assignable to type 'number'.

notes: It's important to use descriptive names when using implicit type.

One more thing about implicit typing, variables declared without value are automatically assigned to type any and we can reassign it to any type.

let anyVar;

anyVar = 'Some String'
anyVar = 10

this will not through any errors, but take into consideration that it's not a good practice and the Typescript community does not encourage the use of any Implicitly or Explicitly

Finally, let's talk about the pros of implicit typing
1- Flexibility: this is one of the Typescript compiler strengths, unlike other strongly typed programming languages, we don't need to define the type for everything in our code.
2- Less Time Consuming: imagine refactoring a codebase with too much explicit typing, It'll take much time and efforts regarding the change of the time

Nested Mutations in GraphQL Nexus

Ahmedammarr — Tue, 22 Dec 2020 10:57:54 +0000

I've struggled with creating an array of mutation with GraphQL Nexus
, I tried so many solutions but I wasn't satisfied with it because it causes bad performance in some cases, but today I tried a solution that I think it's the better way to create an array of mutations in Nexus, I've used graphql-auth example from Prisma examples repo to explain my point. I created the nested mutation option to deletePost mutation in the example.
Please check it and tell me what do you think about it and of course, I want to know your suggestions for solutions better than this.

A quick start with Next.js

Ahmedammarr — Fri, 11 Dec 2020 12:38:51 +0000

Next is a react framework for server-side rendering and generating static websites to React-based web applications.
It requires zero configurations and it provides a common structure that makes you able to build frontend react apps while handles server-side for you
Next had been developed by a Vercel team and it trusted by big famous platforms such as TikTok, Twitch, Netflix, and many more check out the official websites' showcase page

It's worth the popularity because of it's great development experience and features that we are going to mention some of them
in the post:

1-Page based routing system with the support of dynamic routing

In the file structure created by create-next-app there is a top-level directory with the name pages each file in this directory is actually a route or in other words, it's automatically available as a route.
So, if you have a file named post.js in the pages directory with simple configurations you can have a route to that component and link to it using the <Link> component provided by next

2-Hot code reloading(Fast refresh)

Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components.
Click here for more explanation

3-Automatic code splitting

Next.js Automatically breaks up your app and renders the pages with only the packages and JavaScript they need.
This ensures the first-page load is as fast as it can be
and can result in loading and better performance.

4-Pre-rendering

Next.js supports two types of pre-rendering, Static Generation and Server-side rendering
The Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
and it's recommended for cases that have no frequent data updates like blog posts, Ecommerce listings, documentation, etc... because it's faster than Server-Side rendering.

But if your app has frequent data updates you need Server-side rendering where the HTML is generated on each request
check the images below for a visual explanation

5-Typescript support

Next is written in Typescript and of course, it comes with excellent support for it.

To get started with Next.js visit this tutorial page on the official Next.js Website.

Thank you for your time. Feel free to like, comment, or share this post with your friends

DEV Community: Ahmedammarr

All about "this" and "this" manipulation in Javascript

So what is exactly this?

1- Global Context:

2- Function/Method Context:

3- Constructor Context:

4- Event Handler Context:

this with arrow functions:

this manipulation:

1- bind:

2- call:

2- apply:

Switch from a Framework/Library User to a Pro Frontend Engineer

1- Understanding the Fundamentals

2- Dive into Web Technologies

3- Software Architecture in Frontend

4- Master Extra Skills:

5- Debugging and Problem Solving

6- Contribute to Open Source and Be Critical:

React Typescript conditional rendering using objects

Stop Googling split, splice, and slice!

split:

signature:

Splice:

signature:

Slice:

signature:

Typescript Implicit vs Explicit types

Nested Mutations in GraphQL Nexus

A quick start with Next.js

1-Page based routing system with the support of dynamic routing

2-Hot code reloading(Fast refresh)

3-Automatic code splitting

4-Pre-rendering

5-Typescript support

So what is exactly `this`?

`this` with arrow functions:

`this` manipulation: