Forem: João Guilherme do Amaral Vequiato

You DON'T know Reactjs - Part I

João Guilherme do Amaral Vequiato — Tue, 11 Apr 2023 15:46:39 +0000

A brief reflection

One thing that deeply bothers me these days are course sellers who promise easy jobs and exorbitant earnings, but whose content offered is so shallow and simplistic that they only teach people to be mere spectators of code - to look, copy, and paste. However, this is not always the instructors' fault.

In fact, there are several courses on the market that are excellent for getting a kick-start and allowing you to quickly position yourself in the job market - I myself achieved this through this method.

However, many aspiring developers (and some even with senior positions) are content to just consume these contents, replicate, make a to-do list, and that's it. They don't know what happens behind the scenes.

Not that understanding the intricacies behind everything is essential to work in the field, but it is certainly essential for you to stand out as a sought-after developer in the job market.

Some time ago, I helped two friends take tests for a first job who had done courses that promised that you would become full-stack in 4 weeks. It's scary to see that these courses make people complete 5 different projects and they leave the course without knowing the basics.

It's a huge false sense of learning, and the method is always the same: you see the guy coding a project x, do the same while watching and you're done. You have your first system, easy and simple as baking a cake.

Thinking about this, I decided to write this article to assist - those who want to get out of mediocrity - and to help Reactjs developers understand, at least a little, what React does behind the scenes.

Let's go?

Fundamental concepts of Reactjs

Can you tell me in a few words what React is today? - take a minute and try to answer in your own words.

I don't want to get into technical definitions here, so I'll use my own words too.

React is a library that allows you to write performant and easy-to-maintain code through the concept of reusable components, where you can describe user interfaces declaratively, without worrying about implementation details.

Is it difficult to understand? Let's try an easier definition:

React is a badass library for writing performant and easy-to-maintain declarative UIs.

Declarative programming vs imperative programming

But what would be a declarative way of writing a UI?

The declarative way is the way React works. Basically, you declare what you would like to happen in the user interface when a certain action is called.

Unlike the imperative way, which instead of describing, you have to command that it be done.

Let's use an example with React (in a declarative way) and the same example of how it would be in an imperative way.

Declarative way:

import { useState } from "react";

const MyApp = () => {
    const [isLoading, setIsLoading] = useState(false);

    const buttonClickHandler = () => {
        setIsLoading(true);
    }

    return (
        <button onClick={buttonClickHandler} disabled={isLoading}>
            {isLoading ? 'Loading...' : 'Click me'} 
        </buton>
    )
}

In the example above, we declare that when the user clicks the button, the user interface should update the text to "loading" and disable it.

We don't have to worry about how it will do this, just show it which interface we want when a certain action occurs and it will figure out how to make it happen.

How would the same code look in an imperative way?

const button = document.createElement('button');

const buttonClickHandler = () => {
    button.disabled = true;
    button.textContent = 'Loading...';
}

button.addEventListener('click', buttonClickHandler);

document.body.appendChild(button);

We need to worry about every detail we want when the user clicks the button, such as disabling it manually, changing its text manually, and even creating the button itself and inserting it into the DOM.

With our friend React, all of this logic is abstracted.

HTML and the DOM

In the end, everything we do in React serves a single purpose: rendering HTML elements in the DOM (Document Object Model).

What is the DOM?

The DOM is a hierarchical tree representing HTML elements, used by web browsers.

In simpler terms, it's everything the user sees on the browser screen.

It's the <p>, <h1>, <div>, and <button> tags and their respective children that you put on your webpage.

When you write an HTML page (or your React components, which will ultimately also be an HTML page), this is how your browser interprets each element.

This is the DOM.

But why React?

Javascript is the easiest and most common way to manipulate the DOM, whether to add or remove elements, add or remove attributes, add interactivity, among others.

However, directly interacting with the DOM and "painting" these interactions on the screen is very expensive, which can bring a poor experience and many performance problems.

React - in addition to making our lives easier with the form of declarative programming and the possibility of reusing components - has a very intelligent algorithm of reconciliation allied with its Virtual DOM, which can make this process much more performative by making the minimum possible changes directly in the user's DOM.

But that's a topic for part II of this article series (~~if it exists~~).

