
---

# *TypeScript Fundamental Series*
1. [Understanding Types in TypeScript](/blog/understanding-types-in-typescript)
2. [Mastering Functions in TypeScript](/blog/mastering-functions-in-typescript)
3. [Exploring Interfaces in TypeScript](/blog/exploring-interfaces-in-typescript)
4. [Utilizing Classes in TypeScript](/blog/utilizing-classes-in-typescript)
5. [Leveraging Generics in TypeScript](/blog/leveraging-generics-in-typescript)
6. [Advanced Type Features in TypeScript](/blog/advanced-type-features-in-typescript)

---

Welcome to the sixth and final post in our series on the fundamentals of TypeScript. In this article, we'll explore some advanced type features that can further enhance your TypeScript development experience.

While the previous blog posts covered the core concepts of types, functions, interfaces, classes, and generics, there are a few more powerful type features that are worth learning about. Let's dive in!

**Union and Intersection Types**
TypeScript provides two powerful type features: union types and intersection types. These allow you to create more complex and expressive types.

Union types represent a value that can be one of several types:

```typescript
let age: number | string = 30; // age can be a number or a string
age = '40'; // this is also valid
```

In this example, the `age` variable can hold either a `number` or a `string` value.

Intersection types combine multiple types into a single type:

```typescript
interface Admin {
  id: string;
  admin: boolean;
}

interface User {
  id: string;
  name: string;
}

type AdminUser = Admin & User;

let adminUser: AdminUser = {
  id: 'abc123',
  admin: true,
  name: 'John Doe'
};
```

In this example, the `AdminUser` type is an intersection of the `Admin` and `User` interfaces, meaning it must have all the properties of both interfaces.

**Type Aliases**
TypeScript allows you to create your own custom types using type aliases. This can be particularly useful when you want to give a meaningful name to a complex type.

```typescript
type ID = string;
type Person = {
  id: ID;
  name: string;
  age: number;
};

let john: Person = {
  id: 'abc123',
  name: 'John Doe',
  age: 30
};
```

In this example, we've created a `Person` type alias that represents an object with `id`, `name`, and `age` properties. We've also created a `ID` type alias for the `id` property, which is a `string`.

**Literal Types**
TypeScript also supports literal types, which allow you to specify exact values that a variable or parameter can hold. This can be particularly useful when working with APIs or configuration settings.

```typescript
type Color = 'red' | 'green' | 'blue';

let myColor: Color = 'red'; // Valid
// myColor = 'yellow'; // Error: Type '"yellow"' is not assignable to type 'Color'.
```

In this example, the `Color` type is a union of three literal string types: `'red'`, `'green'`, and `'blue'`. This ensures that the `myColor` variable can only be assigned one of those three values.

**Conditional Types**
TypeScript's conditional types allow you to create types that depend on other types. This can be a powerful tool for creating more dynamic and expressive type systems.

```typescript
type Flatten<T> = T extends Array<infer U> ? U : T;

type FlattenedArray = Flatten<number[]>; // FlattenedArray is number
type FlattenedValue = Flatten<number>; // FlattenedValue is number
```

In this example, the `Flatten` type is a conditional type that checks if the input type `T` is an array. If it is, the output type is the element type of the array (`U`). If it's not an array, the output type is simply `T`.

**Mapped Types**
Mapped types in TypeScript allow you to create new types by transforming the properties of an existing type. This can be useful for creating variations of existing types or for building generic utility types.

```typescript
interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;
// ReadonlyPerson is { readonly name: string; readonly age: number; }

type PartialPerson = Partial<Person>;
// PartialPerson is { name?: string; age?: number; }
```

In this example, the `Readonly` and `Partial` utility types are mapped types that create new types based on the `Person` interface.

**Utility Types**
TypeScript provides a set of built-in utility types that can help you work with more complex type scenarios. Some of the most useful utility types include:

- `Pick<T, K>`: Creates a type by picking a set of properties `K` from an existing type `T`.
- `Omit<T, K>`: Creates a type by omitting a set of properties `K` from an existing type `T`.
- `Exclude<T, U>`: Creates a type by excluding from `T` all types that are assignable to `U`.
- `NonNullable<T>`: Creates a type by excluding `null` and `undefined` from `T`.

These utility types can help you write more concise and expressive code, especially when working with complex data structures.

By exploring these advanced type features in TypeScript, you'll be able to create more robust, maintainable, and flexible code. TypeScript's type system is a powerful tool that can greatly improve the quality and reliability of your applications.

We've covered a lot of ground in this series, from the basics of types to more advanced concepts like generics and conditional types. I hope this has been a valuable journey for you, and that you feel more confident in your TypeScript skills. Happy coding!

In this article, we'll explore some advanced type features that can further enhance your TypeScript development experience.

Advanced Type Features in TypeScript


---

# *TypeScript Fundamental Series*
1. [Understanding Types in TypeScript](/blog/understanding-types-in-typescript)
2. [Mastering Functions in TypeScript](/blog/mastering-functions-in-typescript)
3. [Exploring Interfaces in TypeScript](/blog/exploring-interfaces-in-typescript)
4. [Utilizing Classes in TypeScript](/blog/utilizing-classes-in-typescript)
5. [Leveraging Generics in TypeScript](/blog/leveraging-generics-in-typescript)
6. [Advanced Type Features in TypeScript](/blog/advanced-type-features-in-typescript)

---

Welcome to the fifth in our series on the fundamentals of TypeScript. In this article, we'll delve into a concept called Generics. Generics in TypeScript allow you to create reusable components and functions that can operate on different types of data, without sacrificing type safety. Let's explore how they work!

**Understanding Generics**
Generics in TypeScript allow you to create functions, classes, and interfaces that can work with a variety of data types, without sacrificing type safety. This is achieved by using type parameters, which are denoted by angle brackets (`<>`).

Here's a simple example of a generic function that can work with any type of array:

```typescript
function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

let numbers = [1, 2, 3];
let firstNumber = getFirstElement(numbers); // firstNumber is a number

let names = ['Alice', 'Bob', 'Charlie'];
let firstName = getFirstElement(names); // firstName is a string
```

In this example, the `getFirstElement` function is generic, and the type parameter `T` is inferred from the input array. This allows the function to work with arrays of any type, while still ensuring that the return value is of the same type as the elements in the array.

**Generic Type Parameters**
You can define multiple type parameters in a generic function or class. These parameters can be used independently or in relation to each other.

```typescript
function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}

let result = swap(['hello', 42]); // result is ['42', 'hello']
```

In this example, the `swap` function has two type parameters, `T` and `U`, which are used to represent the types of the elements in the input tuple.

**Generic Constraints**
Sometimes, you may want to restrict the types that can be used with a generic type parameter. This is where generic constraints come in handy.

```typescript
interface HasName {
  name: string;
}

function printName<T extends HasName>(obj: T): void {
  console.log(obj.name);
}

let person = { name: 'Alice', age: 30 };
printName(person); // Outputs: 'Alice'

let animal = { species: 'Dog', age: 5 };
// printName(animal); // Error: Argument of type '{ species: string; age: number; }' is not assignable to parameter of type 'HasName'.
```

In this example, the `printName` function is constrained to work only with objects that have a `name` property, as defined by the `HasName` interface.

**Generic Classes and Interfaces**
Generics can also be used with classes and interfaces to create reusable, type-safe data structures.

```typescript
class GenericBox<T> {
  private item: T;

  set(value: T): void {
    this.item = value;
  }

  get(): T {
    return this.item;
  }
}

let numberBox = new GenericBox<number>();
numberBox.set(42);
let number = numberBox.get(); // number is a number

let stringBox = new GenericBox<string>();
stringBox.set('hello');
let string = stringBox.get(); // string is a string
```

In this example, the `GenericBox` class is generic, with a type parameter `T`. This allows the class to store and retrieve values of any type, while maintaining type safety.

By mastering the use of generics in TypeScript, you can create more flexible, reusable, and type-safe code. In the next blog post, we'll explore some advanced type features, such as union and intersection types, that can further enhance your TypeScript development experience.



In this article, we'll explore Generics to create reusable components and functions.

Leveraging Generics in TypeScript


---

# *TypeScript Fundamental Series*
1. [Understanding Types in TypeScript](/blog/understanding-types-in-typescript)
2. [Mastering Functions in TypeScript](/blog/mastering-functions-in-typescript)
3. [Exploring Interfaces in TypeScript](/blog/exploring-interfaces-in-typescript)
4. [Utilizing Classes in TypeScript](/blog/utilizing-classes-in-typescript)
5. [Leveraging Generics in TypeScript](/blog/leveraging-generics-in-typescript)
6. [Advanced Type Features in TypeScript](/blog/advanced-type-features-in-typescript)

---

Welcome to the fourth post in our series on the fundamentals of TypeScript. In this article, we'll explore the world of classes and how they can be used to create reusable, object-oriented code in TypeScript.

Classes are a fundamental part of object-oriented programming (OOP), and TypeScript provides a rich set of features to work with them effectively. Let's dive in!

**Defining Classes**
In TypeScript, you can define classes using the `class` keyword. Classes can have properties, methods, and a constructor, which is used to initialize the object's state.

Here's an example of a simple `Student` class:

```typescript
class Student {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  introduce(): void {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

let student = new Student('Alice', 20);
student.introduce(); // Hi, my name is Alice and I'm 20 years old.
```

In this example, the `Student` class has two properties (`name` and `age`) and a method (`introduce()`). The `constructor` is used to initialize the object's properties when a new `Student` instance is created.

**Access Modifiers**
TypeScript provides access modifiers that allow you to control the visibility of class members (properties and methods). The available access modifiers are:

