DEV Community: DNelson35

Redux and Redux Toolkit for Beginners: A Comprehensive Tutorial

DNelson35 — Fri, 03 Nov 2023 05:17:07 +0000

Introduction

Redux is a Useful and Powerful state management library used in many large Javascript Projects. If you are familiar with React useContext Api then you should have an idea of why and when you might want to use a state manager. But if not don't worry I got you. In today's blog I will be going over what Redux is, How it works, Why we might want to use Redux,And how to use it.

What is Redux

As mentioned before, Redux is a state management library. Essentially it is used for managing State that you may need all throughout your project and keeping it in one place so you can grab and use it where you need it. You may be thinking “This sounds a lot like useContext” and you're not wrong they do relatively similar things but when it comes to scale and how they work they are very different. One major difference to note is Redux is its own stand alone library designed specifically to optimize state management and updating state. With that in mind Redux can be a more performant option as your project grows. On the other hand Redux takes several steps to set up and can be unnecessary for some smaller applications. With smaller applications that don't really need to take advantage of Redux state optimization I would suggest going for the much more lightweight and easy to use useContext api provided by React.

If you do choose to use Redux there are three things redux needs to work properly, one you will need to make a store, two you will have to create reducers and three actions. Don’t worry we will be discussing all of this in this blog.

How Redux Works

When we talk about how redux works it really comes down to how it handles state. State in Redux is managed in an immutable object, and every update to the Redux state results in a copy of sections of the state, plus the new change. Redux uses events called "actions" to manage and update the state. Actions are dispatched to the store, which then updates the state based on the rules defined in reducers. The updated state can then be accessed by any component in the application, making Redux a powerful tool for managing global state in complex applications. In terms of memory management, Redux uses a technique called "structural sharing" to make these state updates efficient. Instead of creating a deep copy of the entire state (which can be expensive in terms of performance), Redux creates a shallow copy of the parts of the state that are being updated. It then replaces the old parts of the state with the new ones. This way, Redux doesn't need to create a deep copy of the state every time an update is made, which can significantly improve performance for large state objects.

As for the garbage collector, it will clean up the old state objects once they are no longer referenced by the Redux store. This is because Redux uses immutable data structures, and once a new state is created, the old state is no longer needed and can be safely discarded

How Redux three Steps Work

First we have, reducers. They specify how the application's state changes in response to actions sent to the store. Actions only describe what happened, but don't describe how the application's state changes. That's the job of a reducer. A reducer is a pure function that takes the previous state and an action, and returns the next state.

Then we have actions. when an action is dispatched, the store runs the reducer function with the current state and the dispatched action. The reducer determines how the state should change in response to the action, and returns the new state. The store then updates its state with the new state returned by the reducer. It does this by creating a shallow copy of the old state comparing them and updating the part that has changed.

Finally we have the Redux store. It notifies all parts of the UI that are subscribed that the store has been updated. Each UI component that needs data from the store checks to see if the parts of the state they need have changed. Each component that sees its data has changed and forces a re-render with the new data, so it can update what's shown on the screen.

Now that we have a firm grasp of how redux works and how it is optimized for handling state, Lets move on into how to set up Redux and Redux Toolkit in and application.

Set Up Redux

Create a App

The first thing we are going to want to do is to create a to do this we run this code in our terminal:

npx create-react-app project-name

cd project-name

Install Libraries

After we have created our application directory and navigated into it we are going to run these commands in the terminal

npm install react-redux
npm install @reduxjs/toolkit

Reducers

Now that we have the libraries installed we can go ahead and start setting up redux by first setting up a reducer then we will move on to setting up the store. It is important to note that the these slices are how we create state for redux. in the code below we created a state called posts and if we wanted to create more state we have two options we can create another slice for another unique state. set our initial state to an object with keys and update the values assigned to the keys with reducers. here is an example of a reducer:

import { createSlice } from '@reduxjs/toolkit'

const initialState = []

Const postSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    addPost: (state, action) => {
     state.push(action.payload)
    }
  }
})

// or we could set our initial state to an object like this
// const initailState = {
 // post: [],
 // anotherstate: '', 
//}
// in the reducers we would update this by saying //state.post.push(action.payload) instead

export const {addPost} = postsSlice.actions
export default postsSlice.reducer

