
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" 🧹

Hi! I'm Yohanes

Latest Articles

Find Intersection of Two Arrays

Pass By Reference Vs Pass By Value

Introduction of Facade Pattern in Javascript

Practical Use of Builder Pattern in Javascript

Introduction of React Context