1. `public`: The member can be accessed from anywhere.
2. `private`: The member can only be accessed within the class.
3. `protected`: The member can be accessed within the class and its subclasses.

Here's an example of using access modifiers in a class:

```typescript
class BankAccount {
  public balance: number;
  private transactionHistory: number[];

  constructor(initialBalance: number) {
    this.balance = initialBalance;
    this.transactionHistory = [];
  }

  deposit(amount: number): void {
    this.balance += amount;
    this.transactionHistory.push(amount);
  }

  private getTransactionHistory(): number[] {
    return this.transactionHistory;
  }
}

let account = new BankAccount(1000);
account.deposit(500); // This is allowed
// account.transactionHistory; // Error: Property 'transactionHistory' is private and only accessible within class 'BankAccount'.
```

In this example, the `balance` property is `public`, so it can be accessed from outside the class. The `transactionHistory` property is `private`, so it can only be accessed within the `BankAccount` class. The `getTransactionHistory()` method is also `private`.

**Inheritance and Polymorphism**
TypeScript supports inheritance, which allows you to create new classes based on existing ones. This is known as the "is-a" relationship, where a subclass is a more specific type of the superclass.

```typescript
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  introduce(): void {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

class Student extends Person {
  grade: number;

  constructor(name: string, age: number, grade: number) {
    super(name, age);
    this.grade = grade;
  }

  introduce(): void {
    super.introduce();
    console.log(`I'm in grade ${this.grade}.`);
  }
}

let student = new Student('Alice', 12, 7);
student.introduce(); // Hi, my name is Alice and I'm 12 years old. I'm in grade 7.
```

In this example, the `Student` class extends the `Person` class, inheriting the `name` and `age` properties, as well as the `introduce()` method. The `Student` class also adds a `grade` property and overrides the `introduce()` method to include the student's grade.

This is an example of polymorphism, where the `introduce()` method behaves differently for `Person` and `Student` objects, even though they share the same method name.

**Abstract Classes**
TypeScript also supports abstract classes, which are used as a blueprint for other classes. Abstract classes can have abstract methods, which must be implemented by the concrete subclasses.

```typescript
abstract class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  abstract makeSound(): void;

  move(): void {
    console.log(`${this.name} is moving.`);
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log('Woof!');
  }
}

let dog = new Dog('Buddy');
dog.makeSound(); // Woof!
dog.move(); // Buddy is moving.
```

In this example, the `Animal` class is an abstract class with an abstract `makeSound()` method. The `Dog` class extends `Animal` and provides the implementation for the `makeSound()` method.

**Static Methods and Properties**
TypeScript also supports static methods and properties, which are associated with the class itself, rather than individual instances of the class.

```typescript
class Math {
  static PI: number = 3.14159;

  static add(a: number, b: number): number {
    return a + b;
  }
}

console.log(Math.PI); // 3.14159
let result = Math.add(2, 3); // 5
```

In this example, the `PI` property and the `add()` method are static, so they can be accessed directly on the `Math` class, without needing to create an instance of the class.

By mastering the use of classes in TypeScript, you can create more organized, reusable, and maintainable code.


In this article, we'll dive into the powerful concept of interfaces and explore how they can help you model the structure of your data.

Utilizing Classes in TypeScript


---

# *TypeScript Fundamental Series*
1. [Understanding Types in TypeScript](/blog/understanding-types-in-typescript)
2. [Mastering Functions in TypeScript](/blog/mastering-functions-in-typescript)
3. [Exploring Interfaces in TypeScript](/blog/exploring-interfaces-in-typescript)
4. [Utilizing Classes in TypeScript](/blog/utilizing-classes-in-typescript)
5. [Leveraging Generics in TypeScript](/blog/leveraging-generics-in-typescript)
6. [Advanced Type Features in TypeScript](/blog/advanced-type-features-in-typescript)

---

Welcome to the third post in our series on the fundamentals of TypeScript. In this article, we'll dive into the powerful concept of interfaces and explore how they can help you model the structure of your data.

Interfaces are a core feature of TypeScript, and they play a crucial role in defining the shape of objects, function parameters, and return types. Let's get started!

**Defining Interfaces**
Interfaces in TypeScript are used to create custom types that describe the structure of an object. They allow you to define the expected properties, their types, and optional or required status.

Here's an example of an interface that defines the structure of a `Person` object:

```typescript
interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

let person: Person = {
  name: 'John Doe',
  age: 30,
  isStudent: true
};
```

In this example, the `Person` interface specifies that an object of this type must have `name` (a string), `age` (a number), and `isStudent` (a boolean) properties.

The `person` variable is then assigned an object that matches the structure defined by the `Person` interface.

**Optional Properties**
Interfaces in TypeScript also allow you to define optional properties, which is useful when you have properties that may or may not be present in an object.

```typescript
interface Person {
  name: string;
  age: number;
  isStudent?: boolean;
}

let student: Person = {
  name: 'Alice',
  age: 20
};

let teacher: Person = {
  name: 'Bob',
  age: 40,
  isStudent: false
};
```

In this example, the `isStudent` property is marked as optional using the `?` syntax. The `student` object only has the `name` and `age` properties, while the `teacher` object has all three properties.

**Readonly Properties**
Interfaces in TypeScript also support readonly properties, which can be useful when you want to ensure that certain properties cannot be modified after an object is created.

```typescript
interface Person {
  readonly id: string;
  name: string;
  age: number;
}

let person: Person = {
  id: 'abc123',
  name: 'John Doe',
  age: 30
};

person.id = 'def456'; // Error: Cannot assign to 'id' because it is a read-only property.
```

In this example, the `id` property is marked as `readonly`, so it cannot be modified after the `person` object is created.

**Extending Interfaces**
Interfaces in TypeScript can also be extended, allowing you to create new interfaces that inherit the properties and methods of existing ones.

```typescript
interface Animal {
  name: string;
  age: number;
}

interface Dog extends Animal {
  breed: string;
}

let dog: Dog = {
  name: 'Buddy',
  age: 5,
  breed: 'Labrador'
};
```

In this example, the `Dog` interface extends the `Animal` interface, inheriting the `name` and `age` properties and adding a new `breed` property.

**Interfaces and Functions**
Interfaces can also be used to define the shape of function parameters and return types:

```typescript
interface Person {
  name: string;
  age: number;
}

function createPerson(person: Person): Person {
  return {
    name: person.name,
    age: person.age
  };
}

let newPerson = createPerson({ name: 'Alice', age: 25 });
```

In this example, the `createPerson` function expects a `Person` object as its parameter and returns a new `Person` object.

**Interfaces and Classes**
Interfaces can also be used to define the shape of classes. This can be particularly useful when you want to ensure that a class implements a specific set of properties and methods.

```typescript
interface Vehicle {
  make: string;
  model: string;
  drive(): void;
}

class Car implements Vehicle {
  make: string;
  model: string;

  constructor(make: string, model: string) {
    this.make = make;
    this.model = model;
  }

  drive(): void {
    console.log(`Driving the ${this.make} ${this.model}.`);
  }
}

let myCar = new Car('Toyota', 'Corolla');
myCar.drive(); // Driving the Toyota Corolla.
```

In this example, the `Car` class implements the `Vehicle` interface, ensuring that it has the required `make`, `model`, and `drive()` members.

Interfaces are a powerful tool in TypeScript, allowing you to define and enforce the shape of your data structures. By using interfaces, you can write more maintainable and type-safe code, catching potential issues early in the development process.

In the next blog post, we'll explore how to work with classes in TypeScript, including the use of access modifiers and inheritance.

Exploring Interfaces in TypeScript


---

# *TypeScript Fundamental Series*
1. [Understanding Types in TypeScript](/blog/understanding-types-in-typescript)
2. [Mastering Functions in TypeScript](/blog/mastering-functions-in-typescript)
3. [Exploring Interfaces in TypeScript](/blog/exploring-interfaces-in-typescript)
4. [Utilizing Classes in TypeScript](/blog/utilizing-classes-in-typescript)
5. [Leveraging Generics in TypeScript](/blog/leveraging-generics-in-typescript)
6. [Advanced Type Features in TypeScript](/blog/advanced-type-features-in-typescript)

---

Welcome to the second post in our series on the fundamentals of TypeScript. In this article, we'll dive into the world of functions and explore how to leverage TypeScript's type system to enhance their usage.

Functions are a core part of any programming language, and TypeScript provides a robust set of features to help you define and work with them more effectively. Let's get started!

**Defining Functions with Types**
In TypeScript, you can specify the types of a function's parameters and return value. This helps ensure that the function is being used correctly and reduces the likelihood of runtime errors.

Here's an example of a function that takes a string parameter and returns a string:

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}

let greeting = greet('Alice');
```

In this example, the `greet` function expects a `string` parameter and returns a `string`. TypeScript will check that the argument passed to the function is a `string` and that the function's return value is also a `string`.

**Optional and Default Parameters**
TypeScript also allows you to define optional and default parameters in your functions. This can be particularly useful when you want to provide flexibility in how a function is called.

```typescript
function calculateArea(width: number, height?: number, color: string = 'black'): number {
  if (height) {
    return width * height;
  } else {
    return width * width;
  }
}

let area1 = calculateArea(5, 3); // area1 is 15
let area2 = calculateArea(4); // area2 is 16
let area3 = calculateArea(2, undefined, 'red'); // area3 is 4
```

In this example, the `height` parameter is defined as optional (using the `?` syntax), and the `color` parameter has a default value of `'black'`. This allows the `calculateArea` function to be called with different combinations of arguments, while still maintaining type safety.