ok so let me explain what is happening here.

First, we're importing the createSlice method from the @reduxjs/toolkit library. This method is used to generate action creators and action types that correspond to the reducers and state. This is for reducing the boilerplate required to add data to Redux.

Next, we're defining the initial state of our application. This is done so our reducer knows what we want our state to be before any updates are made. In this case, we're setting the default state of our reducer to be an empty array.

Then, we're creating a slice of the Redux store using the createSlice method. This slice is given the name 'posts', and it is initialized with the initialState object. The createSlice method takes an object as an argument, which includes the name of the slice, the initial state, and the reducers that the slice will handle.

Inside the createSlice method, we're defining a reducer function named addPost. This function takes the current state and an action as arguments. The action's payload is pushed to the posts array in the state. This reducer function will be used to handle the 'addPost' action.

The createSlice method returns an object that contains the reducer function and the action creators generated. In this case, the addPost action creator is generated, which can be used to dispatch the 'addPost' action.

Finally, we're assigning the object returned by the createSlice method to the postSlice constant. This object contains the reducer function and the action creators, and it's used to interact with the 'posts' slice of the Redux store. then we export the actions to use in our application as well as the reducer created by createSlice to use in the redux store.

Store

Next lets take a look at the store and see how we set this up and what it does. Here is an example of how our Store would look with the reducer from above

import { configureStore } from '@reduxjs/toolkit'
import postsReducer from '../reducers/postsSlice'
//note that my reducer here is imported from a folder called reducer. depending on how you set up your file structure this could be different for you.

const store = configureStore({
  reducer: {
    posts: postsReducer,
  },
})

export default store

First we have the configureStore method imported from the @reduxjs/toolkit library. This method is used to create a Redux store. The store is What we will use in our top level component to pass into the provider component provided by react-redux library this makes the store available to our entire application.

Then postsReducer is imported from a file named postsSlice located in a reducers folder. The exact location of this file may vary depending on your project's file structure.

We use the configureStore method to create a Redux store. This store is given the name store. The configureStore method takes an object as an argument, which includes the reducers that the store will handle. In this case, the postsReducer is assigned to the user key in the reducer object.

The store is then exported as the default export of the module. This allows it to be imported and used in other parts of the application.

Last Step The Provider

The last thing we have to do to finish setting up redux in our application is to wrap our application in the provider form the react-redux library and pass our store as a prop here is an example:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './pages/App'
import {BrowserRouter as Router} from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './store/store'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>
)

Here you can see we import our store and the Provider. Then we Wrap the entire application in the provider and pass the store as a prop. This gives the entire application access to our store so we can update state. Thats is we are done setting up redux the next step is how do we use it from here

How to use Redux

Now that our Redux store is set up. We have our slice for creating the reducer and the actions, And we have set up our provider we need two more things to be able to use the store.

We need useDispatch, and useSelector. these methodos are what let us grab state form the store and dispatch actions to update the state in the store

if we want to grab our post from redux we could do somthing like this:

import React, {useState} from 'react'
import { useSelector } from 'react-redux/es/hooks/useSelector'

function Profile() {
  const posts = useSelector(state => state.posts)
  console.log(post.length) ==> 0
// our initial state is an empty array
  return <h1>hello world</h1>
}

Now lets update the state so we no longer have an empty array

import React, {useState} from 'react'
import { useSelector, useDispatch } from 'react-redux/es/hooks/useSelector'
import { addPost } from '../reducers/postSlice'

function Profile() {
  const posts = useSelector(state => state.posts)
  const dispatch = useDispatch()
  const post = 'hello'

  const handleClick = () => {
    dispatch(addPost(post))
  }
// now if we click the button we can see the state update to // show the added posts. 
  console.log(posts) ==> ['hello']
  return <button onClick={handleClick}>Click</button>
}

conclusion

We are finished by this point you should have a working application using Redux and Redux Toolkit. I show how to use Redux Toolkit Query in this blog if you would like to know more about that leave a comment. Thank you for following along. If you have any questions please leave me a comment and I will respond as soon as I can.

Ruby Serializers: Simplifying Data Serialization for Web Developers

DNelson35 — Thu, 06 Jul 2023 21:03:38 +0000

Introduction:

