JS - 스코프 ( Scope )

 

 

 

스코프 ( Scope ) 란

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

 

 

 

// 하위 스코프  => 상위 스코프 접근 ( 아무 이상 없이 작동 )
const fnScope = () => { 
	// 상위 스코프의 변수
    const name = 'KIM';
    
    const fnChildScope= () => {
    	console.log("상위 접근",name )
    }
}

 

// 상위 스코프 => 하위 접근 ( 에러 발생 )

const fnScope2 = () => {
	
    
    const fnChild = () => {
    	const name = 'KIM'; 
    }
    console.log(name); // ERROR Cannot find name 'name';
}

 

 

 

1. 스코프의 동작 별 구분

 

스코프를 결정하는 방식에 따라서 정적 스코프 ( 렉시컬 스코프 ) , 동적 스코프로 나뉜다.

 

 

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

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

let a = "Global";

function fn_1 () {
	let a = "Local";
    func2();
}

function fn_2 () {
	console.log(a);
}

fn_1(); // Global
fu_2(); // Global

정적 스코프의 예시로, 해당 함수들안의 변수값은 함수가 선언되는 당시의 전역 변수의 스코프를 가지기 때문에 데이터가 변경되어도 함수 선언당시의 값인 Global이 출력된다.

 

let b = 'Global';

function fn_1 () {
	let b = 'Local';
    console.log(b); // Local
    fn_2();
}

function fn_2 () {
    console.log(b); // Global
}

fn_1();

 

fn_1안의 콘솔에는 b에 대한 값을 변경한 뒤 console을 찍었기 때문에 함수 선언 당시 지역 변수의 스코프를 가지고 있어 Local이라는 값이 출력되고
fn_2안의 콘솔은 함수 선언시 전역변수에 대한 스코프를 가지고 있어 Global을 출력한다.

 

---

 

동적 스코프 ( Dynamic Scope )

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

 

 

 

2. 스코프의 레벨 별 구분

전역 스코프 ( Global Scope )

• 전역으로 선언된 변수에 대해 접근과 조작이 가능한 유효 범위를 의미

const CONST_NAME = "PARK"; // Global Scope 변수 선언
const fnScope = () => {
    
    const fnChildScope = () => {
    	console.log(CONST_NAME); // 전역 스코프 접근
    }
    
}

 

 

지역 스코프 ( Local Scope )

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

const fnScope = () => {
	
    
     const fnChildScope = () => {
     
        const CONST_TITLE = 'JS 연습';		// 함수 스코프 변수 선언
        console.log(CONST_TITLE)			  // 함수 스코프 변수 접근

        if(CONST_TITLE.length > 1){
            const CONST_NAME = 'PARK'; 	// 블록 스코프 변수 선언
            console.log(CONST_NAME)  				// 블록 스코프 변수 접근
        }
        
        console.log(CONST_NAME) // ERROR 블록 스코프 밖에서 블록스코프 접근으로 에러발생
		
     };
     console.log(CONST_TITLE) // ERROR 함수 스코프밖에서 안의 변수 접근으로 인한 에러발생
     
    
}

{} 안에서만 유효한 블록 스코프의 변수 CONST_NAME,
특정 함수 안에서만 유효한 함수 스코프의 변수 CONST_TITLE,
각각의 스코프 밖에서 안의 스코프를 접근시 에러를 발생 시킨다. 유효한 범위안의 접근이 아니기 때문이다.

 

3. 스코프 체인 ( Scope Chain )

• 스코프 체인은 현재 스코프 레벨에서 변수가 존재하지 않는 경우 상위 스코프에서 찾는 것을 의미합니다.
• 찾는 과정은 안쪽 스코프에서 바깥쪽으로 단계적으로 탐색하는 과정 ( 내부 > 외부 > 전체 )
• 그래서 변수 선언에 있어 내부스코프에 선언된 변수가 전역 스코프에 선언된 변수보다 더 우선시 된다.

 

출처  https://adjh54.tistory.com/54#1.%20%EC%8A%A4%EC%BD%94%ED%94%84%EC%9D%98%20%EB%8F%99%EC%9E%91%20%EB%B3%84%20%EA%B5%AC%EB%B6%84-1