DEV Community: Wheval

Behind the Code: Variables And Functions

Wheval — Wed, 12 Jun 2024 01:28:40 +0000

Hoisting is a fundamental concept in JavaScript that often confounds newcomers and even seasoned developers. This article aims to demystify hoisting by explaining what it is, how it works, and how it affects the way you write and debug JavaScript code.

What is Hoisting?

Hoisting is JavaScript's default behavior of moving declarations to the top of their containing scope during the compile phase. This means that variable and function declarations are processed before any code is executed, regardless of where these declarations appear in the source code.

How Hoisting Works

Variable Hoisting

In JavaScript, both var and function declarations are hoisted. However, the way they are hoisted differs.

Hoisting with `var`

Variables declared with var are hoisted to the top of their function or global scope, but their initialization remains in place. This means that the variable is undefined until the execution reaches the line where the variable is initialized.

console.log(hoistedVar); // Output: undefined
var hoistedVar = "I am hoisted!";
console.log(hoistedVar); // Output: I am hoisted!

In this example, the declaration var hoistedVar; is hoisted to the top, but the assignment hoistedVar = "I am hoisted!"; stays in its original place.

Hoisting with `let` and `const`

Variables declared with let and const are also hoisted, but unlike var, they are not initialized with undefined. Instead, they remain in a "temporal dead zone" (TDZ) from the start of the block until the declaration is encountered. Accessing these variables before the declaration results in a ReferenceError.

console.log(hoistedLet); // ReferenceError: Cannot access 'hoistedLet' before initialization
let hoistedLet = "I am not hoisted!";

Function Hoisting

Function declarations are fully hoisted, meaning both the declaration and the definition are moved to the top of the scope.

hoistedFunction(); // Output: I am hoisted!
function hoistedFunction() {
 console.log("I am hoisted!");
}

In this case, the entire function declaration is hoisted, so you can call the function before it appears in the code.

Function Expressions and Arrow Functions

Function expressions and arrow functions are not hoisted. These functions behave like variables declared with let or const.

hoistedFunctionExpression(); // TypeError: hoistedFunctionExpression is not a function
var hoistedFunctionExpression = function() {
 console.log("I am not hoisted!");
};

Here, hoistedFunctionExpression is hoisted as a variable, but it is undefined until the assignment is executed.

Practical Implications of Hoisting

Avoiding Common Pitfalls

Understanding hoisting helps avoid common pitfalls such as accessing variables before they are declared. Always declare variables at the top of their scope to minimize confusion and potential errors.

// Bad practice
console.log(value); // Output: undefined
var value = 10;
// Good practice
var value;
console.log(value); // Output: undefined
value = 10;

Using `let` and `const`

Prefer using let and const over var to take advantage of block scope and avoid hoisting-related issues. This practice leads to clearer and more predictable code.

if (true) {
 let blockScopedVar = "I am block scoped!";
 console.log(blockScopedVar); // Output: I am block scoped!
}
// console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

Functions and Hoisting

Be mindful of the distinction between function declarations and expressions. Use function declarations when you want to take advantage of hoisting, and function expressions when you prefer to control the exact timing of function definition.

// Function declaration
hoistedFunction();
function hoistedFunction() {
 console.log("This is a hoisted function!");
}
// Function expression
// nonHoistedFunction(); // TypeError: nonHoistedFunction is not a function
var nonHoistedFunction = function() {
 console.log("This is not a hoisted function!");
};

Conclusion

Hoisting is a powerful feature of JavaScript that, when understood and used correctly, can lead to more effective and predictable code. By recognizing how variable and function declarations are hoisted and how different types of declarations behave, you can avoid common pitfalls and write cleaner, more maintainable JavaScript code. Always remember to declare your variables and functions at the beginning of their respective scopes, and prefer let and const over var to reduce the risk of unexpected behavior.

You are Writing Reactjs Wrongly!!

Wheval — Wed, 22 May 2024 07:01:00 +0000

Before you come at me, do you believe in programming paradigms like DRY — Don’t Repeat Yourself? If so, why do you code in React like this?

// Header.jsx
import React from "react";

const Header = () => {
  const handleClick = () => {
    // code to handle click functionality
  };

  return (
    <nav>
      <a href="/contact-me">Contact Me</a>
      <a href="/projects">Projects</a>
      <a href="/about">About Me</a>
      <a href="/others">Others</a>
    </nav>
  );
};

export default Header;

Why not like this?

//Header.jsx
import React from "react";