**Function Overloading**
TypeScript also supports function overloading, which allows you to define multiple function signatures with different parameter types and return types. This can be useful when you want to provide multiple ways of calling a function, depending on the input.

```typescript
function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
  return a + b;
}

let result1 = add(2, 3); // result1 is 5
let result2 = add('Hello', 'World'); // result2 is 'HelloWorld'
```

In this example, we've defined two overloads for the `add` function: one that takes two `number` parameters and returns a `number`, and another that takes two `string` parameters and returns a `string`. The implementation of the function can then handle both cases, even though the function signature is more general (`any` parameters and `any` return type).

**Arrow Functions**
TypeScript also supports arrow functions, which can be a concise way of defining functions. You can use type annotations with arrow functions just like with regular functions:

```typescript
let greet = (name: string): string => {
  return `Hello, ${name}!`;
};

let greeting = greet('Alice');
```

In this example, the `greet` variable is assigned an arrow function that takes a `string` parameter and returns a `string`.

**Callback Functions**
When working with asynchronous code, you often need to pass callback functions as arguments. TypeScript allows you to specify the types of these callbacks as well:

```typescript
function fetchData(callback: (error: Error | null, data: any) => void) {
  // Simulate asynchronous data fetching
  setTimeout(() => {
    callback(null, { name: 'John Doe', age: 30 });
  }, 1000);
}

fetchData((err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data); // { name: 'John Doe', age: 30 }
  }
});
```

In this example, the `fetchData` function expects a callback that takes an `Error | null` as the first parameter and any `data` as the second parameter.

By mastering the concepts of function types in TypeScript, you can write more robust and maintainable code, with better tooling support and fewer runtime errors.

In this article, we'll dive into the world of functions and explore how to leverage TypeScript's type system to enhance their usage.

Mastering Functions in TypeScript


---

# *TypeScript Fundamental Series*
1. [Understanding Types in TypeScript](/blog/understanding-types-in-typescript)
2. [Mastering Functions in TypeScript](/blog/mastering-functions-in-typescript)
3. [Exploring Interfaces in TypeScript](/blog/exploring-interfaces-in-typescript)
4. [Utilizing Classes in TypeScript](/blog/utilizing-classes-in-typescript)
5. [Leveraging Generics in TypeScript](/blog/leveraging-generics-in-typescript)
6. [Advanced Type Features in TypeScript](/blog/advanced-type-features-in-typescript)

---

Welcome to the first post in our series on mastering the fundamentals of TypeScript! In this article, we'll dive into the core concept of types, which is the foundation of the TypeScript language.

TypeScript is a superset of JavaScript that introduces a static type system, allowing you to specify the expected data types for your variables, function parameters, and return values. This type system provides several benefits, including:

1. **Early Error Detection**: By defining types, TypeScript can catch type-related errors during the development phase, rather than at runtime. This helps you write more robust and maintainable code.

2. **Improved Code Navigation and Tooling**: TypeScript's type system enables powerful tooling features, such as code completion, refactoring, and type checking, which can significantly enhance your development experience.

3. **Better Documentation and Collaboration**: Explicitly defining types in your code can serve as a form of self-documenting documentation, making it easier for you and your team to understand the expected behavior of your codebase.

![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExY3Bxamh0MG1pOG9hZThsamp2dzhkdXk2bXZwbWpjanV3OHFlZno4eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dynzluggitvMJ6P45c/giphy.gif)

Now, let's explore the basics of types in TypeScript:

**Declaring Variables with Types**
In TypeScript, you can declare the type of a variable using the following syntax:

```typescript
let name: string = 'John Doe';
let age: number = 30;
let isStudent: boolean = true;
```

In this example, we've declared three variables with the types `string`, `number`, and `boolean`, respectively. TypeScript will ensure that the assigned values match these types.

**Built-in Types**
TypeScript comes with a set of built-in types that you can use. These include:

- `string`: for textual data
- `number`: for numeric values
- `boolean`: for true/false values
- `any`: a dynamic type that can hold any value
- `void`: used for functions that don't return a value
- `null` and `undefined`: for representing the absence of a value

You can also create your own custom types using interfaces, classes, or type aliases, which we'll cover in future blog posts.

**Type Inference**
TypeScript is designed to be as helpful as possible, and one of the ways it does this is through type inference. This means that, in many cases, TypeScript can automatically determine the type of a variable based on the value it's assigned:

```typescript
let message = 'Hello, world!'; // TypeScript infers that 'message' is a string
```

In this example, TypeScript knows that the `message` variable is a `string` because we assigned a string value to it.

**Type Annotations**
While type inference is powerful, you can also explicitly specify the type of a variable using a type annotation. This can be particularly helpful when the type is not clear or when you want to enforce a specific type:

```typescript
let message: string = 'Hello, world!';
```

In this case, we've used a type annotation to explicitly state that the `message` variable is a `string`.

**Dynamic and Static Typing**
JavaScript is a dynamically typed language, which means that variables can hold values of any type, and the type can change at runtime. In contrast, TypeScript is a statically typed language, which means that types are checked at compile-time.

This static typing in TypeScript provides several advantages, including better tooling support, improved code maintainability, and the ability to catch type-related errors earlier in the development process.

In this article, we'll dive into the core concept of types, which is the foundation of the TypeScript language.

Understanding Types in TypeScript


Hey Devs 👨🏼‍💻! Today we will discuss about one problem that often mentioned in a interview, how to find intersection of two arrays. Who knows maybe in your future you will get asked this question too. Being prepared is the key for successful interview. Without further ado, let's jump right in!

Let's analyze the task to solve:

> "Assuming an input of two number arrays, return an array that is composed of numbers they have in common."

We also must consider the constraint for this problem: "A number might appear more than once. If it appears twice in each array, the resulting array will have two instances of the same number."

Before we start to write the code, usually what I do is create a pseudocode of how to solve the problem to give us a big picture on how to solve it. In this particular case I want to solve it using `Set`

```txt
array_1 = [1,2,3,1,2,1,5,7]
array_2 = [2,1,4,8,3]

function(array_1, array_2):
  set_1 = create a new set

  loop array_1:
   push the value of each val of array_1 into set_1

  intersection_set = create a second set (for storing our intersected value)

  loop through array_2:
   check if val of array_2 is on set_1:
     push val of array_2 into intersection_set

  return array from intersection_set
```

I will explain what happen what happen in this logic.

First of all we will use `Set` to make create an unique value. If we insert a duplicate value into `Set` it will be ignored since we already have the same value in our `Set`.

The main logic to solve this problem is simple, We need two `Set`. The first `Set` will hold unique values from the first input Array, and second `Set` will hold value for the actual intersected values from both arrays. And later on we just need to transfrom the value from intersected `Set` into Array.

Check the implementation of our logic below:

```js
function intersection(arr1, arr2) {
  let firstSet = new Set();
  for (val of arr1) {
    firstSet.add(val);
  }

  let intersectionSet = new Set();

  for (let val of arr2) {
    if (firstSet.has(val)) {
      intersectionSet.add(val);
    }
  }

  return Array.from(intersectionSet);
}
```

There are multiple ways to solve this problem. I choose to use `Set` because it make the code so much clean and easy to read. Feel free to explore to use another method to solve this problem. I hope this short article will help you in the future! Good luck Devs. ✨

In this article we will discuss how to find intersection of two arrays.

Find Intersection of Two Arrays


Hi Devs! Today we will discuss one of the most fundamental concept in Javascript "Pass by Value" and "Pass by Reference". This concept is so important, even this question is often pop up in job interview. Why is that? By understanding how this works, it will help us to be a better programmer that can understand the flow of data in the application.

Before we can dive in into the explanation. We must know that, in Javascript data types are classified into two categories: *primitive* and *non-primitive*.

Here is a list primitive data types in Javascript:
- `string` -- an array of character

- `number` -- integer, floats, etc...

- `bigint` -- in case you need integer values larger than the range supported by the `Number`

- `boolean` -- true or false

- `null` -- empty value

- `symbols` -- an unique value or often used as unique identifier that is not equal to any other value

- `undefined` -- declared variable but the value is still not assigned.

Meanwhile all objects, arrays, and functions fall under the category of non-primitive data types.

Okay, we got this. Let's jump into the explanation!

