[JavaScript]스코프

스코프의 개념

총에 스코프와 같은 말로 '범위'라는 뜻을 가지고 있습니다.

JavaScript에서는 '변수에 접근할 수 있는 범위'라고 쓰입니다.

 

스코프의 종류

• 전역 스코프 
  • 블록{} 바깥이나 함수 바깥에 선언된 변수입니다.
  • 전역 코스프에 변수를 선언하면 어떤 위치의 코드에서든 사용할 수 있음

      var fruit = 'apple';   //  전역스코프 (전역변수)
      
      function isGlobal() {
         return `${fruit} 입니다.`;
      }
      console.log(isGlobal());   //  apple 입니다.

• 지역 스코프
  • 블록 스코프
    • if 나 for문의 내부에 선언된 변수
    • {}로 블록이 생성될 때마다 새로운 스코프가 생성.
    • let과 const 키워드의 등장으로 블록 스코프를 형성하는 경우가 많아짐
    • 블록 내부에서만 사용 가능
  • 함수 스코프
    • 함수 내부에서 선언된 변수
    • 새로운 함수가 생성될 대마다 새로운 스코프가 발생한다.
    • 함수 내부에서만 사용 가능

 

      if(true) {
         let blockScope = "블록 스코프 입니다.";
      }
      console.log(blockScope);	//  Uncaught ReferenceError: blockScope is not define

블록 스코프

      function isLocal() {
         var fruit = "apple"    //함수스코프 (지역변수)
         return `${fruit} 입니다.`
      }
      console.log(fruit());   // apple 입니다.
      console.log(fruit);  //Uncaught ReferenceError: fruit is not defined

함수 스코프

 

스코프의 특징

• 중첩 가능
  • 중첩할 시 가장 바깥쪽에 있는 변수를 {} 블록 내에서 전역처럼 이용 가능
  • 가장 인접한 지역을 우선 참조함

let globalLocation = "allround";

function top(){
	let topLocation = "top";
    let changeLocation = "top"
    function middle(){
		let middleLocation = "middle";
        let changeLocation = "middle"
        console.log(globalLocation) 
        console.log(topLocation)
        console.log(middleLocation)
        console.log(changeLocation)
	}
    middle();
}
top();
/*출력
allriond
top
middle
middle
*/

• 지역변수가 우선순위가 높음
  • 전역 변수보다 지역변수가 더 강함

let golbalnumber = 3; //전역변수 선언

function iftest() {
	let golbalnumber = 6;//지역변수 선언
    if(golbalnumber===6){
    console.log("지역변수!!") 
    }
    if(golbalnumber===3){
    console.log("전역변수!!")
    }
}
//출력 지역변수!!

• {}(중괄호)를 기준으로 범위가 구분된다

 

스코프의 규칙

• 전역 변수는 어디서나 사용 가능하다 

let golbalnumber = 3; //전역변수 선언
function iftest() {
    if(golbalnumber===3){
    console.log("전역변수!!")
    }
}
//출력 전역변수!!

• 단 var를 이용한 변수 선언인 경우는 제외

function localtest() {
	let localText = "지역변수 입니다";
}

console.log(localText)
//출력 error!!

function localtest() {
	var localText = "지역변수 입니다";
}

console.log(localText)
//출력 지역변수 입니다!!

• let, var 등 선언 없이 변수를 할당하면 전역 변수로 취급된다

let globalLocation = "allround";
let globaltext = "전체";

function top(){
	let globalLocation = "top";
    globaltext = "꼭대기";
}
top();
console.log(globalLocation)
console.log(globaltext)
/*출력
allround
꼭대기
*/