const socials = [
  {
    name: "Contact Me",
    url: "/contact-me",
  },
  {
    name: "Projects",
    url: "/projects",
  },
  {
    name: "About Me",
    url: "/about",
  },
  {
    name: "Others",
    url: "/others",
  }
];

const Header = () => {
  const handleClick = () => {
   // code to handle click functionality
  };

  return (
         <nav>
            {
              socials.map((social, index) => {
                return <a key={index} href={social.url}>{social.name}</a>
              })
            }
          </nav>
  );
};
export default Header;

However, in a simple use case like this example, either method has an insignificant performance difference.

In more complex scenarios where there is a much larger number of elements to be rendered. The second method is more performant and scalable.

Many developers overlook one of React’s core features: Component Reusability. Component Reusability means components created once can be rendered severally on the same or multiple pages. One method to achieve this is Component Composition.

In this article, let us consider two main concepts in building Reusable Components by Component Composition:

Component Specialization

This concept involves creating special types of an existing component through props. For example, a Button component can be specialized to create PrimaryButton, SecondaryButton, IconButton, etc., each with its unique styles or behaviors.

// Button.jsx
const Button = ({ children, color, handleClick }) => {
  return (
    <button style={{ backgroundColor: `${color}` }} onClick={handleClick}>
      {children}
    </button>
  );
};

// The specialized buttons are special instances of the Button Component
const SubmitButton = () => {
  const handleClick = () => {
    // Handle submit button click
  };

  return <Button color="blue" handleClick={handleClick}>Submit</Button>;
};
const ErrorButton = () => {
  const handleClick = () => {
    // Handle error button click
  };

  return <Button color="red" handleClick={handleClick}>Try Again</Button>;
};

Component Containment

This concept emphasizes that component do not know their children ahead of time. Instead, components should be designed to accept and render children dynamically, allowing for greater flexibility and reusability.

// Modal.jsx
const Modal = ({ children, type }) => {
  return (
    <div className={`modal modal-${type}`}>
      {children}
    </div>
  );
};

Benefits Of Component Composition

Scalability

Component composition allows for scalable and maintainable code in cases with multiple elements to manage. As the application grows, new elements can be added without rewriting existing components.

Reusability

Components designed with reusability in mind can be used multiple times across different parts of an application, reducing code duplication and enhancing maintainability.

Better Organization

Component composition encourages better organization of code. By breaking down the UI into smaller, reusable components, the overall structure of the application becomes clearer and more modular.

Conclusion

In essence, you are miswriting React if you are not building reusable components. Embracing concepts like Component Specialization and Component Containment not only adheres to the DRY principle but also enhances your code's scalability, reusability, and organization. Start writing React the right way today!

🎯 Master Context API Permanently in 5 Steps

Wheval — Tue, 14 May 2024 08:02:58 +0000

Who is this for?

Any developer with prior knowledge in React and JavaScript.

Introduction

In React.js, context API is a common React API that helps to manage cross-cutting concerns like authentications, themes, and global state variables.
Breaking code into steps helps in mastering and understanding it. So, in this article, you will master the important five steps to create and use context API in your applications following the best practices.

Let's get to it

Step 1 - Create A Context

Firstly, you create a context, to create a context you have to import createContext from react. Then name your context for your use case, in my example ThemeContext, is the context for managing the application theme.

//ThemeContext.js
import React from "react"
import {createContext} from "react"

const ThemeContext = createContext()

Step 2- Create A Provider Component

Next, you create a React component that provides the data to be passed as props named value to the children of the component. In my example, the data passed is a state defining the theme, light or dark, and a toggleThemefunction, to switch between light and dark mode.

//ThemeContext.js
import React from "react"
import {createContext, useState} from "react"

const ThemeContext = createContext()

//Create a Provider Component
const ThemeProvider = ({children}) => {
//Create a theme state
  const [theme, setTheme] = useState("light")
//a function that toggles between light and dark mode
  const toggleTheme = () => {
    setTheme(prevTheme => {prevTheme === "light" ? "dark" : "light"}) ;
  }
  return (
    <ThemeContext.Provider value={{theme, toggleTheme}}>
        {children}
    </ThemeContext>
  )
}

export default ThemeProvider;

Step 3- Create a Custom Hook to Use The Context

For best practice, you create a custom hook that returns the data in the context. This helps to have all your imports from React.js in one file.
To do this you import useContext from the React package. Then pass the created context as an argument to the useContext function as in the example below.

//ThemeContext.jsx
import React from "react"

//import useContext from react
import {createContext, useContext, useState} from "react"

const ThemeContext = createContext()

