DEV Community: Yohanes Setiawan

Find Intersection of Two Arrays

Yohanes Setiawan — Wed, 02 Nov 2022 17:45:34 +0000

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

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 through 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:

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. ✨

Pass By Reference Vs Pass By Value

Yohanes Setiawan — Thu, 04 Aug 2022 21:55:00 +0000

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!

Pass by Reference

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

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?

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.

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

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.

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. ✨

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.

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.

Introduction of Facade Pattern in Javascript

Yohanes Setiawan — Fri, 29 Jul 2022 22:31:00 +0000

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. 🐞

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

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

// 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.

// 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. 🤓

Practical Use of Builder Pattern in Javascript

Yohanes Setiawan — Fri, 10 Jun 2022 17:41:05 +0000

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

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?

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.

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.✨

Introduction of React Context

Yohanes Setiawan — Wed, 08 Jun 2022 21:54:42 +0000

React Context API 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 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.

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.

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 or MobX 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 🍻

Loop through Object in Javascript

Yohanes Setiawan — Fri, 27 May 2022 17:31:35 +0000

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

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.

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.

const keyVals = Objects.value(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. ✨

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.

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.

Introduction to Regex

Yohanes Setiawan — Sun, 24 Apr 2022 17:02:14 +0000

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.

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

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
\.	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\|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).

// 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.

// 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.

// 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.

// 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.

// 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.

// 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.

// 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.

// 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.

// 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 ✅.

// 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).

// 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).

// 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.

// 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. 🏘

// 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.

// 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.

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.

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 if you want messing around with it. Thank you for reading and good luck! ✨

Lifecycle in React Component

Yohanes Setiawan — Thu, 14 Apr 2022 23:37:10 +0000

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)

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:

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 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:

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().

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.

3.`render()`

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

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

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.

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.

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.

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.

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.

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.

Introduction of useState and useEffect

Yohanes Setiawan — Fri, 01 Apr 2022 00:14:52 +0000

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.

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?

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 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!

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.

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.

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.

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 🍻

DEV Community: Yohanes Setiawan

Find Intersection of Two Arrays

Pass By Reference Vs Pass By Value

Pass by Reference

Pass by Value

Introduction of Facade Pattern in Javascript

Practical Use of Builder Pattern in Javascript

Introduction of React Context

React Context into the rescue

Loop through Object in Javascript

1. Objects.keys()

2. Objects.values()

3. Object.entries()

4. for ... in loop

Introduction to Regex

Lifecycle in React Component

Mounting Lifecycle Methods

1. constructor()

2.getDerivedFromProps()

3.render()

4.componentDidMount()

Updating Lifecycle Methods

1.getDerivedFromProps()

2.shouldComponentUpdate()

3.render()

4. getSnapshotBeforeUpdate()

5. componentDidUpdate()

Unmounting lifecycle method

1. componentWillUnmount()

Introduction of useState and useEffect

useState

useEffect

1. `Objects.keys()`

2. `Objects.values()`

3. `Object.entries()`

4. `for ... in` loop

1. `constructor()`

2.`getDerivedFromProps()`

3.`render()`

4.`componentDidMount()`

1.`getDerivedFromProps()`

2.`shouldComponentUpdate()`

3.`render()`

4. `getSnapshotBeforeUpdate()`

5. `componentDidUpdate()`

1. `componentWillUnmount()`