Hello! In this lecture, we will delve deeply into Scope in React. React is one of the most popular libraries in modern web development, helping to build user interfaces through a component-based architecture. Scope is one of the important concepts in JavaScript that represents the validity range of variables. Therefore, understanding scope within React components is essential.

1. What is Scope?

Scope refers to the range in which variables, functions, and objects are valid within a program. In JavaScript, there are mainly two types of scope: Global Scope and Local Scope.

• Global Scope is the range of variables that can be accessed from anywhere in the code. For example, variables defined at the top level of a script belong to the global scope.
• Local Scope is the range of variables that can only be accessed within a specific function or block. These variables exist only when the function or block is executed.

2. Types of JavaScript Scope

2.1 Global Scope

Global scope refers to variables that can be accessed from anywhere within the script. For example:

var globalVar = "This is a global variable";

function showGlobalVar() {
    console.log(globalVar);
}
showGlobalVar(); // This is a global variable

2.2 Function Scope

Function scope means that variables declared within a function are only valid within that function. For example:

function myFunction() {
    var localVar = "This is a local variable";
    console.log(localVar);
}

myFunction(); // This is a local variable
console.log(localVar); // Uncaught ReferenceError: localVar is not defined

2.3 Block Scope

Block scope, introduced in ES6 (ECMAScript 2015), allows you to define variables that are only valid within a { } block. Declaring variables with let or const creates block scope:

if (true) {
    let blockVar = "This is a block variable";
    console.log(blockVar); // This is a block variable
}

console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined

3. Managing Scope in React

When writing components in React, scope is particularly important. Each component manages its own state and can receive data from parent components through props. A clear understanding of React’s state and props is necessary to grasp the concept of scope.

3.1 State and Scope

The state of a React component stores the data at the time of rendering the component, and is mainly managed using the useState hook. State is a local variable that can only be accessed within the component. For example:

import React, { useState } from 'react';

function MyComponent() {
    const [count, setCount] = useState(0);

    return (
        

            
Current count: {count}
             setCount(count + 1)}>Increase
        
    );
}

3.2 Props and Scope

Props are a way to pass data from a parent component to a child component. Props have a global form for the child component, referencing values defined in the parent component. You can access props in a component as follows:

function ChildComponent(props) {
    return 
{props.title}
;
}

function ParentComponent() {
    return ;
}

4. Closure and Scope

A closure is a combination of a function and the lexical environment in which that function was declared. In JavaScript, functions remember the scope in which they were created. Thus, closures provide powerful functionality by leveraging scope.

function makeCounter() {
    let count = 0;
    return function() {
        count += 1;
        return count;
    };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

5. Conclusion

In this lecture, we learned about the concept of scope in React. Scope is a very important factor when defining and accessing variables, and without a basic understanding of JavaScript, writing components in React can be challenging. In future lectures, we will cover more advanced topics, so please look forward to it!