In the world of web development, the process of transmitting data between different systems is a crucial aspect. One of the most effective tools for achieving this is a serializer. In this beginner-friendly blog post, we will explore how serializers work and their importance in Ruby backend APIs. We will cover the basics of data serialization, the benefits of using serializers, and provide practical examples to help you understand their implementation.

Understanding Data Serialization:

Data serialization refers to the process of converting complex data structures, such as objects or arrays, into a format that can be easily transmitted or stored. This format is typically a string of bytes that can be sent across a network or saved to a file. Serialization is crucial when transferring data between different programming languages or systems, ensuring compatibility and seamless communication.

The Need for Serializers:

In a Ruby backend API, serializers play a vital role in transforming complex Ruby objects into a format that can be easily transmitted as JSON (JavaScript Object Notation). By using serializers, developers can control which attributes of an object are exposed and tailor the response data to meet specific requirements. Serializers provide several benefits:

Data Abstraction: Serializers allow you to hide or exclude sensitive or unnecessary information, providing a clean representation of the data to be sent over the network. For example, you can exclude a user's password or other sensitive data from the response.
Efficiency: By only including necessary data, serializers reduce the payload size, resulting in improved performance and reduced bandwidth consumption. This optimization is particularly important when dealing with large datasets or slow network connections.
Flexibility: Serializers enable you to structure the data according to the specific needs of the frontend or client consuming the API. This flexibility simplifies the process of adapting to evolving requirements. For example, you can nest related objects within the serialized output, providing a more comprehensive representation of the data.

Installing and Using the ActiveModel::Serializers Gem:
To begin using serializers in a Ruby backend API, you need to install the ActiveModel::Serializers (AMS) gem. In a console, navigate to your project's root directory and execute the following command:

$ gem install active_model_serializers

By installing this gem, you gain access to powerful serialization capabilities within your Ruby backend API. It's worth noting that when creating a new Rails application with the --api flag, the AMS gem is not included by default. However, in a standard Rails application, the gem is automatically available.

Once the AMS gem is installed, you can define serializers for your models. Let's take the example of a blog post API, where each post has a title, content, and author:

class PostSerializer < ActiveModel::Serializer
  attributes :title, :content
  belongs_to :author
end

In the above code snippet, we define a serializer class for the Post model using the ActiveModel::Serializer as the base class. The attributes method specifies which attributes of the post should be included in the serialized output. The belongs_to method indicates that the post belongs to an author, and it should be serialized accordingly.

When using a serializer in Ruby on Rails, if the serializer is set up correctly, Rails will automatically use it without explicitly calling it. For example, consider the following controller action:

class PostsController < ApplicationController
  def show
    post = Post.find(params[:id])
    render json: post
  end
end

In this case, Rails will recognize the PostSerializer and utilize it to format the response data. It automatically infers the serializer based on the model name. This convention allows for a seamless integration between your models and serializers.

By leveraging the power of serializers, you can fine-tune the serialization process. Let's explore some additional features and techniques that make serializers a valuable tool in your Ruby backend API development.

Customizing Serialization:
Serializers provide flexibility in customizing the serialization process. You can include additional attributes, methods, or associations by defining them within the serializer class. For example, you can calculate derived attributes or include related objects using has_many or has_one associations.

class PostSerializer < ActiveModel::Serializer
  attributes :title, :content, :word_count
  belongs_to :author
  has_many :comments

  def word_count
    object.content.split.length
  end
end

In the above code snippet, we introduce a custom attribute word_count that calculates the number of words in the post's content. We also include the author and comments associations to provide a comprehensive representation of the post.

Controlling Inclusion:

Serializers allow you to conditionally include or exclude attributes based on specific criteria. This is useful when dealing with complex object relationships or authorization requirements. You can define conditional attributes using the if or unless options.

class PostSerializer < ActiveModel::Serializer
  attributes :title, :content
  belongs_to :author
  has_many :comments, if: -> { object.comments_allowed? }
end

In this example, the comments association will only be included if the comments_allowed? method on the Post object returns true. This provides control over the inclusion of sensitive or restricted data based on certain conditions.

Embedding Associations:

Serializers allow you to embed associated objects directly within the serialized output. This reduces the number of API requests required to fetch related data. You can use the embed option to control the embedding behavior.