const ThemeProvider = ({children}) => {
  const [theme, setTheme] = useState("light")
  const toggleTheme = () => {
    setTheme(prevTheme => {prevTheme === "light" ? "dark" : "light"}) ;
  }
  return (
    <ThemeContext.Provider value={{theme, toggleTheme}}>
        {children}
    </ThemeContext>
  )
}

export default ThemeProvider;

//Create and export your custom hook
export const useTheme = () => useContext(ThemeContext)

Step 4- Wrap Your App With The Provider Component

For your application to be able to consume the context you created, you have to wrap the entire app with the Provider Component. When you do this, your application becomes the children props passed to the Provider Component making the props values available to the application body.

//App.jsx
import React from "react";
//Import the context you created
import ThemeProvider from "./ThemeProvider";
import Body from "./component/Body";

const App = () => {
  return (
//Wrap your app with the Provider
    <ThemeProvider> 
      <Body/>
    </ThemeProvider> 
  )
}

export default App;

Step 5- Use your Custom Hook

Now, in the parts/components of your application that need to use the context. In my example, the Body component. You import your custom hook and consume its return values.

//Body.jsx
import React from "react";
import useTheme from "../ThemeContext"

const Body = () => {
  const {theme, toggleTheme} = useTheme()
  return (
   <main>
    <h1> I am the app in {theme} mode </h1>
    <button onClick={toggleTheme}>
         Click to toggle Between Modes 
    </button>
   </main>
  )
}

export default Body;

TL;DR

Step 1 - Create a React Context
Step 2 - Create a Provider component that passes the data as values props
Step 3 - Create a Custom hook that consumes the Context
Step 4 - Wrap your Application with the Provider Component
Step 5 - Use your custom hook to retrieve the values in components

Conclusion

Today, you have learned the best practices when using the context API in React.js. The process of mastery is in the doing. Build a little React application following these five steps and you will master this method.
If you have any questions or contributions, tell me about them in the comments and share them with a friend or co-worker who needs this, till next time.

How to Create React/Next.js App with a Fresh GitHub Repo

Wheval — Sat, 04 May 2024 03:22:13 +0000

In this article, you will be creating a super-simple Nextjs/React application locally and a GitHub repository linked to this application.

What do I need? (software used)
Visual Studio Code — for writing the code.
Google Chrome — f_or viewing your application._
Nodejs — for installing other required packages.
GitHub — for hosting your source code online.
Git — for file tracking.

How do you Install it?
Installation information is not provided here. Bookmark this page, while you find out how to install it.

Let’s get to the fun part.
In three steps,

Step 1 — Create a GitHub Remote Repository

Go to GitHub’s website here. Log in or Create an account.
Click the + icon on the menu bar of your account. And create a new repository.

Configure your repository, by giving it a name. (in my case, newapp)

IMPORTANT: Do not select “Add a README file”. Similarly, Do not “Add .gitignore”.

Step 2 — Create your Application Locally

In your desired folder/directory on your PC, run the following command to create your Nextjs app.

npx create-next-app@latest newapp
cd newapp

Optionally, to create your react app, run the following commands in your terminal

npx create-react-app newapp
cd newapp

Step 3 — Connect Local Application to Remote Repository

In the specified folder/directory, run the following commands on your terminal.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main

Replace “your-username” and “your-repo-name” with your GitHub username and repository.

Final Step- GET CODING!!.

At this point, you’re good to go.
Open your project in VSCode or any editor of your choice and code!!

DEV Community: Wheval

Behind the Code: Variables And Functions

What is Hoisting?

How Hoisting Works

Variable Hoisting

Hoisting with var

Hoisting with let and const

Function Hoisting

Function Expressions and Arrow Functions

Practical Implications of Hoisting

Avoiding Common Pitfalls

Using let and const

Functions and Hoisting

Conclusion

You are Writing Reactjs Wrongly!!

Component Specialization

Component Containment

Benefits Of Component Composition

Scalability

Reusability

Better Organization

Conclusion

🎯 Master Context API Permanently in 5 Steps

Who is this for?

Introduction

Step 1 - Create A Context

Step 2- Create A Provider Component

Step 3- Create a Custom Hook to Use The Context

Step 4- Wrap Your App With The Provider Component

Step 5- Use your Custom Hook

TL;DR

Conclusion

How to Create React/Next.js App with a Fresh GitHub Repo

Step 1 — Create a GitHub Remote Repository

Step 2 — Create your Application Locally

Step 3 — Connect Local Application to Remote Repository

Final Step- GET CODING!!.

Hoisting with `var`

Hoisting with `let` and `const`

Using `let` and `const`