Comment below what you thought of this content, if you liked the way it was written and if you want me to keep writing about it.

See ya! 👋

Did you like it? Check out other articles written by me:

Maximize your learning and productivity with this Chrome extension
React Render Props Pattern
6 React questions for technical interviews and their answers
Understanding closures
Understanding classes and prototypes
Understanding Higher Order Function

Maximize your learning and productivity with this Chrome extension

João Guilherme do Amaral Vequiato — Mon, 10 Apr 2023 14:37:15 +0000

PinMyVideo

Watch your favorite videos in a popup while browsing the web without losing focus.

The problem

I don't know about you, but whenever I'm working, I like to play some interesting podcast or technology classes and workshops to listen to while not listening to music.

The big problem is that I can't focus on both things at the same time, so 90% of my focus is on the task I'm working on and 10% on the video I'm listening to.

Sometimes, I even get lost in what I'm listening to and focus only on the task, forgetting that there's a video playing.

And then, when I hear something interesting in the video or something I don't know yet and want to learn, I immediately stop the task to go to the video and see what's being explained.

The problem with this is that I always end up losing focus on the task when I choose to go to the video, and sometimes I spend minutes searching for the video among thousands of open tabs.

That's when I thought: what if I did something that could keep the video playing without having to keep the video tab open, while I do my tasks normally, just like YouTube Premium for mobile or Twitch?

So, whenever I heard something interesting, the video would already be there in front of me to watch. Or even while thinking about my task, the video would also be there in front of me to follow.

The solution

I made this extension and tested it for a week to see if it would be useful for me. I spent a week watching JavaScript classes on video.

The result using the extension was that not only did I notice an improvement in learning the subject matter of the video, as the video was always there in front of me, so it didn't become just a lost audio that I forgot was playing (I am a very visual person), but I also completed more tasks than usual, as I didn't have to keep searching and going back to the video tab all the time, searching for the exact minute of the subject I wanted to listen to and losing minutes in the video tab to go back to the task I was doing (and often forgetting where I was in the task).

So I decided to make this extension available to everyone, as it helped me and it can help others too.

I called this extension PinMyVideo, and its appeal is precisely this: "Watch your favorite videos in a popup while browsing the web without losing focus."

Link to the extension: https://chrome.google.com/webstore/detail/pinmyvideo/cpihinngdiofancfpfghfogkolilehfg?hl=pt-BR&authuser=0

I hope it is useful for you, as it has been for me, and I am open to hearing criticism and suggestions to make it even better!

Try it out and let me know what you think. If it's useful, leaving a comment there with 5 stars will be very welcome.

See ya!

[React] Render Props Pattern

João Guilherme do Amaral Vequiato — Tue, 04 Apr 2023 20:44:37 +0000

What is render props pattern? Understand this powerful React pattern.

With the Render Props pattern, we pass components as props to other components.

The components that are passed as props can, in turn, receive other props from that parent component.

Render props make it easy to reuse logic across multiple components.

Implementation

If we wanted to implement an input with which a user can convert a Celsius temperature to Kelvin and Fahrenheit, we can use the renderKelvin and renderFahrenheit render props.

These props receive the input value, which they convert to the correct temperature in K or °F.

function Input(props) {
  const [value, setValue] = useState("");

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      {props.renderKelvin({ value: value + 273.15 })}
      {props.renderFahrenheit({ value: (value * 9) / 5 + 32 })}
    </>
  );
}

export default function App() {
  return (
    <Input
      renderKelvin={({ value }) => <div className="temp">{value}K</div>}
      renderFahrenheit={({ value }) => <div className="temp">{value}°F</div>}
    />
  );
}

Benefits

Reuse: Since render props can be different every time, we can make components that receive render props highly reusable for multiple use cases.
Separation of concerns: We can separate the logic of our application from the rendering components through render props. The stateful component that receives a render prop can pass the data to stateless components, which only render the data.
Solution to HOC problems: Since we pass props explicitly, we solve the problem of implicit props from HOCs. The props that need to be passed to the element are all visible in the render prop's argument list. We know exactly where certain props come from.

Drawbacks

Not as necessary with hooks: Hooks have changed the way we can add reuse and data sharing to components, which can replace the render props pattern in many cases. However, there are still cases where the render props pattern can be the best solution.