class PostSerializer < ActiveModel::Serializer
  attributes :title, :content
  belongs_to :author
  has_many :comments, embed: :ids
end

In this case, the comments association will be serialized as an array of comment IDs instead of embedding the full comment objects. The client can then use these IDs to fetch the corresponding comments if needed.

Conclusion:

Serializers are powerful tools for simplifying data serialization in Ruby backend APIs. They provide control over the structure, content, and relationships of the serialized data. By utilizing the ActiveModel::Serializers gem, you can seamlessly integrate serializers into your Ruby on Rails applications. Serializers enhance the efficiency and flexibility of your API by reducing payload size, abstracting sensitive data, and providing customized representations of your models.

Through practical examples and explanations, we have explored the fundamentals of serializers, installation instructions for the AMS gem, and various techniques for customizing serialization. By harnessing the capabilities of serializers, you can optimize communication between your backend API and frontend applications while maintaining clean and structured data transmission.

A Beginner's Guide to Regular Expressions in Ruby

DNelson35 — Tue, 02 May 2023 19:05:07 +0000

Regular expressions, also known as RegEx, are a powerful tool for working with text in programming languages. Ruby, like many other languages, has built-in support for regular expressions. In this blog post, we will cover the basics of regular expressions in Ruby, and how you can use them to manipulate and extract data from text.

What are Regular Expressions?

At its simplest, a regular expression is a pattern of characters that can be used to match and manipulate text. For example, the regular expression /hello/ would match any instance of the word "hello" in a string. Regular expressions can be used to search for specific patterns of characters, replace text with other text, and extract data from text.

Defining a Regular Expression

In Ruby, regular expressions are defined using forward slashes (/) to enclose the pattern. For example, to define a regular expression that matches any sequence of digits, you could use the pattern /[0-9]+/. This pattern includes the [0-9] character class, which matches any digit, and the + quantifier, which matches one or more occurrences of the previous character or character class.

Matching Text with Regular Expressions

To match text with a regular expression in Ruby, you can use the =~ operator, which returns the index of the first match if there is one, or nil if there is no match. For example:

string = "The quick brown fox jumps over the lazy dog"
index = string =~ /brown/
puts index # Output: 10 remember the index also includes spaces in a string and starts at a 0 index

In this example, we are using the =~ operator to search for the first occurrence of the string "brown" in the given string variable. We then output the value of index to the console.

Alternatively to return the matched text, you can use the match method, which returns the text if a match exist, or nil if there is no match. For example:

string = "The quick brown fox jumps over the lazy dog"
match = /brown/.match(string)
puts match # Output: brown

In this example, we're searching for the string "brown" in the string variable using the regular expression /brown/. The match variable will be set to the first match if there is one, which in this case is "brown". We then output the value of match to the console.

Character Classes

Character classes are a fundamental part of regular expressions in Ruby. They allow you to match any character in a certain set or range of characters. For example:

string = "The quick brown fox jumps over the lazy dog"
match = /[aeiou]/.match(string)
puts match # Output: e

In this example, we're searching for any vowel in the string variable using the character class [aeiou]. The match variable will be set to the first match if there is one, which in this case is "e" from "The".

Quantifiers

Quantifiers are used to specify how many times a character or character class should be matched. For example:

string = "The quick brown fox jumps over the lazy dog"
match = /[aeiou]{2}/.match(string)
puts match # Output: ui

In this example, we're searching for any two consecutive vowels in the string variable using the character class [aeiou] and the {2} quantifier. The match variable will be set to the first match if there is one, which in this case is "ui" from "quick".

Anchors

Anchors are used to specify where a match should occur in the string. For example:

string = "The quick brown fox jumps over the lazy dog"
match = /^The/.match(string)
puts match # Output: The

In this example, we're searching for the string "The" at the beginning of the string variable using the ^ anchor. The match variable will be set to the first match if there is one, which in this case is "The".

Grouping and Capturing

Grouping and capturing are used to match and extract specific parts of a string. For example:

string = "John Smith (42)"
match = /(\w+)\s(\w+)\s\((\d+)\)/.match(string)
puts match[1] # Output: John
puts match[2] # Output: Smith
puts match[3] # Output: 42

