스코프

scope란?

변수가 존재하는 범위를 말한다.
스코프는 같은 단계에 있을 경우 무조건 충돌이 일어난다.
이러한 충돌이 일어나지 않게 하는 방법으로는
1. 중괄호를 사용해서 블록을 만들거나
2. 함수를 생성해서 블록을 만드는 방법이다.

let pi = 3.14
console.log(`파이 값은 ${pi} 입니다..`)

// 블록을 사용한 스코프 생성
{
    let pi = 3.141592
    console.log(`파이 값은 ${pi} 입니다..`)
}
console.log(`파이 값은 ${pi} 입니다..`)


// 함수 블록을 사용한 스코프 생성
function sample(){
    let pi = 3.141592
    console.log(`파이 값은 ${pi} 입니다..`)
}
sample()
console.log(`파이 값은 ${pi} 입니다..`)
//결과값
//파이 값은 3.14 입니다..
//파이 값은 3.141592 입니다..
//파이 값은 3.14 입니다..
//파이 값은 3.141592 입니다..
//파이 값은 3.14 입니다..

이렇게 블록 내부에서 같은 이름으로 변수를 선언하면 변수가 외부 변수와 충돌하지 않고 외부 변수를 가립니다.
내부 블록에서는 내부 블록에서 선언한 변수만 볼수 있습니다.

• 이렇게 블록이 다른 경우 내부변수가 외부변수를 가리는 현상을 섀도잉 이라고 합니다.

Local scope

let globalMessage = 'global'; //전역변수 global variable
function printMessage(){
 	let message = 'hello'; //지역변수 local variable
  	console.log(message); //hello 표출됨
 	console.log(globalMessage); // 안에서 출력하면 global 가 표출됨
}
console.log(message); //밖에서 출력하면 에러가 발생함

이렇게 함수안에서 또 함수를 선언할수도 있따.

let globalMessage = 'global'; //전역변수 global variable
function printMessage(){
 	let message = 'hello'; //지역변수 local variable
  	console.log(message); //hello 표출됨
 	console.log(globalMessage); // 안에서 출력하면 global 가 표출됨
    function printAnother(){
      let childMessage = 'childMessage'; //지역변수 local variable
      console.log(message); //hello 표출됨
    }
    console.log(childMessage); // 부모에서 출력하면 에러가 발생한다.
}
console.log(message); //밖에서 출력하면 에러가 발생함

스코프는
밖에서는 안이 보이지 않고 접근이 불가능하다.
안에서는 밖을 볼수 있으며 접근이 가능하다

즉시 호출 함수 충돌 문제 해결방법

구 버전의 자바스크립트에서 변수를 선언할때 사용하던 var 키워드는 함수 블록을 사용하는 경우에만 변수 충돌을 막을수 있다.
babel 등 최신 버전의 자바스크립트를 구 버전의 자바스크립트로 변경해주는 트랜스 파일러도 단순한 블록으로 함수 충돌을 막는 코드는 제대로 변환해주지 못한다고 한다.
그래서 많은 개발자들이 함수 블록을 사용해서 이러한 문제들을 해결한다고 한다.
충돌 문제를 해결하기 위해 사용하는 것이므로 함수를 만들자 마자 즉시 호출할수 있도록 이렇게 사용한다고 한다

let pi = 3.14
console.log(`파이 값은 ${pi} 입니다..`);

//즉시 호출 함수를 사용해 변수 이름 충돌 문제를 해결한다.
(function () {
    let pi = 3.14
    console.log(`파이 값은 ${pi} 입니다..`);

})()
//결과값
//파이 값은 3.14 입니다..
//파이 값은 3.14 입니다..