[JS] 스코프(Scope) 이해하기

해당 글은 스코프와 스코프의 종류에 대해서 이해를 돕기 위해 작성한 글입니다.

 

 

1) 스코프(Scope)

---

💡 스코프(Scope)란?

- 선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다.
만약, 변수가 해당 스코프에 존재하지 않다면 사용할 수 없다. 그리고 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다.

 

[참고] 하위 스코프 → 상위 스코프 접근하는 경우와 상위 스코프 → 하위 스코프 접근하는 경우

/**
 * 하위 스코프 => 상위 스코프를 접근하는 경우 
 */
const ScopeComponent = () => {

    // 상위 스코프 
    const userId = "adjh54";

    const fn_controlScope = () => {
        // 하위 스코프 
        console.log("상위 스코프 접근이 가능합니다!", userId);
    };

    return (
        <></>
    )
}

/**
 * 상위 스코프 => 하위 스코프를 접근하는 경우 
 * => error
 */
const ScopeComponen2 = () => {

    const fn_controlScope = () => {

        // 하위 스코프 
        const userId = "adjh54"
    };
    // 상위 스코프 
    console.log(userId);    // Error ! - Cannot find name 'userId'.

    return (
        <></>
    )
}

[참고] 스코프에 대한 정의

스코프 - 용어 사전 | MDN

JavaScript Scope

 

1. 스코프의 동작 별 구분

---

💡 스코프의 동작 별 구분은 스코프를 결정하는 방식에 따라서 정적 스코프(=렉시컬 스코프), 동적 스코프로 나뉩니다.

 

1.1. 정적 스코프 (Static Scope) = 렉시컬 스코프(Lexical Scope)

---

💡 정적 스코프 = 렉시컬 스코프란?

- 함수의 스코프를 결정하는 방식 중 정적 방식은 함수를 선언한 시점에 스코프를 결정하는 방식을 의미합니다.
- 함수가 중첩되어 있을 때, 내부 함수 내에 해당 변수가 존재하지 않을 경우 상위 스코프에서 해당 변수를 찾는 방식을 의미합니다.

 

[예제 1] 예제에 대한 설명

- func1()을 호출하는 시점은 func1()의 선언은 func2()를 호출하고 있다. func2()에서는 해당 스코프에서 변수가 존재하지 않기에 상위 스코프에서 해당 변수를 찾습니다.
- func2()을 호출하는 시점은 역시 x 변수에 대해서 존재하지 않기에 상위 스코프에서 해당 변수를 찾습니다.

 

let x = "Global Variable";

// 함수 선언
function func1() {
  let x = "Local Variable";
  func2();
};

// 함수 선언
function func2() {
  console.log(x);
};

func1(); // Global Variable
func2(); // Global Variable

 

[예제 2] 예제에 대한 설명

- func1()을 호출하는 시점에 func1()은 지역변수로 값이 선언되어 있어서 이를 출력한다.
- func2()을 호출하는 시점에 func2()는 변수내에서존재하지 않기에 상위 스코프에서 해당 변수를 찾는다.

let s = "Global Variable";

// 함수 선언
function func1() {
    let s = "Local Variable";
    // 함수 선언 당시 지역 변수의 스코프를 가진다.
    console.log(s);   // Local Variable
    func2();
}

// 함수 선언
function func2() {
    // 함수 선언 당시의 전역 변수의 스코프를 가진다.
    console.log(s);   // Global Variable
}

// 함수 1 호출
func1();

 

1.2. 동적 스코프 (Dynamic Scope)

---

💡 동적 스코프란?

- 함수의 스코프를 결정하는 방식 중 동적 방식은 함수를 호출한 시점에 스코프를 결정하는 방식을 의미한다.
- 동적 스코프의 선언은 런타임 도중에 실행 컨텍스트나 호출 컨텍스트에 의해 결정됩니다.

 

 