In this example, we're searching for a string that contains a first name, last name, and age enclosed in parentheses. We use parentheses to create capture groups, which allow us to extract the values of the first name, last name, and age from the string. The match[1] expression returns the value of the first capture group (i.e. the first name), match[2] returns the value of the second capture group (i.e. the last name), and match[3] returns the value of the third capture group (i.e. the age).

Replacing Text with Regular Expressions

In addition to matching text with regular expressions, you can also replace text using regular expressions in Ruby. The gsub method is used to replace all occurrences of a pattern in a string with a replacement string. For example:

string = "The quick brown fox jumps over the lazy dog"
new_string = string.gsub(/brown/, "red")
puts new_string # Output: The quick red fox jumps over the lazy dog

In this example, we're replacing all occurrences of the string "brown" in the string variable with the string "red" using the gsub method.

Conclusion

In this blog post, we've covered the basics of regular expressions in Ruby, including how to define a regular expression, match text with a regular expression, use character classes and quantifiers, use anchors, and capture specific parts of a string. We've also covered how to replace text using regular expressions in Ruby. Regular expressions can be a powerful tool for working with text in Ruby, and we hope this blog post has given you a solid foundation for working with them in your own code.

React's useContext Hook

DNelson35 — Wed, 08 Mar 2023 17:48:46 +0000

Sharing data between components is a common thing in React applications, and it can quickly become complex as the application grows. When components are nested deep in the component tree, passing data down through props becomes tedious, and managing the state can be challenging. In some applications, there may be similar data that needs to be shared with almost all the components. Instead of prop drilling our way down the component, React has a great solution the useContext Hook.

The useContext hook is a part of the Context API in React, which provides a way to share data between components without having to pass props through the entire component tree. Instead, the data is made available to all components that subscribe to the context. We will walk through how to setup and use the useContext Hook in this blog.

What is useContext Hook?

According to the react docs, "useContext is a React Hook that lets you read and subscribe to context from your component".
but what does that mean? In this context "reading" and "subscribing" refer to accessing and listening to changes in a specific context object.

"Reading" from a context means retrieving the current value of the context object. When a component uses useContext, it "subscribes" to updates to that context object. This means that any time the value of the context object changes, the component will re-render with the updated value.

This is different from passing props down through the component tree, as useContext allows you to access a value directly from a context object without having to pass it down through intermediary components. This can be particularly useful for values that are needed by many components in the application.

How To useContext

First, let's define the context object. The context object is a container for data that needs to be shared across components. You can create a context object using the createContext() function from React. To use this function we must first import it from React and set the context up by defining a variable. This is done in the example below:


import { createContext } from 'react';

const myContext = createContext();

The createContext() function creates a new context object, which is then used to pass data between components. The context object is a container for data that needs to be shared across components.

Next, we need to provide the data to the context object. We can use the Context.Provider component to provide the data to the context. The Provider component wraps the component tree that needs access to the data. In the example below, we provide the user data to the context using the value prop of the Provider component:


import { createContext } from 'react';
const UserContext = createContext();

function App() {
  const user = {
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@example.com',
  };

  return (
    <UserContext.Provider value={user}>
      <Header />
      <Main />
      <Footer />
    </UserContext.Provider>
  );
}

In this example, we provide the user data to the UserContext using the value prop of the UserContext.Provider component. The Header, Main, and Footer components are wrapped in the UserContext.Provider component and have access to the user data.

Now that we have provided the data to the context, we can use the data in the child components. We use the useContext hook to grab the data from the context.

The useContext hook is a function that takes the context object as an argument and returns the data stored in the context. Here's an example of how we can use the useContext hook in a child component:

import { useContext } from 'react';
import UserContext from './UserContext';

function Header() {
  const user = useContext(UserContext);

  return (
    <header>
      <h1>{user.firstName} {user.lastName}</h1>
      <p>Email: {user.email}</p>
    </header>
  );
}

In this example, we use the useContext hook to consume the user data from the UserContext. The user data is stored in the user variable and can be used in the component.

We can use the useContext hook in any child component that needs access to the shared data. This makes it easy to share data across components and makes our code more manageable.

Advantages of Using useContext Hook

One of the main advantages of using the useContext hook is that it simplifies the process of passing data through props. When a component needs access to the data, it can simply use the useContext hook to consume the data from the context object, instead of having to pass the data down through props.

