JavaScript _개념정리/ 스코프(scope)개념 이해하기!

스코프

---

# 스코프 기본 개념

1. 스코프란 ?

scope는 쉽게 정의 하자면 변수가 영향을 미치는 유효 범위입니다.

이 스코프는 전역 스코프와 지역스코프로 나뉠 수 있습니다. 

 

우리는 이미 스코프를 경험하고 있습니다. 바로 함수입니다. 함수의 매개변수는 함수 몸체 내부에서만 참조 할 수 있고 몸체 외부에서는 참조할 수 없습니다. 이것은 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정 되어 있기 때문입니다.

 

function addNum(x, y)
// 매개변수는 함수 몸체 내부에서만 참조
// 즉 스코프(유효범위)는 함수 몸체 내부
console.log(x,y) // 3 7
return x + y;
}
 
addNum(3,7)
 
console.log(x,y) // ReferenceError : x is not defined

 

위 예시를 보았듯이 매개변수는 함수 내부에서만 참조 할 수 있습니다. 이것이 스코프의 아주 기본적인 개념입니다.

 

---

2. 전역스코프(global)와 지역스코프(local)

변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서 선언이 가능하며 코드 블록이나 함수는 중첩이 될 수 있습니다.

 

이때 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위인 스코프가 결정됩니다.

전역	코드의 가장 바깥 영역	전역 스코프	전역 변수
지역	함수 몸체 내부	지역 스코프	지역 변수

 

let x = 'global'
 
function joyfn() {
  let x = 'local';
  console.log(x);  // local
}
 
joyfn();
 
console.log(x); // global

4. 블록 레벨 스코프 

위의 2번째 예시랑 같은 맥락입니다. 좀 더 직관적으로 설명하자면 말 그대로 {} 안에서 유효한 스코프입니다. (함수, if문, for문, while문, try/catch문 등등)

 

let joyCoding = 'global'
 
{
 let joyCoding = "local"
 let happyCoding = 77
 
 console.log(joyCoding);  // local
}
 
console.log(joyCoding);   // global
console.log(happyCoding); //ReferenceError: happyCoding is not defined

 

let 키워드 변수는 블록 레벨 스코프를 따릅니다. 따라서 블록내에 선언된 joyCoding과 happyCoding (4,5번줄) 은 지역 변수입니다. 그래서 전역에 선언된 joyCoding과 블록내에 선언된 joyCoding은 이름은 같지만 별개의 변수입니다. happyCoding 변수도 마찬가집니다 그래서 블록내에 있는 변수는 전역 변수를 참조 할 수 없습니다.