스코프

스코프 => 변수가 가지는 유효범위
변수의 선언 위치에 따라서 유효범위가 달라짐
=> 전역스코프, 지역 스코프로 나뉜다.

전역 스코프와 지역 스코프 나누는 기준은 함수

함수 외부 영역은 전역 스코프 영역, 함수 내부 영역은 지역 스코프 영역

전역 스코프에서 영역에서 선언된 변수는 전역 변수, 오직 1개만 존재
지역 스코프에서 영역에서 선언된 변수는 지역 변수, 같은 지역 스코프에서만 변수 참조 가능

const name = "철수"; //전역 스코프 
function printName() {
  const name="영희"; //제 이름은 영희입니다가 출력이 된다.
  console.log(`제 이름은 ${name}입니다.`);
}
printName()

순서는 지역스코프 -> 전역 스코프 -> undefined

변수 name이 똑같이 사용할 수 있는 이유는, 같은 스코프가 아니기 때문이다. 스코프가 다르기 때문에 사용이 가능하다.
let과 const라고 할지라도, 사용이 가능하다.

function printName() {
const name ='영희';
}
console.log(제 이름은 ${name}입니다.); => 참조가 되지 않음
왜냐하면, 지역 스코프 안에 있는 것을 전역 스코프가 참조할 수 없음

하나의 지역 스코프에서, 다른 지역 스코프를 참조할 수 없다.

---

스코프(scope)
스코프는 자바스크립트에서 변수가 가지는 유효 범위를 의미합니다.

자바스크립트는 크게 전역 스코프와 지역 스코프가 있습니다.

✨ 함수 레벨 스코프(function level scope)
함수 레벨 스코프는 함수를 기준으로 스코프의 영역이 나뉘는 것을 의미합니다.

자바스크립트는 기본적으로 함수 레벨 스코프를 따릅니다.

전역 스코프(global scope)
함수 내부가 아닌 외부의 영역은 전역 스코프 입니다.

전역 스코프는 자바스크립트에서 한 개만 존재할 수 있으며 모든 스코프에서 전부 참조할 수 있습니다.

지역 스코프(local scope)
함수의 내부 영역은 지역 스코프입니다.

함수가 여러개 선언되면 여러 개의 지역 스코프가 생성되고, 다른 함수의 지역 스코프는 서로 참조할 수 없습니다.

샘플 코드
아래의 코드에서 전역 스코프에서 선언된 변수는 name, 지역 스코프에서 선언된 변수는 age 입니다.

const name = '철수';
function printIntroduce(){
const age = 19;
}

✨ 블록 레벨 스코프(block level scope)
블록 레벨 스코프는 중괄호({})로 스코프가 나뉘는 것을 의미합니다.

자바스크립트는 기본적으로 함수 레벨 스코프를 따르지만, ES6에서 추가된 let과 const 키워드로 선언된 변수는 블록 레벨 스코프를 따릅니다.

전역 스코프
블록 레벨 스코프에서의 전역 스코프는 중괄호 밖의 영역을 의미합니다.

지역 스코프
블록 레벨 스코프에서의 지역 스코프는 중괄호 내부의 영역을 의미합니다.

따라서 블록 레벨 스코프를 따르는 예외적인 상황에서는 의도하지 않게 지역 스코프 영역으로 구분될 수 있으니 주의가 필요합니다.

아래의 코드에서 변수 a와 변수 b는 모두 printNum 함수 내부의 지역 스코프에서 선언된 변수이지만, let과 const 키워드는 블록 레벨 스코프를 따르므로 같은 지역 스코프 내에서도 스코프의 범위가 나뉘게 됩니다.

따라서 아래 코드처럼 블록 밖에서 변수 b를 참조하려고 할 경우 ‘b is not defined’ 에러가 발생하게 됩니다.

function printNum(){}
{
  const a = 10; 
  {
    const b = 20;
  }
  console.log(b); // undefined
}
printNum();

아래의 코드에서 변수 a와 b는 함수 외부에서 선언된 변수이기 때문에 전역 스코프에서 선언된 변수인 것처럼 보입니다.

하지만 변수의 선언 키워드가 const 키워드이기 때문에 해당 변수는 블록 레벨 스코프의 규칙을 따르게 되어서 변수 b는 전역 스코프가 아니라 지역 스코프가 되어버립니다.

따라서 함수 내부에서 변수 b를 참조하는 게 불가능합니다.

const a = 10;
{
  const b = 20;
}
function printNum(){
  console.log(b); // b is not defined
}
printNum();

내부 함수와 스코프

const a =10; //전역변수는 어느 곳이든 사용이 가능해야 한다. 
//inner함수에 b는 전역 스코프가 되지 않는다. 왜냐하면, b는 다른 곳에서 사용이 안됨.
function outer() {
  const b = 20;
  function inner() {
    const c=30;
    console.log(b);
  }
  inner(); //20이 출력이 된다.
}
outer()

function other() {
  console.log(b);
}
other() //참조 되지 않고, 오류가 발생한다. 

블록 레벨 스코프