Another advantage of using the useContext hook is that it makes our code more maintainable. When the application grows, managing the state can become challenging. By using the useContext hook to share data between components, we can use multiple contexts
In many cases, an application may require multiple contexts to store and share data across different components. Fortunately, the useContext hook can be used with multiple contexts in the same component.

To use multiple contexts, we can simply call useContext on each context object that we want to use in the component. For example:


import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');
const LanguageContext = React.createContext('en');

function Header() {
  const theme = useContext(ThemeContext);
  const language = useContext(LanguageContext);

  return (
    <header>
      <h1>My App</h1>
      <p>Theme: {theme}</p>
      <p>Language: {language}</p>
    </header>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <LanguageContext.Provider value="fr">
        <Header />
      </LanguageContext.Provider>
    </ThemeContext.Provider>
  );
}

In this example, we create two context objects for the theme and language, and then we call useContext on both objects in the Header component. We then provide values for both contexts in the App component using the Provider component.

Best Practices

When using the useContext hook, there are some best practices to keep in mind to ensure clean and maintainable code:

Use context only when necessary: Context should be used sparingly and only when it is necessary to share data across multiple components. Overusing context can make the code difficult to understand and maintain.

Keep context small: The data stored in context should be kept as small as possible to ensure optimal performance. Storing large amounts of data in context can slow down the rendering of components.

Provide default values: When creating a context, it is good practice to provide a default value for the context. This ensures that the components that use the context have a value to work with, even if the provider does not provide a value.

Use context as high as possible: When using context, it is best to provide the context at the highest possible level in the component tree. This ensures that all components that need the context have access to it, without having to pass the context down through multiple levels of components.

Conclusion

In conclusion, the useContext hook is a powerful tool for sharing data between components in React applications. It simplifies the process of passing data through props and makes the code more maintainable. By creating a context object and using the useContext hook, we can provide data to all the child components that subscribe to the context. This makes it easy to share data across components and manage the state of the application. By following best practices when using context, we can ensure clean and maintainable code.

How "this" Works

DNelson35 — Wed, 04 Jan 2023 14:42:05 +0000

About "this"

The this keyword in JavaScript could be considered one of its more difficult concepts to grasp. To better understand this, we first need to know what this is. The simple definition of this is that this refers to the object that is executing the current function. We should also note that JavaScript is an object-oriented language. It's important to know this because in JavaScript, this is used to refer to the current object or to the current event. While this may seem easy to understand, this can be more difficult in practice. The value of this may vary depending on how the function containingthis is called and executed. This has to do with the execution context of the function. For example if we where to write

function whatsThis(){
    console.log(this)
}

whatsThis(); // => window obj.

As we can see this in this context is referring to the window obj. It may seem like the value of this should be the function itself, but remember that the value of this is the object which is executing the function never the function itself. In this case the object that is executing the function is the global object. The reason is when the function is being declared inside the global scope, it is not nested inside of a "parent" obj so it refers to the global obj which is the window. The purpose of this blog will be to explain how this changes depending on when and where it is used.

Working With 'this'

We seen above how this used in a stand alone function binds to the window object, but how can we get this to work for us. One way would be to call a function as a method of an object. for example

const player = {
name: 'Jack',
func: function(){
   console.log(`Hello ${this.name} do you want to play a game?`);
 }
}

player.func() // => 'Hello Jack do you want to play a game?'

In this example, this is bound to the player Object, essentially this === player. This is called Implicit binding, we will talk about binding this in the next section. For now, let's think about why this is the player and not the window. before, when we tried to use this, we used this in a stand alone function. The stand alone function was declared in the global context. Now we defined the function as a method of player. puting the function (func) inside the context of player so the object calling the function now is not the window but the player object. but we still need to be careful. Take a look at this example.

const person = {
  name: 'Sam',
  sayName: function() {
    console.log(`My name is ${this.name}`);
  }
};

const sayName = obj.sayName;

sayName(); // outputs "My name is undefined", because "this" is the window object

This may be confusing because sayName is defined as a method of the person object, but we are getting undefined. Well, this is happening because when we call sayName as a standalone function the value of this becomes the window again. That is do to the fact that the function is no longer being called as a method of the person object. At this point, it might not seem like this has a purpose. Why would we need this if it can only be used inside the object? What is the point? To answer those questions we need to talk about binding.