Comment below if you knew about this pattern and if you use it in your daily work!

Did you like it? Check out other articles written by me:

Understanding closures
Understanding classes and prototypes
Understanding Higher Order Function

6 React questions for technical interviews and their answers

João Guilherme do Amaral Vequiato — Thu, 05 Jan 2023 16:21:21 +0000

Throughout my career as a developer I have been able to go through some selection processes, with different difficulties and questions about certain subjects.

I decided to gather in this post the most common questions and their respective answers.

Not for them to be decorated, but because I think they are extremely important to understand for anyone looking to evolve in their career as a React developer.

1. What is the difference between Component and PureComponent?

A component in React is a function or class that returns a React element, which is a description of a user interface.

A pure component is a component that implements the shouldComponentUpdate lifecycle method in a way that prevents the component from re-rendering if the component's props and state have not changed.

Here is an example of a simple component:

function HelloWorld(props) {
  return <div>Hello, {props.name}</div>;
}

Here is an example of the same component implemented as a pure component:

class HelloWorld extends React.PureComponent {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

The main difference between a component and a pure component is that a pure component implements shouldComponentUpdate with a shallow prop and state comparison, while a component does not.

This means that a pure component will not re-render if its props and state have not changed, while a component will always re-render every time it is rendered.

Using a pure component can improve performance in cases where the component is rendered frequently and the component's props and state do not change often.

However, if the component's props or state do change frequently, using a pure component can prevent the component from updating when it should, which can break the app.

2. Describe 3 ways to pass information from a component to its parent.

There are several ways to pass information from a child component to its parent in React:

Callback functions: You can pass a callback function as a prop to the child component. The child component can then call the callback function when it needs to pass data back to the parent. For example:

// In the parent component:

function Parent() {
  const handleChildData = data => {
    // Do something with the data from the child component
  };

  return <Child onChildData={handleChildData} />;
}

// In the child component:

function Child(props) {
  const handleClick = () => {
    const data = "some data";
    props.onChildData(data);
  };

  return <button onClick={handleClick}>Click me</button>;
}

Context: You can use the React context feature to pass data from a child component to a parent component. The parent component creates a context object and the child component consumes it. For example:

// In the parent component:

const DataContext = React.createContext();

function Parent() {
  const [data, setData] = React.useState(null);

  return (
    <DataContext.Provider value={[data, setData]}>
      <Child />
    </DataContext.Provider>
  );
}

// In the child component:

function Child() {
  const [data, setData] = React.useContext(DataContext);

  const handleClick = () => {
    setData("some data");
  };

  return <button onClick={handleClick}>Click me</button>;
}

Ref: We can pass a ref to the children component, so we can acess the value with ref.current in the parent component:

 const inputReft = useRef();

