스코프

스코프(Scope , 유효범위)는 JS 에서만 쓰이는 개념이 아닌 모든 프로그래밍 언어의 기본적인 개념으로 확실한 이해가 필요하다.

스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떠한 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다.

 let name = '이동욱'

const a=()=>{
  let name= '이동훅'
  console.log(name)
  {
  	let name ='이동훅훅'
    console.log(name)
  }
}

a() 
//이동훅훅
//이동훅
console.log(name) //이동욱

이름이 같은 변수 name이 중복 선언되었다. 전역에서 변수 name을 참조할 때, 그리고 함수 foo내부에서 변수 name을 참조할 때 이름이 중복된 2개의 변수를 JS는 엇덕혜 식별하는 것일까?

프로그래밍은 변수를 선언하고 값을 할당하며 변수를 참조하는 기본적인 기능을 제공하며 이것으로 프로그램의 상태를 관리할 수 있다. 변수는 전역, 함수 내부, 코드 블록에 선언하며 코드 블록이나 함수는 중첩될 수 있다. 식별자는 자신이 어디에 선언됐는지에 의해 자신이 유효한 범위를 갖는다.

위 코드에서 전역에 선언된 변수 name은 어디에든 참조할 수 있다. 하지만 함수 a내에서 선언된 변수 name는 함수 a내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다.
이러한 규칙을 스코프라고 한다.

스코프의 구분

JS의 스코프에대해서 알아보자

전역 스코프(Global Scope)

전역에 변수를 선언하면 이 변수는 어디서든지 참조할 수 있는 전역 스코프를 갖는 전역 변수가 된다.
var로 선언한 전역변수는 Browser-side 에서 window 객체의 프로퍼티 , Server-side 에서는 global 객체의 프로퍼티가 된다. (let, const는 아님)

지역 스코프(Local Scope)

JS는 함수 레벨 스코프를 사용했지만 ES6로 넘어오면서 변수 선언시 let과 const를 권장하면서 사용하면서 블록 레벨 스코프가 되었다 해도 무방하다.(사견임)

함수 내에 존재하는 함수인 내부 함수의 경우를 살펴보자

let name = '이동욱'

const outer =()=> {
  let name = '이동훅'
  console.log(name);

  const inner=() =>{  // 내부함수
    console.log(name); // ?
  }

  inner();
}
outer();
console.log(name); // ?

내부함수는 자신을 포함하고 있는 외부함수의 변수에 접근할 수 있다.

함수 inner에서 참조하는 변수 name은 outer에서 선언된 지역변수이다.
이는 실행 컨텍스트의 스코프 체인에 의해 참조 순위에서 전역변수 name이 뒤로 밀렸기 때문