Binding `this`

There are several ways to use this, and there are different ways to bind this. above we already discussed two types of binding "implicit binding", and "Window binding" but there are Two other types of binding. Let's take a deeper look at each of them.

Implicit Binding

Implicit binding is when a function is called as a method of an object, this is bound to the object that the function is a method of. like in the example above.

Explicit Binding

Explicit binding is when we use the methods 'call', 'apply', and 'bind', and we explicitly bind this to a object. for example:

const greet = function(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}

const person1 = { name: 'John' };
const person2 = { name: 'Jane' };

greet.call(person1, 'Hello'); // Output: "Hello, my name is John"
greet.apply(person2, ['Hello']); // Output: "Hello, my name is Jane"

const boundGreet = greet.bind(person1);
boundGreet('Hello'); // Output: "Hello, my name is John"

In the example above, we see that when we use these methods we can change what this is bound to. This brings us out of only being able to use this in side of the object we define the function in. we can now bind a function to any object and the return value of this will become the object it is bound to, like in the example.

New Binding

New binding is when a function is called using the new keyword, this is bound to the newly created object. for example:

function Person(name) {
  this.name = name;
}

const person = new Person('John');
console.log(person.name); // Output: "John"

This is called a constructor function. when we use a constructor function each new obj will have this bound to the person object created by the function above.

With the knowledge of the different ways to bind this to an object, or even how to create an object using this. We can now see that the this keyword has multiple uses, and can be used to both simplify and expand our code in useful ways.

Arrow Functions With `this`

When it comes to arrow functions they use this a bit differently. Because arrow functions do not define its own this context they inherit the context of the parent function. Now that may sound similar to what we discussed previously, but its not. What this means is that if we use an arrow function it will look for the next function with context not object. Before when we declare the function as a method the function tells this to bind to the object executing the function. With arrow functions this does not happen. here is an example of how an arrow function would handle being declared as a method on its own.

const person = {
  name: 'Tim',
  sayName: () => {
    console.log(this.name);
  }
};

obj.sayName(); // outputs 'undefined', because "this" is the window object

Before when we did this with a anonymous function, the function told this to bind to the object executing it, person. Now with an arrow function the function is not telling this to bind to the object so this looks for the next function with context and that is the window. and since window has no name property it returns undefined. Next let's look at an example of how we can get this to work with an arrow function like the one above.

const person = {
  name: 'Tim',
  sayName: function() {
    const innerFunc = () => {
      console.log(this.name);
    };
    innerFunc();
  }
};

person.sayName(); // => 'Tim'

In this example we get the response we are looking for. The reason is because the arrow function looks for the next function with context, in this case it is the anonymous function the arrow function is nested in. Then, this takes on the value of the object calling the anonymous function like we have seen before.

Conclusion

Yes this can be a very complicated topic to grasp. Once we are able to understand this we not only gain access to a extremely beneficial tool, we also gain a better understanding of how javascript operates. We gain a better understanding of context and object oriented programing. Not only simplify solutions but come up with new and unique ways to accomplish task.

DEV Community: DNelson35

Redux and Redux Toolkit for Beginners: A Comprehensive Tutorial

Introduction

What is Redux

How Redux Works

How Redux three Steps Work

Set Up Redux

Create a App

Install Libraries

Reducers

Store

Last Step The Provider

How to use Redux

conclusion

Ruby Serializers: Simplifying Data Serialization for Web Developers

Introduction:

Understanding Data Serialization:

The Need for Serializers:

Controlling Inclusion:

Embedding Associations:

Conclusion:

A Beginner's Guide to Regular Expressions in Ruby

What are Regular Expressions?

Defining a Regular Expression

Matching Text with Regular Expressions

Character Classes

Quantifiers

Anchors

Grouping and Capturing

Replacing Text with Regular Expressions

Conclusion

React's useContext Hook

What is useContext Hook?

How To useContext

Advantages of Using useContext Hook

Best Practices

Conclusion

How "this" Works

About "this"

Working With 'this'

Binding this

Implicit Binding

Explicit Binding

New Binding

Arrow Functions With this

Conclusion

Binding `this`

Arrow Functions With `this`