  <InputComponent ref={inputRef}>

3. Give 2 ways to prevent components from re-rendering.

There are several ways to prevent a component from re-rendering in React:

React.PureComponent: As mentioned previously, you can use React.PureComponent instead of React.

Component when defining a component class.

React.PureComponent implements the shouldComponentUpdate lifecycle method with a shallow prop and state comparison, which means that the component will only re-render if its props or state have changed.

If the props and state are the same according to the comparison, the component will not re-render.

class MyComponent extends React.PureComponent {
  render() {
    // Render the component
  }
}

React.memo: You can use the React.memo higher-order component to wrap a function component and prevent it from re-rendering if its props have not changed.

React.memo performs a shallow comparison of the props to determine if the component should re-render.

If the props are the same according to the comparison, the component will not re-render.

const MyComponent = React.memo(function MyComponent(props) {
  // Render the component
});

You can also provide a custom comparison function to React.memo if you need to perform a more complex comparison of the props. For example:

const areEqual = (prevProps, nextProps) => {
  // Return true if the props are equal, false otherwise
};

const MyComponent = React.memo(function MyComponent(props) {
  // Render the component
}, areEqual);

4. How many arguments does `setState` take and why is it `async`.

The setState method in React takes up to two arguments.

The first argument is an updater function or an object representing the new state.

The second argument is an optional callback function that is called after the state has been updated.

Here is an example of using setState with an updater function:

this.setState(prevState => {
  return {
    count: prevState.count + 1
  };
});

Here is an example of using setState with an object representing the new state:

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

setState is asynchronous because it may be batched together with other state updates, which means that the state may not be updated immediately after calling setState.

This is done to improve performance by avoiding unnecessary re-renders.

If you need to perform an action after the state has been updated, you can pass a callback function as the second argument to setState. The callback function will be called after the state has been updated and the component has re-rendered.

this.setState(
  {
    count: this.state.count + 1
  },
  () => {
    // Do something after the state has been updated
  }
);

It is important to note that the state may be updated asynchronously, so you should not rely on the state being immediately available after calling setState.

If you need to use the updated state in a subsequent update, you should pass a function as the first argument to setState and use the current state as an argument to the function.

this.setState(prevState => {
  return {
    count: prevState.count + 1
  };
});

// The state may not be immediately available, so it is important to use
// the previous state as an argument to the updater function
this.setState(prevState => {
  return {
    count: prevState.count + 1
  };
});

5. What is a fragment and why do we need it?

In React, a fragment is a way to group a list of children without adding extra nodes to the DOM.

Fragments are useful when you want to return multiple elements from a component's render method, but you don't want to wrap the elements in an extra DOM node.

Here is an example of using a fragment to group a list of elements:

render() {
  return (
    <>
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
    </>
  );
}

This will render the same JSX as the following code:

render() {
  return (
    <React.Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </React.Fragment>
  );
}

Both of these examples will render a list with three items, but the fragment allows you to group the elements without adding an extra node to the DOM.

This can be useful in cases where you want to return multiple elements from a component, but you don't want to wrap the elements in an extra node.

In the past, you could use a div element as a placeholder for a fragment, but this is no longer recommended because it can lead to confusion and can cause problems with CSS.

It is now recommended to use fragments or a React.Fragment element to group elements in a list.

6. List the steps needed to migrate a Class to Function Component.

To migrate a class component to a function component in React, you can follow these steps:

Convert the class component to a function component. To do this, you will need to remove the class keyword and the extends clause, and add the function keyword. You should also remove the render method and move the JSX code to the top level of the component function.

// Before:
class MyComponent extends React.Component {
  render() {
    return <div>Hello, world!</div>;
  }
}

// After:
function MyComponent(props) {
  return <div>Hello, world!</div>;
}

Convert any instance variables or methods to function component hooks. If the class component uses any instance variables or methods, you will need to convert them to function component hooks. This includes variables like this.state and this.props, as well as methods like this.setState.

// Before:
class MyComponent extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

// After:
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

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

Remove the constructor method. If the class component has a constructor method, you can remove it, since function components do not have a constructor method.

// Before:
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // Initialize state and bind methods
  }

  // Other methods and render function
}

// After:
function MyComponent(props) {
  // Initialize state using hooks and define methods as functions
  // Render function
}

Convert any static methods or properties to regular functions or variables. If the class component has any static methods or properties, you will need to convert them to regular functions or variables.

// Before:
class MyComponent extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired
  };

  static defaultProps = {
    name: "world"
  };

  // Other methods and render function
}

// After:
MyComponent.propTypes = {
  name: PropTypes.string.isRequired
};

MyComponent.defaultProps = {
  name: "world"
};

function MyComponent(props) {
  // Render function
}

After following these steps, your class component should be fully converted to a function component.

Extra (a Javascript question) - What's the difference in handling exceptions in promises, callbacks and async...await.

In JavaScript, there are three main ways to handle exceptions: using try...catch with synchronous code, using a callback function, and using async/await. Here is a brief overview of the differences between these three approaches:

try...catch: try...catch is used to handle exceptions in synchronous code. When an exception is thrown in the try block, the code execution is immediately halted and the catch block is executed.

try {
  // Code that may throw an exception
} catch (error) {
  // Handle the exception
}

Callbacks: Callbacks are used to handle asynchronous exceptions. When an asynchronous function returns a result or an error, it calls a callback function with the result or the error as an argument. The callback function can then handle the result or the error as needed.

asyncFunction(function(error, result) {
  if (error) {
    // Handle the error
  } else {
    // Use the result
  }
});

