[JavaScript] 스코프(Scope)란?

요약

• 전역스코프 : 함수 또는 블록 외부
  • 전역 변수 : 코드 전체에서 사용 가능한 변수
  • 전역 함수 : 코드 전체에서 사용 가능한 함수
• 지역스코프 : 함수 또는 블록 내부
  • 지역 변수 : 함수 또는 블록 내에서 선언된 변수 (선언된 함수 또는 블록 안에서만 사용 가능)
  • 지역 함수 : 선언된 함수 내에서만 사용 가능
  • 함수스코프 : 함수 내에 선언된 변수는 그 함수 내에서만 사용 가능
  • 블록스코프 : 블록 내에 선언된 변수는 그 블록 내에서만 사용 가능

스코프란?

Scope를 한글로 범위라는 뜻의 영어이다.
자바스크립트에서도 스코프는 범위라는 뜻으로 변수, 함수와 같은 식별자에 접근이 가능한 유효 범위로 범위는 전역과 지역으로 나눌 수 있다.

• 전역(global) : 함수 또는 블록 외부에 선언
  전역 스코프는 코드 전체에서 사용이 가능하다.

  const a = 1;
  
  function func () {
      console.log(a)
  }
  
  func(); // 1

• 지역(local) : 함수 또는 블록 내부에 선언
  지역 스코프에는 함수 스코프와 블록스코프가 있다.

  • 함수스코프
    함수 내에서만 사용 가능

    function func() {
    	const scope = 1;
    }
    console.log(scope); // scope is not defined

  • 블록스코프
    if, for 등 블록{}문 내에서만 사용 가능

    if(true) {
    	const scope = 1;
    }
    console.log(scope); // scope is not defined

스코프 체인

스코프 간의 연결(Chain)으로 중첩된 함수들이 차례대로 레퍼런스가 저장되어 연결되어 있어서 해당 함수에 원하는 값이 없으면 상위 함수로 올라가 값을 찾는다.

let golbal = 1;

function func1 () {
     console.log(golbal); // 1 
	 golbal = 2;
    
    function func2 () {
     	console.log(golbal); // 2
        golbal = 3;
    }
    	func2();
        console.log(golbal); // 3
}

func1();

렉시컬스코프 (= 정적스코프)

렉시컬 스코프란 선언된 함수의 위치에 따라 상위 스코프가 결정되는 것

const a = 1;

function func1 () {
   	const a = 2;
    
    function func2() { // 지역함수, 상위 스코프 func1
    	console.log(a); // 2
    }
   	func2();
}

function func3() { // 전역함수이기 때문에 전역 변수 호출
	console.log(a); // 1;
}

func1();
func3();

전역변수와 지역변수

변수란 할당한 값을 저장하기 위한 메모리의 공간이다.
전역 변수는 코드 전체에 걸쳐서 사용이 가능한 변수이고, 지역변수는 선언된 스코프 내에서만 사용이 가능한 변수이다. 지역변수를 선언된 스코프 밖에서 선언하면 undefined 에러가 뜬다.

const global = 1; // 전역변수

function func () {
	console.log(global); // 1
    
    const local = 2; // 지역변수
    console.log(local); // 2
}

func();
console.log(local); // local is not defined

지역함수, 전역함수, 매개변수의 스코프,

함수란 특정 작업 또는 값 계산 등을 실행하기 위한 호출문이다.
전역 함수는 코드 전체에서 사용이 가능한 함수이고, 지역 함수는 선언문 내에 선언되어 선언된 곳 이외에서는 사용이 불가능한 함수이다.
함수의 매개변수는 함수 내에서만 사용이 가능하기 때문에 지역변수로 취급된다.

function golbalFunc() { // 전역함수
	function localFunc(parameter) { // 지역함수
    	console.log('local function');
        console.log(parameter);
 	}
    localFunc(25);
}

golbalFunc(); // local function 
localFunc(25); // localFunc is not defined

if(true) {
	function ifFunc() {
    	console.log('local function');
    }
    ifFunc(); // local function
}

function func() {
	ifFunc();
}
func(); // local function