![](https://media4.giphy.com/media/BpGWitbFZflfSUYuZ9/giphy.gif?cid=ecf05e47tzhwz2l8l4dxy9rdt1f1z92m8poi670lhhqhxvpv&rid=giphy.gif&ct=g)

# Pass by Reference

Let's take a look at the code below to understand what is pass by reference is

```js
let john = {
  name: 'John Doe',
  gender: 'male',
  score: 95
};

let JohnDupe = john;
console.log(JohnDupe); // {name: 'John Doe', gender: 'male', score: 95}
console.log(john); // {name: 'John Doe', gender: 'male', score: 95}
```

Okay, we have create a new variable `JohnDupe` and assign the value from `John`. What happen next if we modify the score of `JohnDupe`?

```js
johnDupe.score = 50;

console.log(JohnDupe); // {name: 'John Doe', gender: 'male', score: 50}
console.log(john); // {name: 'John Doe', gender: 'male', score: 50}
```

Notice that the value score of `John` is also changed! What actually happened? When we create `John` (new object), we are store the value in the memory within some address. And when we assign the value from `John` to `johnDupe`, actually instead of creating a copy of `John`, `JohnDupe` value is **referencing** the value (the address) of `John` in the memory.

To fix the problem above, we need to actually create a copy of `John` and assign it to a new variable and then we can change the score without affecting the original `John`.

```js
let john = {
  name: 'John Doe',
  gender: 'male',
  score: 95
};

let anotherJohn = {...john}

anotherJohn.score = 50;

console.log(john); // {name: 'John Doe', gender: 'male', score: 95}
console.log(anotherJohn); // {name: 'John Doe', gender: 'male', score: 50}
```

In the code above, we have copied `john` using spread operator and then assign it into `anotherJohn`. By creating new object, `anotherJohn` actually store the copied object in the memory with different address from `john`. `anotherJohn` is not referencing `john` anymore like before, they are completely a different entities. To prove that, take a look at the code below

```js
let person = {
  name: 'Nicola Tesla',
  gender: 'male',
};

let personDupe = person;

let anotherPerson = {
  name: 'Nicola Tesla',
  gender: 'male',
};

console.log(person === personDupe); // true
console.log(person === anotherPerson); // false
```

In the example above, we tried to compare equal `person === personDupe` which will be print `true` because `personDupe` is pointing the address from `person`. However when we tried to compare equal `person === anotherPerson` this will be print `false` because they are not the same object even if they are have the same properties and values.

This behavior is also same with `Array`.

```js
let fruits = ['apple 🍎', 'strawberry 🍓', 'banana 🍌'];

let fruitsDupe = fruits;

let anotherFruits = ['apple 🍎', 'strawberry 🍓', 'banana 🍌'];

console.log(fruits === fruitsDupe); // true
console.log(fruits === anotherFruits); // false
```

I have an analogy for having us easier to understanding "pass by reference" by assuming it as a google sheet / google docs.

Let's say a group of student is given an assignment by a teacher to put their own opinion about global warming. 🌎 The teacher want the format of the assignment to be in a single file.

John as the class president take the initiative to create a google docs so the student could collaborate easily. John then share the link with his classmates. Mary is the first student that make a change into the docs and add a bunch of paragraph of her idea about global warming. Later that night Suzie opened the google docs and add her own opinion, followed by Andy and so on. Finally after all the student is finished add their own opinion, John shared the google docs to the teacher. All is good and the class got an "A" for the assignment ✨

From the case above, no matter how many times google docs is modified by students in the end it still be only modifiying one file (master file).

So far so good! We are know what is exactly pass by reference is. ✨

![](https://media4.giphy.com/media/NaboQwhxK3gMU/giphy.gif?cid=ecf05e47r74r6mqcuymy2un7la55syohp2v3co6d0e9a5xyh&rid=giphy.gif&ct=g)

# Pass by Value

If you are already understanding pass by reference, you already understanding pass by value is. Primitive values such as numbers or strings will actually create a copy.

```js
const num = 10

function passByValue(val) {
  return val += 1
}


console.log('[passByValue]:', passByValue(num)) // [passByValue]: 11
console.log('[num]:', num) // [num:] 10
```

In the code above, we create a variable `num` with the value of 10. Also we create a function `passByValue` which take a value as parameter and add it by 1. If we were trying to run the code above, `passByValue` will return 11, however `num` variable is still 10. the original value of `num` is **not changed at all**.

---

I hope this short article will help you to understanding the concept of pass by reference and pass by value. The main difference between pass by value and pass by reference is, pass by value will **create a new space in memory and make a copy of a value**. Pass by reference however instead of making a copy, **the value stored in memory gets referenced**.


Understanding Pass by Reference and by Value is one of the most important concept in Javascript. Let's dive in. 🤿

Pass By Reference Vs Pass By Value


Today, we will discuss about another one of popular design pattern in programming, the Facade Pattern. 📖

Before we jump into the details of it, let us discuss some examples which will be solved by this particular Pattern.

As the name suggests, *Facade* it means the face of the building. 🏢

The people passing by the street and look at the building doesn't need to know, how is the wiring or the pipes, or other complexities of that building. It hides all the complexities of the building and displays a friendly face.

Other simple analogy that I can think of is a customer service. Anyone can ask the customer service regarding the inquiry, or complaint. The customer didn't need to ask shipping delay issue to the logistic directly, or complaint about the incorrect billing issue to the finance directly. They can just ask the customer service, and the customer service will be addresses this issue for them and give the information needed.

Okay, we got the idea of what is Facade Pattern is about. How can this related to programming?

Let's say our Product Manager told John to create a page to display a listing of the company products. In this case, John first instinct is immediately search the npm repository for third party API that allow him to quickly retrieve the data from the database. He is super confident about this third party API he found, and he start create the page with this API, and all goes smoothly for John. 🚗

After a while he also start to use this third page API all over the place, unfortunately for him during the weekend, his PM call John and tell him the application is broken because of a nasty bug, that has been produced by this third party API that John use. Because of the third party API is **tighly coupled within the application**, he spent a whole weekend fixing the bug in application. 🐞

![](https://media0.giphy.com/media/9Y5BbDSkSTiY8/giphy.gif?cid=790b76115f307fb3a0e79c8af9e7d22d48ac4b48a52f2d66&rid=giphy.gif&ct=g)

As we can see in the case above. Tighly coupled between the API that John use within the application is the source of the problem. How can we prevent this to be happening to us? Facade Pattern to the rescue! ✨

Let's take a look at the code below

```js
import React from 'react'
import axios from 'axios'

function ProductPage({ productId }) {
  const [data, setData] = React.useState(null)

  React.useEffect(() => {
    axios
      .get(`product_end_url/${productId}`)
      .then(res => res.json())
      .then(json => {
        setData(json)
      })
  }, [id])

  return data !== null && <div>{JSON.stringify(data, null, 2)}</div>
}
```

From the code above, we use `axios` library to fetch the product data for our component. This is not a problem for a small application. Now, imagine your application has grown larger and having a multiple, dozens or even hundreds components that are similar. they are fetching and posting data all over the place using `axios` directly. And later on, our team decided to drop `axios` dependency and switch to using `fetch`. Now we are in the same position as John. 🥹

Let's take a look at facade implementation below

```js
// API.js
import axios from 'axios'

export default class API {
  get(url) {
    return axios.get(url)
  }f
  post(url, options) {
    return axios.post(url, options)
  }
}

// DetailPage.js
import React from 'react'
import API from './API'

function ProductPage({ productId }) {
  const [data, setData] = React.useState(null)

  React.ProductPage(() => {
    API.get(`product_end_url/${productId}`)
      .then(res => res.json())
      .then(json => {
        setData(json)
      })
  }, [id])

  return data !== null && <div>{JSON.stringify(data, null, 2)}</div>
}
```

From the code above, we did some modification in our code. We add an extra layer in our code. We didn't access `axios` directly to fetch data rather than we are calling it using `get()` method, or `post()` for updating data from `API` class. 

The main purpose of API layer in this example is to encapsulate all of the logic for accessing API. So the consumer doesn't need to know the implementation detail of logic from `API` class, they just consume it and it will just work as expected. Let's change the implementation of `API` class to use `fetch`.

```js
// API.js
export default class API {
  get(url) {
    return fetch(url)
  }

  post(url, options) {
    return fetch(url, {
      method: 'POST',
      ...options,
    })
  }
}
```

We have successfully implemented facade pattern in this contrived example. By using facade pattern, our code not tighly coupled anymore. Not only make our code cleaner, modular, but also hide the logic complexities of the exposed method from end consumer which raise the readibility and make our code more easily to maintain.

I hope this brief introduction to facade pattern will give us a new perspective on how we design our code to make us a happy programmer. 🤓

What is a facade pattern in programming, why it is created and what purpose this pattern solve?

Introduction of Facade Pattern in Javascript


Today, we will discuss about one of popular design pattern in programming, the Builder Pattern.

Before we jump into the explanation, let's take a look at the code below

```js
class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const tonyStark = new User('Tony', 'Stark')
```

From the code above, we have a `User` class, and we create `User` object and then save it in a variable `tonyStark`. There is nothing wrong with this approach because we only have an object with two properties. However, what if we create an object with many properties that needed to be provided on object creation process?

```js
class User {
  constructor(firstName, middleName, lastName, suffix, phone, email, isActive, lastSeen) {
    this.firstName = firstName;
    this.middleName = middleName;
    this.lastName = lastName;
    this.suffix = suffix;
    this.phone = phone;
    this.email = email;
    this.isActive = isActive;
    this.lastSeen = lastSee;
  }
}

const tonyStark = new User('Tony', 'Mc', 'Stark', 'Mr', '+620382931232', 'tonystark@tonystark.com', true, '01-01-2021')

const johnDoe = new User('John', 'Mc', 'Doe', 'Mr', '+623123232323', 'johndoe@johndoe.com', true, '02-01-2021')
```

As you can see in the code above, the process of instantiating an object becomes very tedious and prone to error. We need to be careful with the ordering of the parameter we provide, if we are provide incorrect ordering this can become a source of bug in the application. We are human, and human are tend to make mistake. 🐞

That is why the Builder pattern is created. Builder pattern is a design pattern that aims to provide a flexible solution to various object creation problems by simplifying the construction of a complex object from its representation.

```js
class UserBuilder {
  constructor(firstName, middleName, lastName) {
    this.firstName = firstName;
    this.middleName = middleName;
    this.lastName = lastName;
  }

  setSuffix(suffix) {
    this.suffix = suffix;
    return this;
  }

  setPhone(phone) {
    this.phone = phone;
    return this;
  }

  setEmail(email) {
    this.email = email;
    return this;
  }

  setIsActive(isActive) {
    this.isActive = isActive;
    return this;
  }

  setLastSeen(lastSeen) {
    this.lastSeen = lastSeen;
    return this;
  }

  build() {
    if (!('firstName' in this)) {
      throw new Error('First Name is missing')
    }
    if (!('lastName' in this)) {
      throw new Error('Last Name is missing')
    }
    if (!('phone' in this)) {
      throw new Error('Phone is missing')
    }
    if (!('email' in this)) {
      throw new Error('Email is missing')
    }
    if (!('isActive' in this)) {
      throw new Error('isActive is missing')
    }
    if (!('lastSeen' in this)) {
      throw new Error('lastSeen is missing')
    }
    return new User(this.firstName, this.middleName, this.lastName, this.suffix, this.phone, this.email, this.isActive, this.lastSeen)
  }
}
const tonyStark = new UserBuilder('Tony', null, 'Stark')
  .setSuffix('Mr')
  .setPhone('620382931232')
  .setEmail('tonystark@tonystark.com')
  .setIsActive(true)
  .setLastSeen('01-01-2021')
  .build();

const johnDoe = new UserBuilder('John', 'Mc', 'Stark')
  .setPhone('623123232323')
  .setEmail('johndoe@tonystarkjohndoe.com')
  .setIsActive(true)
  .setLastSeen('02-01-2021')
  .build();
```

By utilizing builder pattern, now we can clearly see what is happening when creating User instances. This results in code that is easy to write and very easy to read and understand. We simplified our paramater by only providing `firstName`, `middleName`, and `lastName`. This not only makes it easier to understand, but also minimalize a human error when instatiating the object. We even add error handlers within our builder, we can specify which parameter that is required or optional. We create the object by chaining the setter method and finally call the `build()` method to finish create an object.

I hope this short article help you in understanding the builder pattern, and when to use it.✨

What is a build pattern in programming, why it is created and what purpose this pattern solve?

Practical Use of Builder Pattern in Javascript


[React Context API](https://reactjs.org/docs/context.html) is a feature that was introduced since React v.16.3, this feature give us as a React Developer a superpower to pass data through our components trees, which can be really useful for many scenarios. ✨

Before we dive in into how to use React Context, let's first we learn on why this feature is created at the first place. React application is usually consists of multiple components with a parent and children relationships. That means, the data from parent component will be passed to the child component using "props".

 > **Unidirectional data flow** is one of main concept of react, in nutshell changing state on a component will never affect its parent or its siblings, only the children will be affected.

This pattern will give us more confident in our code, because our code will be easier to be debugged and less prone to error. However, if there is any data from children component that needed to be shared between components, then the state needed to be [lifted up](https://reactjs.org/docs/lifting-state-up.html) into nearest parent component.

However in a big application this can be get messy very quickly. Imagine we need user token to be passed out to our deep nested component to call some API.

```js
const { useState, useEffect } from 'react';
const { getToken, getData } from './API/auth';

const App = () => {
  const [token, setToken] = useState(null);

  useEffect(() => {
    const userAuth = async () => {
      const _token = await getToken();
      setToken(_token)
    }
  }, [])

  return <Dashboard token={token} />
}

const Dashboard = ({token}) => {
  return (
    <div>
      <h1>My Dashboard</h1>
      <UserSummary token={token} />
    </div>
  )
}

const UserSummary = ({token}) => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const fetchUserData = async (t) => {
      const _userData = await getData(t);
      setUserData(_userData);
    }

    if (token) fetchUserData(token)
  }, [token])

  return(
    {
      !userData ? <h1>Loading...</h1> : <h1>{JSON.stringify(userData, null, 2)}</h1>
    }
  );
}
```

Let's take a look at the contrived code above. `UserSummary` component need a token to fetch user data. However to do that we need token that has been generated from `App` component. We pass token as prop into `Dashboard` and then pass it again into `UserSummary` component.

From the example above we know `Dashboard` component really did not need `token` prop. However because `UserSummary` is the children from `Dashboard` component, therefore we must pass `token` via `Dashboard`. It may be look okay-ish if there are only one or two level of nested component. However in real world scenario, we may need `token` for many components in our app that might need it. Are we going to pass the `token` prop all around the places? This problem is known as **prop drilling** 🛠

## React Context into the rescue

By using React Context, we are able to pass data through the component tree from parent to child components, without having to pass props down manually at each level.

There are four steps on how to using React Context:

- Create context using `createContext()`.

- Wrap the component using context provider from the created context before.

- Set the default value using `value` property on context provider.

- Get the value of context using `useContext` hooks.

Let's convert the example above to using React Context.

```js
const { useState, useEffect, createContext, useContext } from 'react';
const { getToken, getData } from './API/auth';

export const TokenContext = React.createContext();

const App = () => {
  const [token, setToken] = useState(null);

  useEffect(() => {
    const userAuth = async () => {
      const _token = await getToken();
      setToken(_token)
    }
  }, [])

  return (
    <TokenContext.Provider value={token}>
      <Dashboard />
    </TokenContext.Provider>
  )
}

const Dashboard = ({token}) => {
  return (
    <div>
      <h1>My Dashboard</h1>
      <UserSummary />
    </div>
  )
}

const UserSummary = ({token}) => {
  const value = React.useContext(TokenContext);
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const fetchUserData = async (t) => {
      const _userData = await getData(t);
      setUserData(_userData);
    }

    if (token) fetchUserData(token)
  }, [token])

  return(
    {
      !userData ? <h1>Loading...</h1> : <h1>{JSON.stringify(userData, null, 2)}</h1>
    }
  );
}
```

In the example above, we create a new context and store it as `TokenContext` variable. We wrap `App` component using `Provider` from `TokenContext`, and provide the initial value which is in our case is the `token`. Finally using `useContext()` hooks, we get the context value (which is `token`) in our `UserSummary` component.

By using React Context, we make our code ma lot more concise. Which also eliminates the props drilling problem. Aside from React context, there are also another options available like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) which is a global state management.

As a rule of thumb, if there are not a lot amount of state that needed to be managed globally, and the state not updated frequently we should use React Context instead of Redux. However if we are managing a large amount of state and updated frequently we might to consider to use Redux.

I hope this short article help you in you journey on learning React 🍻

Introduction of React Context. Learn how we can solve one of the common problem with React, the "Prop Drilling" 🧹

Introduction of React Context


One of my colleague asked me today on how to loop through objects in javascript, and I thought it will be a good opportunity to put in on a short article. 🤓

There are several of methods of looping through object in Javascript:

- `Objects.keys()`

- `Objects.values()`

- `Objects.entries()`

- `for ... in` loop

Let's look an object below

```js
const superHeroNicknames = {
  IronMan: "Mecha Man 🚀",
  Thor: "Thunder Bro 🌩",
  Hulk: "Green Guy 🟩",
};
```

We will use this data for the rest of this article. Let's jump to the explanation!

## 1. `Objects.keys()`

`Objects.keys()` was introduced within the release of ES6. As the name of the method says "keys", this methods will returns an array of object's keys.

```js
const keyRes = Objects.keys(superHeroNicknames);
for (let key of keyRes) {
  console.log(key + " ==> " + p[key]);
}

// Result:
// IronMan ==> Mecha Man 🚀
// Thor ==> Thunder Bro 🌩
// Hulk ==> Green Guy 🟩
```

This method is useful to get a list of the object properties quickly.

## 2. `Objects.values()`

`Objects.values()` was the opposite from `Objects.keys()`. instead returning a keys, it will returning an array of object's values. This method is very useful to get a list of all property values quickly.

```js
const keyVals = Objects.values(superHeroNicknames);
for (let val of keyVals) {
  console.log(val);
}

// Result:
// Mecha Man 🚀
// Thunder Bro 🌩
// Green Guy 🟩
```

## 3. `Object.entries()`

`Object.entries()` was introduced in ES8. This method will returns a list of an array of keys and values. This method is very useful to convert an object into an array. ✨

```js
const res = Objects.keys(superHeroNicknames);
for (let [key, val] of res) {
  console.log(`${key} ==> ${val}`);
}

// Result:
// IronMan ==> Mecha Man 🚀
// Thor ==> Thunder Bro 🌩
// Hulk ==> Green Guy 🟩
```

Please note that, this method is still not supported natively by Internet Explorer, if you are targeting those browsers polyfill may be required to do.

## 4. `for ... in` loop

`for ... in` loop method is an another way to loop through an object. This method is already supported for all browser, including Internet Explorer.

```js
for (let key in superHeroNicknames) {
  if (!superHeroNicknames.hasOwnProperty(key)) {
    //The current property is not a direct property of p
    continue;
  }
  console.log(`${key}: ${superHeroNicknames[key]}`);
}

// Result:
// IronMan ==> Mecha Man 🚀
// Thor ==> Thunder Bro 🌩
// Hulk ==> Green Guy 🟩
```

One caveat when using `for ... in` loop is **it will loop all the properties along the prototype chain**. Therefore, always make use of the `Object.hasOwnProperty()` to determine if the current property in iteration is really a property of the object. ❗️

---

That's it for this article. One final note, if you are only needed to check whether an object has a specific property, you can use `Object.hasOwnProperty()` rather than to do a loop through object and check it's properties one by one.


Quick Guide on How to loop object in Javascript

Loop through Object in Javascript


Everything in React is made up of components or parts of components and every components follow a certain lifecycle, almost like the lifecycle of any living thing on earth 🌎. They are born, grow, and eventually die.

The phase when they are born is called **mount**. When they are grow is called **update**. The last phase of death is called **unmount**.

This whole process is called the **Component Lifecycle**. For each of these phases, React renders certain built-in methods called lifecycle methods that control the behavior of components.

We can see on the diagram below all of React lifecycle methods associated with the mounting, updating, umounting of the component. *(diagram credit: [dan abramov](https://twitter.com/dan_abramov/status/981712092611989509?lang=en))*

![react lifecycle diagram](https://pbs.twimg.com/media/DZ-97vzW4AAbcZj?format=jpg&name=large)


I will explain in following section about each methods that available for each lifecycle in more detail.


# Mounting Lifecycle Methods

The mounting phase, is a phase where is the component is created and inserted into the DOM.
## 1. `constructor()`

`constructor()` is the very first method called as the component is created. This method is used for two purposes:

- To initialize the local state of a component

- To bind an event handling method to an instance

Here is an example of `constructor()` method in action:

```js
constructor(props) {
  super(props);
  this.state = { fruit: 'Apple 🍎' }
  this.eatFruit = this.eatFruit.bind(this);
}
```

Note that, `constructor()` is the first method invoked before the component is mounted into the DOM. We should not introduce any side effect in this method.

## 2.`getDerivedFromProps()`

`getDerivedStateFromProps()` is a new React lifecycle method as of [React 17](https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops) and designed to replace `componentWillReceiveProps()`.

The purpose of this function is to make sure that the state and props are in sync for when it is required.

`getDerivedStateFromProps()` lifecycle runs after the constructor method and before the `componentDidMount()` lifecycle run. This function accepts two paramenters `props` and `state`. We have to return an object to update state or null to indicate that nothing has changed.

To get better understanding of how `getDerivedStateFromProps()` works, let see the following code:

```js
import React from 'react';

class FavFruit extends React.Component {
  constructor() {
    super(props);
    this.state = {
      favFruit: 'Banana 🍌';
    }
  }

  render() {
    return(
      <h2>My Favorite Fruit is {this.state.favFruit}</h2>
    );
  }
}
```

When the component mount, we will see `My Favorite Fruit is Banana 🍌` is showed up in the browser. How can we change our state from `Banana 🍌` into `Apple 🍎` before `render()`? Actually, we can do it via `getDerivedStateFromProps()`.

```js
import React from 'react';

class FavFruit extends React.Component {
  constructor() {
    super(props);
    this.state = {
      favFruit: 'Banana 🍌';
    }
  }

  // Not Recommended. For explaining purpose only.
  static getDerivedStateFromProps(props, state) {
    return {
      favFruit: 'Apple 🍎'
    }
  }

  render() {
    return(
      <h2>My Favorite Fruit is {this.state.favFruit}</h2>
    );
  }
}
```

When the component mount, we will see `My Favorite Fruit is Apple 🍎` is showed up in the browser rather than `Banana 🍌`. How can this works? By returning an object, `getDerivedStateFromProps()` can utilize its data and doing update for `favFruit` before `render()` method is called to render the DOM. Noted that `getDerivedStateFromProps()` is takes 2 argument, the first argument is `props` and the second argument is `state`.

This short example is contrived and not really representative of the way how to use `getDerivedStateFromProps()`. But it’s helpful for understanding the basics. However, just because we can update state via `getDerivedStateFromProps()` it doesn’t mean we should. There are specific use cases on when we should use `getDerivedStateFromProps()`. If we use it in the wrong context, we’ll be solving a problem with the wrong tool 🔨. 

When should we use the `getDerivedStateFromProps()`? We must know why this method is created in first place. There are some cases where the component is needed update the internal state in response to a prop change. Component state in this manner is referred to as [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state).

## 3.`render()`

`render()` method is called after `getDerivedStateFromProps()` is called.

```js
import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <h1>Hello World! 🌎</h1>
  }
}
```

What we return in `render()` will be rendered into the DOM. In the example above we are returning `JSX`. But we can also return an `array of JSX` `string`, `number`, or if we don’t want to render anything, we could return a `boolean` or `null`

```js
import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return [
      <div key='1'>"Hello World! 🌎"</div>,
      <div key='2'>"Hello World! 🌎"</div>]
  }
}
```

Note that in example above we add `key` property in `jsx`. It is used by React to identify and keep track for which items in the list are changed, updated, or deleted.

## 4.`componentDidMount()`

After `render()` is called (The component is mounted into the DOM), `componentDidMount()` will be invoked. This method is the place when you should do a **side effect** thing. Like make a subscription to an API, data fetching, or maybe make a change into the DOM.

```js
import React from 'react';

class ChangeDocTitle extends React.Component() {
  componentDidMount() {
    document.title = 'Hello World 🌎';
  }

  render() {
    return<h1>This component will change the title of your current tab</h1>
  }
}

```

# Updating Lifecycle Methods

The update phase, is a phase where the component doing a re-render (updating the state) that has been triggered because of `state` or `prop` change.

## 1.`getDerivedFromProps()`

This method is also invoked when the component doing an update. Since I already give an explanation of `getDerivedFromProps()` on mounting phase, please refer on that 🤓. Note that `getDerivedFromProps()` is invoked when the component is mounted and when the component is doing re-render.

## 2.`shouldComponentUpdate()`

After `getDerivedProps()` is called, `shouldComponentUpdate()` is invoked. This method accepts two arguments, the first argument is the `nextProps` and the second argument is `nextState`.

The purpose of this function is to determine is wheter the component is will be re-render by returning `true` or not by returing `false`.

```js
import React from 'react';

class FavFood extends Component {
  constructor(props) {
    super(props);
    this.state = {
      favMeal: 'French Fries 🍟'
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // let's assume that the currentProps in this example { favDrink: 'Cola 🥤' }
    if (nextProps.favDrink == 'Cola 🥤') {
      // The component is won't be updated if the currentProps.favDrink is still same with the nextProps.favDrink even when the nextState is different with currentState
      return false;
    } else {
      return true;
    }
  }

  render() {
    return (
      <div>
        <h1>My Fav Drink is: {this.props.favDrink}</h1>
        <h1>My Fav Meal is: {this.state.favMeal}</h1>
        <button onClick={() => {this.setState({favMeal: 'Burger 🍔'})}}>Change My Meal! 🍽</button>
      </div>
    );
  }
}
```

Notice that in the contrived example above, we can click `Change My Meal! 🍽` to change the state of `favMeal` however in `shouldComponentUpdate()` we make a conditioning where if the `nextProps` of `favDrink` is still `Cola 🥤` (still the same with `currentProps`) then **the component will be not be updated**. 

`shouldComponentUpdate()` is a powerful method. However as proverb says *"With Great Power Comes Great Responsibility"*, we must treat this method with caution. If we didn't careful with our conditioning and accidentally returning `false`, the component is not updated and this can be a problem and it will be hard to debug it 🐞.

## 3.`render()`

`render()` method is called immediately depending on the returned value from `shouldComponentUpdate()`, which defaults to `true`.

## 4. `getSnapshotBeforeUpdate()`

Once `render()` is called, `getSnapshotBeforeUpdate()` is invoked just before the DOM is being rendered. It is used to store the previous values of the state after the DOM is updated. Any value returned by `getSnapshotBeforeUpdate()` will be used as a parameter for `componentDidUpdate()` which will be explained after this. `getSnapshotBeforeUpdate()` accepts two arguments which is `prevProps` and `prevState`.

```js
import React from 'react';

class FavSuperHero extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mySuperHero: 'Thor ⚡️' }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ mySuperHero: 'IronMan 🚀' })
    }, 1000)
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById('prevHero').innerHTML = `Previous Super Hero: ${prevState.mySuperHero}`
  }

  componentDidUpdate() {
    document.getElementById('newHero').innerHTML = `New Super Hero: ${prevState.mySuperHero}`
  }

  render() {
    return(
      <div>
        <h1 id='prevHero'></h1>
        <h1 id='newHero'></h1>
      </div>
    );
  }
}
```

From the code above we can get the `prevState` and showing `Previous Super Hero: Thor ⚡️` which is the old state that have been updated into `New Super Hero: IronMan 🚀` which is the current state.

Note that, it is highly recommended to never directly to set state in `getSnapshotBeforeUpdate()`, otherwise it will trigger `render()` method.

## 5. `componentDidUpdate()`

`componentDidUpdate()` is invoked as soon as the `render()` method called (update happens). The common use case for the `componentDidUpdate()` method is to updating the DOM in response to `prop` or `state` changes. This method accept three arguments, the first is `prevProps`, second is `prevState`, and the third argument is the **value that has returned from `getSnapshotBeforeUpdate()` method**.

We can also call `setState()` within this method. However, please be careful incorrect usage of setState within this `componentDidUpdate()` can cause an infinite loop. Note that, you will need to wrap `setState()` in a condition to check for state or prop changes from previous one.

```js
componentDidUpdate(prevProps) {
  if (this.props.accessToken !== null && prevProps.accessToken !== null) {
    this.getUser(accessToken)
    .then(user => {
      if (user) {
        this.setState(user);
      }
    })
    .catch(e => console.log('Error fetching user data'))
  }
}
```

In the example above, we do a condition where if the `accessToken` is not `null`, we can fetch the user data and then updating our user state. If we are does not have access token, `componentDidUpdate()` will not call `getUser()` method, hence preventing to set the `user` state.

# Unmounting lifecycle method

The unmounting phase, is a phase where the component will be unmounted (destroyed) from the DOM.

## 1. `componentWillUnmount()`
This method will be called when the component is unmounted (destroyed) from DOM 💣. This is the place where you perform for any cleanup method, cancel the network request or purge the unwanted subscriptions that was created in the `componentDidMount()` method.

```js
import React from 'react';

class Building extends React.Component {
  componentWillUnmount() {
    console.log('The building is destroyed 💥');
  }

  render() {
    return <h1>My Building 🏢</h1>;
  }
}

class DestroyBuilding extends React.Component {
  constructor(props) {
    super(props);
    state = {
      showBuilding: true
    };
  }

  render() {
    let building;
    if (this.state.showBuilding) {
      building = <Building />
    };

    return(
      <div>
        {building}
        <button onClick={() => this.setState(showBuilding: false)}>Detonate Building 💣</button>
      </div>
    );
  }
}
```
When you click `Detonate Building 💣` button, `'The building is destroyed 💥'` text will be logged into our console.


Learn about lifecycle in React component.

Lifecycle in React Component


You are a developer with previous experience using React, and you are comfortable using React class components. You're so comfortable with class components that switching to functional components sounds daunting. How will you manage the situation? How can you access the React component lifecycle?

If this sounds like you, then this guide will help you start transitioning your class components into functional components. React hooks provide the ability to use state and lifecycle functions inside functional components.

We'll cover the two built-in React hooks: `useState` and `useEffect`.

## useState

The main difference between class and functional components is the fact that class components have state whereas functional components have no state. The useState hook lets us add a local state to a functional component. This hook holds the state between re-renders.

Let's start by comparing the class component and functional component.

```js
import React from 'react';

class Increment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
    this.setCounter = this.setCounter.bind(this);
  }

  setCounter() {
    this.setState({
      counter: this.state.counter + 1
    });
  }

  render() {
    return(
      <div>
        <h1>Counter: {this.state.counter}</h1>
        <button onClick={this.setCounter}>Increment</button>
      </div>
    )
  }
}
```

In code above, we have a stateful component. Since you are already familiar with class components, let's keep this explanation brief.

- A constructor is created at the start of the component and sets the initial state.

- `counter` is the only value in this example and is initially set to `0`.

- To update the state, `this.setState` is called in `setCounter` function.

- The `onClick` event in the button tag calls `setCounter`, allowing the state to be updated.

How we can we achieve the same thing in stateless component?

```js
import React, { useState } from 'react';

const Increment = () => {
  const [counter, setCounter] = useState(0);

  function incrementByOne() {
    setCounter(counter + 1);
  }

  return (
      <div>
        <h1>Counter: {counter}</h1>
        <button onClick={incrementByOne}>Increment</button>
      </div>

  );
}
```

Now let's describe what happens in this stateless component:

- Importing the `useState` hooks.

- Declaring a state variable for the component. We are using [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to get the **getter** and **setter** methods, and the parameter passed in the `useState` hooks is the **initial value** for our state. In this case `counter` is the getter and `setCounter` is the setter and the initial value is `0`.

- To update the state, `setCounter` is called in `incrementByOne` function.

- The onClick event in the button tag calls `setCounter`, allowing the state to be updated.

With this, we finished replicating the state management from class component into functional component. Hooray!

![react lifecycle graph](https://media2.giphy.com/media/hEIuLmpW9DmGA/200w.webp?cid=ecf05e479s6el8ohwsda2r5eeglab95xx8i8jymh2ywoeppg&rid=200w.webp&ct=g)

## useEffect

The `useEffect` hook allows us to implement lifecycle methods to tell the component to perform an *side effect* after rendering. The different types of effects are not limited like changing document title, adding animation or music, data retrieval, and subscriptions. I have write the article about [lifecyle method](/blog/lifecycle-in-react-component) if you need some refresher.

As mentioned earlier, the `useEffect` hook allows us to use React's lifecycle methods in stateless components. We'll look at mirroring the effects of `componentDidMount` and `componentDidUpdate`.

```js
import React from 'react';

class FavoriteVehicle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      vehicle: 'Walk 🏃'
    };

    componentDidMount() {
      console.log(`Component mounted | ${this.state.vehicle}`);
    }

    componentDidUpdate() {
      console.log(`Component updated | ${this.state.vehicle}`);
    }

    changeToCar() {
      this.setState({ vehicle: 'Car 🚗' })
    }

    changeToRocket() {
      this.setState({ vehicle: 'Rocket 🚀' })
    }

    render() {
      return(
        <div>
          <h1>My Fav Vehicle: {this.state.vehicle}</h1>
          <button onClick={changeToCar}>Change to Car 🚗</button>
          <button onClick={changeToRocket}>Change to Rocket 🚀</button>
        </div>
      );
    }
  }
}
```

`componentDidMount` will be called as soon as the component is mounted. In our example, when `FavoriteVehicle` is rendered, the string `"Component mounted | Walk 🏃"` will appear in console.

When you click the `"Change to Car 🚗"` button, `componentDidUpdate` is called (because the state has changed), the console will print `"Component updated | Car 🚗"`. If you click the `"Change to Rocket 🚀"` button `componentDidUpdate` will be called again. `componentDidUpdate` will be executed every time the component is re-rendered.

How we can achieve the same thing in functional component? Let's see the code below.

```js
import React, { useState, useEffect } from 'react';

const FavoriteVehicle = () => {
  const [vehicle, setVehicle] = useState('Walk 🏃');

  useEffect(() => {
      console.log(`Component mounted | ${vehicle}`);
  }, []);

  useEffect(() => {
    console.log(`Component updated | ${vehicle}`);
  }, [vehicle])

  return(
    <div>
      <h1>My Fav Vehicle: {vehicle}</h1>
      <button onClick={() => setVehicle('Car 🚗')}>Change to Car 🚗</button>
      <button onClick={() => setVehicle('Rocket 🚀')}>Change to Rocket 🚀</button>
    </div>
  );
}
```

Let's describe what happened here:

- Importing `useState` and `useEffect` hooks

- We called `useEffect` in our functional component. `useEffect` accept two parameters, the first parameter is **the effect callback**, and the second parameter is **dependency array**. Notice that we called it twice in this example. When we called it the first time, we pass empty array, and on the second time we pass `vehicle` as our dependency. There is a subtle difference in both of these `useEffect` invocations.

- If we pass empty array to our `useEffect` invocation **it will only run once**, therefore it will behave same as `componentDidMount`. Otherwise when we pass `vehicle` on dependency list, our component will **re-render every time** if the value of `vehicle` is changed, it will behave same as `componentDidUpdate`.

- When the component is rendered we will see both `"Component mounted | Walk 🏃"` and `"Component updated | Walk 🏃"` is logged in console. And when we tried to click `"Change to Car 🚗"`, we will see `"Component updated | Car 🚗"` is logged in console. This happen because we pass `vehicle` in our dependency array in `useEffect` hook. Note that `"Component mounted | Walk 🏃"` is only logged once this happen because we didn't pass anything in our dependency array.

Another thing to note is, if we only pass one parameter (the effect callback) into `useEffect`, the effect will be **always executed** after every render. There will be a nasty bug in your code if you're trying to set the state in `useEffect` without putting the state in the dependency array. Let's say maybe you're fetching userData from API and tried to save the returned data into your state. You will have an infinite re-render of your component! 🧨 *ps: When I first learn about useEffect this happen to me. I tell you so hopefully you are not suffer the same thing that I experienced. LOL'*

The last thing that I want to mentioned is you also can mimic `componentWillUnmount` behavior in `useEffect` by having a return function in your effect callback. `useEffect` will invoke this function when unmounting the component. This is useful when you want to unsubscribe to some listener API or to cleaning up async effect in your component.

That's it for the introduction of `useState` and `useEffect`. I hope this article will help you in your journey to understanding react hooks 🍻.


Introduction of React hooks 🪝 in functional component and it's class component equvalent

Introduction of useState and useEffect


Have you ever created a password, and there we were asked to use capital letters, numbers, and symbols? And if so, how could we do it? Are we gonna split the input string, and then check for each character if all the criteria is matched? Let's see the implementation below for validating password.

```js
function validatePassword(input) {
  // list of special character
  let specialChars = ['!','@','#','$','%','^','&','*','(',')','_','+','-','=','[',']','{','}',';','~','?','/','<','>',',','.','|','\\', ':'];

  const validLength = input.length > 6 ? true : false;
  let validCapital = false;
  let validNumber = false;
  let validSpecialChar = false;
  const isSpecialCharacter = (char => specialChars.includes(char));
  const isCapitalcase = (char => char.toUpperCase() === char);
  const isNumber = (char => [1,2,3,4,5,6,7,8,9,0].includes(parseInt(char)))

  const _input = input.split('');
  _input.forEach(_input => {
    if(isNumber(_input)) validNumber = true;
    if(isSpecialCharacter(_input)) validSpecialChar = true;
    if(!isNumber(_input) && !isSpecialCharacter(_input) && isCapitalcase(_input)) validCapital = true;
  });

  if (validLength && validCapital && validNumber && validSpecialChar) {
    return true;
  } else {
    console.log('error creating password!');
    return false;
  }
}
```

It's *complex*, right? Lo and behold the power of regex

```js
function validatePasswordRegex(input) {
  return /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/.test(input);
}
```

Our code will become so much clearer in an instant ✨. *(and in so mysterious way...)*
Worry not! I will give you an introduction about regex in this article.

Regex stands for **Regular Expression** and it is basically an easy way to define a pattern of text. Regex is often used for input validation or text identification.

At first glance, Regex is like a gibberish text. However for those who know how to use it, it will be one of powerful tools in their disposal 🛠.

I have listed some commonly used tokens in Regex to help us. 📖

| Tokens          | Represent                      |
| :-----------:   | :----------------------------- |
| \d              | Any Digit                      |
| \D              |	Any Non-digit character        |
| .	              | Any Character                  |
| &#92;.          | Period                         |
| [abc]	          | Only a, b, or c                |
| [^abc]	        | Not a, b, nor c                |
| [a-z]	          | Characters a to z              |
| [0-9]	          | Numbers 0 to 9                 |
| \w	            | Any Alphanumeric character     |
| \W	            | Any Non-alphanumeric character |
| {m}	            | m Repetitions                  |
| {m,n}	          | m to n Repetitions             |
| *	              | Zero or more repetitions       |
| +	              | One or more repetitions        |
| ?	              | Optional character             |
| \s	            | Any Whitespace                 |
| \S	            | Any Non-whitespace character   |
| ^…$	            | Starts and ends                |
| (…)	            | Capture Group                  |
| (a(bc))	        | Capture Sub-group              |
| (.*)	          | Capture all                    |
| (abc&#124;def)	| Matches abc or def             |

First thing to note, when we are using regex **everything is a character** and we are writing patterns to match a specific sequence (pattern).

```js
// alphabet abc
/abc/.test('abcd'); // match ✅
/abc/.test('abc'); // match ✅
/abc/.test('abcde');  // match ✅
```

Look at the example above, `abc` is our pattern, we are done our first regex 🎉. It's as simple as the common letters on each line.

```js
// number 123
/123/.test('bgh123'); // match ✅
/123/.test('const number = 123'); // match ✅
/123/.test('1 + 2 + 123 = 125');  // match ✅
```

We can see `123` (which is number) is also treated as character in regex.

```js
// dot .
/...\./.test('asd.a'); // match ✅
/...\./.test('12345'); // skip ❌
/...\./.test('123.s'); // match ✅
```

`.` dot operator in regex is also known as a **wildcard** because it can match any character. However in the example above we can use `\.` to actually specify the `.` ("dot") to be in our pattern.

```js
// brackets ['asdf']
/[FfR]oot/.test('Foot'); // match ✅
/[FfR]oot/.test('Root'); // match ✅
/[FfR]oot/.test('foot'); // match ✅
/[FfR]oot/.test('Moot'); // skip ❌
```

While the `.` metacharacter is pretty powerful to match all the character, we need to somehow add a boundary to match to specific characters. We could do that by using `[]` brackets notation. In our example we use `[FfR]` as our pattern, therefore only F, f or R letter will be match and nothing else.

```js
// inverse within brackets [^]
/[^FfR]oot/.test('Moot'); // match ✅
/[^FfR]oot/.test('Boot'); // match ✅
/[^FfR]oot/.test('Foot'); // skip ❌
```

We also could use an `[^]` "inverse within brackets" to excluding specific characters, if there is any character in our test that are same as the characters inside our brackets it will be not match.

```js
// Character ranges
/[A-D][c-h][b-e]/.test('Ade'); // match ✅
/[A-D][c-h][b-e]/.test('Dfd'); // match ✅
/[A-D][c-h][b-e]/.test('Erd'); // skip ❌
```

We can specify a "range" of sequential characters by using the `-` "dash" within `[]` "brackets" to indicate a character range. We could specify a digit `[1-7]`, or even with inverse notation `[^a-f]`. Notice that `a-z` "lowercase" and `A-Z` "uppercase" are different, so make sure we put it both if we want all the alphabets to be match. `[A-Za-z0-9_]` this pattern is equivalent for `\w` which stands for match for any alphanumeric characters. And `\W` can be used to specify non-alphanumeric characters.

```js
// Curly brace repetitions
/hel{3}o/.test('helllo'); // match ✅
/hel{3}o/.test('hello'); // skip ❌
/hel{3,7}o/.test('hellllllo'); // match ✅
/hel{3,7}o/.test('hello'); // skip ❌
```

We can speficy a number of repetitions for a character we want to match by using `{a, b}` where `a` is a minimal number of repetitions, and `b` is maximum number of repetitions. If `b` is not specified, then the repetitions must be exactly same as `a`. In our example we specify `hel{3}o`, which means `l` character must be repeated 3 times to be match, otherwise it will be not match. `hel{3,7}o` means `l` character must be repeated between 3 until 7 to be match.

```js
// Plus (+) and star (*) quantifier
/o+l*m+/.test('ooolllmm'); // match ✅
/o+l*m+/.test('ooomm'); // match ✅
/o+l*m+/.test('mmm'); // skip ❌
/o*l*m+/.test('mmm'); // match ✅
```

How can we match the character to be at least 1 or more character that it follows? Meet the `+` "plus" quantifier. There are also `*` star quantifier, which can be used to represents either 0 or more of the character that it follows.

```js
// Question Mark (?) optional
/\d+ files? is found/.test('1 file is found 💾'); // match ✅
/\d+ files? is found/.test('4 files is found 💾'); // match ✅
/\d+ files? is found/.test('No files is found 💾'); // skip ❌
```

In the example above, we could give our pattern more flexibility by specify an optional character using `?` "question mark" into our patterns. In our example we using `?` to specifying wheter our statement is singular or plural. "1 file found" (singular) and "4 files is found" (plural), and both is matching ✅.

```js
// Whitespaces
/white\s+space/.test('white space'); // match ✅
/white\s+space/.test('white     space'); // match ✅
/white\s+space/.test('whitespace'); // skip ❌
/white\S+space/.test('whites space'); // skip ❌
/white\S+space/.test('whites_space'); // match ✅
```

Do you know that space, tab, newline, carriage return, form feed and vertical tab characters are called "whitespace characters"? We could use `\s` to specify a "whitespace" in our pattern. There are also `\S` (with capital "S") to specify "non-whitespace" character (e.g: alphanumeric and special characters).

```js
// Hat (^) and dollar sign ($) - Start ... End
/^Start your day with orange 🍊$/.test('Start your day with an orange 🍊'); // match ✅
/^Start your day with/.test('Start your day with an apple 🍎'); // match ✅
/with orange 🍊$/.test('Finish your day with an orange 🍊'); // match ✅
/^Start your day with 🍊/.test('    Start your day with an orange 🍊'); // skip ❌
/^Start your day with orange 🍊$/.test('   Start your day with an orange 🍊  '); // skip ❌
```

So far we are matching the text regardless the position of the character, whether it is on start, middle or near the end of the text. How could we make a boundaries to search the text that must be start in ... and end with ... In that case, we use `^` "hat" and `$` to match a pattern. In our example above `Start your day with orange 🍊` we see that the pattern that didn't start with `^` is can be match regardless of whitespace or even incorrect sentence, it is also same with the pattern that didn't end with `$`. One last note `[^]` (inversion) is *different* than `^` (start with).

```js
// Matching Group (...)
('js_basic.txt').match(/^(js_.+)\.txt$/); // capture: "js_basic" ✅
('js_intermediate.txt').match(/^(js_.+)\.txt$/); // capture: "js_intermediate" ✅
('js_101.xls').match(/^(js_.+)\.txt$/); // capture: null ❌
('python.txt').match(/^(js_.+)\.txt$/); // capture: null ❌
```

Is it possible to extract data from our matching text so we can use that? 🙋🏻‍♀️ Yes it is! We can do that by defining groups of characters and capturing them using the  `(...)` "parantheses". In our example above, we write a simple pattern that captures everything from the start of `js_` until the extension `.txt`.

```js
// Matching Nested Group (..(...))
('18200 BaldwinAve').match(/(\d+ (\w+))/); // capture: "18200 BaldwinAve" and  "BaldwinAve" ✅
('17200 FairwayDr').match(/(\d+ (\w+))/); // capture: "17200 FairwayDr" and "FairwayDr" ✅
```

We also could do a match a nested group by using `(..)` inside another `(...)`. In our example above, we are do a match for a street number the outer group is able to capture full address. And the inner group we are able to capture the street name. 🏘

```js
// Using quantifier inside our group match (...*)
('1376x768').match(/(\d+)x(\d+)/); // capture: "1366" and  "768" ✅
('400x200').match(/(\d+)x(\d+)/); // capture: "400" and  "200" ✅
```

In the example above, using regex we can get the value of `width` and `height` of screen resolution. Note that we are using two group match in our pattern `\d+` is used to catch all the number.

```js
// Conditional using "pipe" |
/(Apple🍎|Orange🍊|Pineapple🍍) is my favorite fruit/.test('Apple🍎 is my favorite fruit'); // match ✅
/(Apple🍎|Orange🍊|Pineapple🍍) is my favorite fruit/.test('Pineapple🍍 is my favorite fruit'); // match ✅
/(Apple🍎|Orange🍊|Pineapple🍍) is my favorite fruit/.test('Strawberry🍓 is my favorite fruit'); // skip ❌
```

We also can specify a conditioning in our regex pattern by using `|` "pipe". In this example we try to match whether our favorite fruit is either `Apple🍎`, `Orange🍊`, or `Pineapple🍍`. Other than that will be no match.

![](https://media1.giphy.com/media/xT8qBepJQzUjXpeWU8/giphy.gif?cid=ecf05e47zlcz90gn7b8357bres65p3hfg7fg23i357e8e6td&rid=giphy.gif&ct=g)

Congrats for making this far! 🎉 You are now know the basic of regex. Let's see our first regex in this article for validating password. Let's glance it once more.

```js
function validatePasswordRegex(input) {
  return /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/.test(input);
}
```

Are you able to know what this regex do now? If you are able to read it, congrats! 🎉 Let's walkthrough together.

Our `validatePasswordRegex()` has 4 condition for validating a password.

- `(?=.*\d)` is used to match whether there is a number in our input.

- `(?=.*[a-z])` is used to match if there is a lowercase character in our input.

- `(?=.*[A-Z])` is used to match if there is an uppercase character in our input.

- `.{6,}` it used to make sure if there are minimal 6 character in our input.

I hope this article could help you in your journey of learning regex 🤓. You could try [regexr](https://regexr.com/) if you want messing around with it. Thank you for reading and good luck! ✨

What is Regex? and What Are Its Benefits in Programming? Let's learn together!

Blog posts on my experience as a software engineer ✍🏼

Advanced Type Features in TypeScript

Leveraging Generics in TypeScript

Utilizing Classes in TypeScript

Exploring Interfaces in TypeScript

Mastering Functions in TypeScript