async/await: async/await is a more recent approach to handling asynchronous exceptions. async functions allow you to use the await keyword to pause the execution of the function until a promise is resolved. If the promise is rejected, an exception is thrown, which can be handled using a try...catch block.

async function example() {
  try {
    const result = await asyncFunction();
    // Use the result
  } catch (error) {
    // Handle the error
  }
}

In general, try...catch is used to handle exceptions in synchronous code, while call

Understanding Higher Order Function

João Guilherme do Amaral Vequiato — Wed, 29 Jan 2020 02:52:20 +0000

Higher Order Function it's a very basic concept (and much important too) but also a little misunderstood.

Let's understand first the concept, the most clear definition, simple and direct that you probably can use in some tecnical interview.

What is Higher Order Function? (aka HOF)

Higher Order Function it's all function that acepts other function as a parameter and/or return one function.

Before we go for a more deep explanation, we can list some important things about HOFs in programing.

Makes our code more declaritive and easy to read.
It's the key concept to more complex concepts in programing, like closures, currying, promises, and others.
We can generalize functions, so we can reuse these in different ways when it's necessary.

Understanding the Higher Order Functions

See the code below:

function copyArrayAndMultiplyBy5(array) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i] * 5);
  }
  return output;
}
const myArray = [1,2,3];
const result = copyArrayAndMultiplyBy5(myArray);

Suppose that we want do now one multiplication function for 3, 4.
Or maybe addition, or division. We need to copy and paste various functions, change only the name and the values from 5 to 3, 4 and too the operator from * to + and /.

And if, rather than define in the declaration moment the all behavior of our function, could we define one parameter to receive another function as argument and let the behavior to the execution moment?

In Javascript functions are objects, called first class objects.

If we can pass objects as arguments for one function, we can pass another function too.
Let's edit our code.

function copyArrayAndManipulate(array, fn) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(fn(array[i]));
  }
  return output;
}

Now we create a generic function copyArrayAndManipulate, that receives as parameter the array e one function called fn.

We don't know all the function's behavior on your declaration moment, and we don't need to know.

The function copyArrayAndManipulate it's our Higher Order Function, while the function fn that we'll pass in argument is our callback function.

Now we can create our variations in a much easier and dynamic way, without having to copy and paste unnecessary code.

function copyArrayAndManipulate(array, fn) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(fn(array[i]));
  }
  return output;
}
function multiplyBy5(input) { 
  return input * 5;
}
function multiplyBy3(input) { 
  return input * 3;
}
function multiplyBy4(input) { 
  return input * 4;
}
const result1 = copyArrayAndManipulate([1, 2, 3], multiplyBy5);
const result2 = copyArrayAndManipulate([1, 2, 3], multiplyBy3);
const result3 = copyArrayAndManipulate([1, 2, 3], multiplyBy4);

Our code stayed much more declarative and legible, because in reading we know exactly that the value of result1 will be the copy of array [1, 2, 3] multiplied by 5, for example.

Ok, this already improve writing of our code avoiding unnecessary code, but we can let the aesthetic better with arrow functions.

function copyArrayAndManipulate(array, fn) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(fn(array[i]));
  }
  return output;
}
const multiplyBy5 = (input) => input * 5;
const multiplyBy3 = (input) => input * 3;
const multiplyBy4 = (input) => input * 4;
const result1 = copyArrayAndManipulate([1, 2, 3], multiplyBy5);
const result2 = copyArrayAndManipulate([1, 2, 3], multiplyBy3);
const result3 = copyArrayAndManipulate([1, 2, 3], multiplyBy4);

So much better. But we don't need to store our functions in constants, we can pass these directly. This give to us more dinamism.

function copyArrayAndManipulate(array, fn) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(fn(array[i]));
  }
  return output;
}
const result1 = copyArrayAndManipulate([1, 2],(input) => input * 5);
const result2 = copyArrayAndManipulate([1, 2],(input) => input * 3);
const result3 = copyArrayAndManipulate([1, 2],(input) => input * 4);

The most attentive must have noticed a similarity with map function.
Yes, it's exactly how it works. And as map we have another functions very used and known that be HOFs (like filter and reduce).

Conclusion

Higher Order Function it's a simple and important concept, but so much peoples have a little difficult to understand it.