2. 스코프의 레벨 별 구분

---

2.1. 전역 스코프 (Global Scope)

---

💡 전역 스코프는 전역으로 선언된 변수에 대해 접근과 조작이 가능한 유효한 범위를 의미한다.

import { useEffect } from "react";

// 전역 스코프(Global Scope) 변수 선언
const USER_ID = "adjh54"
const ScopeComponent = () => {

    // 전역 스코프(Global Scope) 변수 선언
    const BLOG_URL = "<https://adjh54.tistory.com/>"

    const fn_controlScope = () => {
        console.log(USER_ID);   // 전역 스코프(Global Scope) 변수 접근
        console.log(BLOG_URL);  // 전역 스코프(Global Scope) 변수 접근 
    };

    return (
        <></>
    )
}
export default ScopeComponent;

 

2.2. 지역 스코프 (Local Scope)

---

💡 지역 스코프는 변수가 함수 혹은 블록 내에서 접근(호출)이 가능한 유효한 범위를 의미한다.
함수 내에서 유효한 경우의 함수 스코프와 블록 내에서 유효한 경우의 블록 스코프를 의미한다

import { useEffect } from "react";

const ScopeComponent = () => {

    const fn_controlScope = () => {
        let userId = "adjh54";      // 함수 스코프(Function Scope) 변수 선언
        console.log(userId);        // 함수 스코프(Function Scope) 변수 접근 

        if(userId.length > 1){
            const userBlog = "<https://adjh54.tistory.com/>"; // 블록 스코프(Block Scope) 변수 선언
            console.log(userBlog);                          // 블록 스코프(Block Scope) 변수 접근
        }
        console.log(userBlog);  // 블록 스코프(Block Scope) 변수 접근 Error - userBlog' is not defined. 
    };
    console.log(userId);        // 함수 스코프(Function Scope) 변수 접근 Error - 'userId' is not defined.

    return (
        <></>
    )
}
export default ScopeComponent;

 

2.3. 함수 스코프(Function Scope)

---

💡 함수 스코프는 선언한 변수가 함수 내에서 유효한 범위를 의미한다.

import { useEffect } from "react";

const ScopeComponent = () => {

    const fn_controlScope = () => {
        const userId = "adjh54";    // 함수 스코프(Function Scope) 변수 선언
        console.log(userId);        // 함수 스코프(Function Scope) 변수 접근 
    };

    console.log(userid);            // Error ! - Cannot find name 'userid'.

    return (
        <></>
    )
}
export default ScopeComponent;

 

2.4. 블록 스코프 (Block Scope)

---

💡 블록 스코프는 선언한 변수가 블록(중괄호 내)에서 유효한 범위를 의미한다.

import { useEffect } from "react";

const ScopeComponent = () => {

    const fn_controlScope = () => {
        const userId = "adjh54";    // 함수 스코프(Function Scope) 변수 선언

        if (userId.length > 1) {
            const isSuccess = true;     // 블록 스코프(Block Scope) 변수 선언
            console.log(isSuccess);     // 블록 스코프(Block Scope) 변수 접근 - true
            
        }
        return isSuccess;           // Error! - Cannot find name 'isSuccess'.
    }

    return (
        <></>
    )
}
export default ScopeComponent;

 

2) 스코프 체인(Scope Chain)

---

💡 스코프 체인이란?

- 스코프 체인은 현재 스코프 레벨에서 변수가 존재하지 않는 경우 상위 스코프에서 찾는 것을 의미합니다. 이 찾는 과정은 스코프를 안에서 바깥쪽으로 단계적으로 탐색하는 과정이다. (내부 -> 외부 -> 전체)

 

3) 오늘의 결론

---

스코프를 이해해야 자유롭게 변수 및 함수를 선언과 호출이 가능하기에 명확하게 이해를 해야 할 것 같습니다.

 

 

 

 

 

 

오늘도 감사합니다😀