I hope have achieved desmistify this with the better possible way.

See you soon!👋

If you lost:
Understanding classes and prototypes
Understanding closures

Understanding closures

João Guilherme do Amaral Vequiato — Tue, 21 Jan 2020 23:56:17 +0000

Quickly definition to who come from google searching "What is closure"

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

In other words, it's a function that is able to remember the environment that was created.

Also known as "Closed over Variable Ambiente" (C.O.V.E) and "Persistent Lexical Scope Referenced Data" (P.L.S.R.D).

Ok, but what that means?

When we execute a function in Javascript, that function creates a brand new one execution context to it, with a local memory, variable ambiente and a state.

What happens is that when the function execution it's concluded, all of this context is excluded, including your local memory (which owns all of arguments that we passed for this function). Except the value that it returns.

But what if we could create "functions with memories". Functions that able persist data, like if could we store a state for it. This is the one of the most powerful concepts in Javascript, closures.

Functions with memories 🧠

This can be a little abstract in this point (how the closures can be so powerful), but keep in your mind in this point that so much concepts using closures under the hood, like memoization functions, module pattern, iterator, currying and much more.

Applying closures concept 🔥

Pay attention in the codes below, what we'll do it's called function decorator, which make us able to "edit" our functions (this is not the moment topic, soon i'll make one article series about functional programming).

const multiplyBy2 = (number) => number * 2;

Ok, nothing new until now.
Suppose we need to make with that our multiplication function, in a certain context, can be used only one time.

Can we create a counter inside of function for in the case when counter > 0 it doesn't execute? This is not possible, because every time that function ends its execution its local memory is destroyed.

So, lets create a new function.

const oncefy = (fn) => {
  const counter = 0;
  const myFunction = () => {
   if (counter === 0) {
     fn();
     return;
   }
   console.log("Only one time");
  }
}

Our function oncefy receives one function like parameter, define a counter and verify if counter is equal 0, if is equal 0 execute our argument, else our function prints in the console.

Let's apply the closure concept in our function multiplyBy2, passing it like argument for our function oncefy, wich is responsable to memorizer our counter.

const multiplyBy2 = (number) => {
  console.log(number * 2);
}
const oncefy = (fn) => {
  let counter = 0;
  const myFunction = (number) => {
    if (counter === 0) {
      fn(number); 
      counter++; 
      return;
    } 
    console.log("🍃");
  }
  return myFunction;
}
const multiplyBy2Once = oncefy(multiplyBy2);
multiplyBy2Once(3);
multiplyBy2Once(3);

Now, the function multiplyBy2Once will be executed only one time and nevermore. We "edit" our function multiplyBy2, giving to it a new behavior.
However, we don't need to change its original code, maintaining our function reusable.

How it works ⚙️

Let's understand step by step in the code above how closures work.

We stored one const called multiplyBy2 in the global memory, and its value its one function that receives one parameter called number and returns number * 2.
We stored one const called oncefy in the global memory, and its value its one function that receives one parameter called fn and returns one const called myFunction.
We declared one const called multiplyBy2Once, and its value we don't know yet because now we need execute the function oncefy first to know what it returns and atribute the return as the value.
In the moment that oncefy its executed, the interpreter creates a new execution context for this function.
The first thing is take all function parameters (in this case multiplyBy2) and stores in the local memory of this context.
Now the local memory have one const called fn that have multiplyBy2 function as value.
Next step it's take all declarations inside the function and stores in the local memory (in this case, one let counter with value 0 and one const myFunction with value as one function that receives one parameter called number).
After all declarations, it finally returns the const myFunction.
When return our value myFunction, all the execution context (including the local memory) are removed, except the returned value, that now it's the value of the const multiplyBy2Once.
On the next line of our code we execute the function multiplyBy2Once which, in the realite it's the function myFunction returned by oncefy
A new execution context is created for our function and again the first thing is take all function parameters of this function and stores in the local memory.
Now our local memory have one label called number and have the value the argument 0

It's in this moment that things become interesting.
In the next line of the execution, we have the condicional if (counter === 0)
So the interpreter goes to the function's local memory searching for the counter variable, but this variable doesn't exist in this execution context.

It's now that closures make the magic.
When a function is defined, it gets a bond to the surrounding local memory
(“variable environment”) in which it has been defined.
So, because the function myFunction was defined inside of function oncefy, the function myFunction "stores" all local memory of the context where that it's defined, including the const counter.

When the interpreter doesn't find counter in the actual execution context scope, it goes up to the "backpack" that myFunction carries with itself (aka closure).

By keeping that memory, this context don't be erased, always remembering its last execution

Conclusion 💡

Closure it's a very important concept in programming and can be used for much things.

Understand how it works may not be one easy task (and hard to explain too).

However, it's important understand closures to understand more complex concepts and develop powerful solutions.

See you soon!👋

If you lost:
Understanding classes and prototypes
Understanding Higher Order Function

Understanding classes and prototypes

João Guilherme do Amaral Vequiato — Tue, 21 Jan 2020 04:00:23 +0000

In this article I'll try approach in a simple and objective way what I've learned (thanks to Will Sentance) about object orientend in Javascript, wich is a very popular program paradigm to structure complex codes.

I'll initiate this with the principle of encapsulation, in how we can store data and their respective methods: Objects.

Let's start with the object vehicle.

const vehicle1 = {
  type: "Car",
  name: "Belina",
  speed: 0,  
  accelerate: function() { vehicle.speed++; }
};

Supose we need now to create a new vehicile, let do this with a diferent ways.

Using the dot notation 🔨

const vehicle2 = {};; // creates a empty object
// assigns the properties to the object
vehicle.type = "Car";
vehicle.name = "Monza";
vehicle.speed = 0;
vehicle.accelerate = function() {
  vehicle2.speed++;
}

Using Object.create() 🛠️

const vehicle3 = Object.create(null);
// assigns the properties to the object
vehicle3.type = "Car";
vehicle3.name = "Uno";
vehicle3.speed = 0;
vehicle3.accelerate = function() {
  vehicle3.speed++;
}

All right, every above ways be valids to create an object, however you may be feeling uncomfortable with the ways we're did that.

We're break a important principle in programming: Don't Repeat Yourself

What we can do?

Factories! Generating objects with functions 🏭

function vehicleCreator(type, name, speed) {
  const newVehicle = {};
  newVehicle.type = type;
  newVehicle.name = name;
  newVehicle.speed = 0;
  newVehicle.accelerate = function () {
    newVehicle.speed++;
  };
  return newVehicle;
};

Now we get eliminate the code copy every time we need to create a new vehicle.

const vehicle1 = vehicleCreator("Car", "Belina", 0);
const vehicle2 = vehicleCreator("Car", "Monza", 0);
vehicle1.accelerate();

We solve some of our problems. However, every time we've created a new vehicle we created unnecessary copies in the application memory of the accelerate method. That's sucks!

Using prototype chain ⛓️

What if instead of creating a new method copy on each new object, we store our methods in other local and create a link these methods in the object, in a way what the interpreter can check the prototype chain and find them.

We can creat this link using Object.create()

function vehicleFunctionStore() {
  accelerate: function() { this.speed++; }
}

function vehicleCreator(type, name, speed) {
  // the Object.create() serve to do the link between the new object created and the object methods vehicleFunctionStore.
  const newVehicle = Object.create(vehicleFunctionStore);
  newVehicle.type = type;
  newVehicle.name = name;
  newVehicle.speed = 0;
  return newVehicle;
}

Now, the way we created and used the methods of each object stay the same, however were not created unecessary copies of the method.

const vehicle1 = vehicleCreator("Car", "Belina", 0);
const vehicle2 = vehicleCreator("Car", "Monza", 0);
vehicle1.accelerate();

But, how this link with the objects works?

All Javascript object has one property called proto.
This property links all Javascript objects to a another big one, the Object.prototype that contains a built-in methods.

It's exactly through this property we can access our accelerate method linked by Object.create()

// When we execute the accelerate method, the interpreter goes to the object vehicle1 search for the method. However, this method doesn't exist in the object. 
So, the interpreter goes to the Object.Prototype to verifies if the method exists, and there can find it and execute it!

vehicle1.accelerate();

Great! We solve one more problem. But the things still out of the pattern here.
This approach is useful and works, but exists another ways to facilitate our job.

The "new" keyword 🆕

// Let's change this way
const vehicle1 = vehicleCreator("Car", "Belina", 0);
const vehicle2 = vehicleCreator("Car", "Monza", 0);

// To this
const vehicle1 = new vehicleCreator("Car", "Belina", 0);
const vehicle2 = new vehicleCreator("Car", "Monza", 0);

However we need to do some adaptations in our code.

function vehicleCreator(type, name, speed) {
  this.type = type;
  this.name = name;
  this.speed = speed;
}

Notice now we don't have to create a new object neither return one.
The new keywords make do this for us! And is the only thing that word do.

Now we've to create our method's link in the proto property.

vehicleCreator.prototype.accelerate = function() {
  this.speed++;
}

This code have the same function what we did with de Object.create().
Now we can create our objects with this way.

const vehicle1 = new vehicleCreator("Car", "Belina", 0);
const vehicle2 = new vehicleCreator("Car", "Monza", 0);

All sweet, we facilitate so much the writing, performance and understanding of our code, but imagine that each new method we need to create a new link in prototype chain.

vehicleCreator.prototype.accelerate = function() {
  this.speed++;
}
vehicleCreator.prototype.decelerate = function() {
  this.speed--;
}

We need to write our methods separeted of our object constructor. Sounds me unusual.

Javascript classes 🎩

From the ES2015 we had the insertion of syntactic sugar word class.
This emerges like a new development pattern and looks like with other programming languages.

However, the class keyword, under the hood, make exactly the same thing that we had above in the The "new" keyword topic.

With it, we can declare our methods together with our object constructor and we don't need to explicitly link with prototype chain.

class VehicleCreator {
  constructor(type, name, speed) {
    this.type = type;
    this.name = name;
    this.speed = speed;
  }
  accelerate() {
    this.speed++;
  }
  decelerate() {
    this.speed--;
  }
}
const vehicle1 = new vehicleCreator("Car", "Belina", 0);
vehicle1.accelerate();

This code above, under the hood, make exactly the same thing of the code below, but is more elegant.

function vehicleCreator(type, name, speed) {
  this.type = type;
  this.name = name;
  this.speed = speed;
}
vehicleCreator.prototype.accelerate = function() {
  this.speed++;
}
vehicleCreator.prototype.decelerate = function() {
  this.speed--;
}
const vehicle1 = new vehicleCreator("Car", "Belina", 0);
vehicle1.accelerate();

I'm end my article here. I've tried - and hope that I have succeeded - explain succinctly and direct about prototype chain, the diference between proto property and prototype (the big object), and the way what new and class keywords help us to object creation.

See you soon!👋

Understanding closures
Understanding Higher Order Function

Forem: João Guilherme do Amaral Vequiato

You DON'T know Reactjs - Part I

A brief reflection

Fundamental concepts of Reactjs

Declarative programming vs imperative programming

HTML and the DOM

What is the DOM?

But why React?

Did you like it? Check out other articles written by me:

Maximize your learning and productivity with this Chrome extension

PinMyVideo

The problem

The solution

[React] Render Props Pattern

What is render props pattern? Understand this powerful React pattern.

Implementation

Benefits

Drawbacks

Did you like it? Check out other articles written by me:

6 React questions for technical interviews and their answers

1. What is the difference between Component and PureComponent?

2. Describe 3 ways to pass information from a component to its parent.

3. Give 2 ways to prevent components from re-rendering.

4. How many arguments does setState take and why is it async.

5. What is a fragment and why do we need it?

6. List the steps needed to migrate a Class to Function Component.

Extra (a Javascript question) - What's the difference in handling exceptions in promises, callbacks and async...await.

Understanding Higher Order Function

What is Higher Order Function? (aka HOF)

Understanding the Higher Order Functions

Conclusion

Understanding closures

Functions with memories 🧠

Applying closures concept 🔥

How it works ⚙️

Conclusion 💡

Understanding classes and prototypes

Using the dot notation 🔨

Using Object.create() 🛠️

Factories! Generating objects with functions 🏭

Using prototype chain ⛓️

The "new" keyword 🆕

Javascript classes 🎩

4. How many arguments does `setState` take and why is it `async`.