TIL(20.02.26) Javascript(Scope, Closure)

이민택·2020년 2월 26일

TIL

목록 보기

10/44

Scope

Scope 란 사전적인 의미로는 '범위' 라는 뜻이다 javascript에서도 비슷한 의미로 변수에 접근할 수 있는 범위를 말한다. 즉 어떤 변수가 어떤 범위 안에서 접근할 수 있고 그 값이 유효한지를 나타내 주는 것이다 이는 프로그램 언어를 설계할 때 미리 설정한다

1. Local Scope,Global Scope

Local Scope

Local Scope 는 block scope를 정의하는 {} 안에서만 유효한 범위이다 이 범위에서 선언한 변수는 이 범위 안에서만 사용이 가능하지만 이 범위 밖에서는 사용이 불가능하다 이 범위는 중첩으로 아래와 같이 사용할 수 도 있다

let global="it's global";

{
  let temp1='hi';
  {
   let temp2='hello';
   console.log(temp1);
   console.log(temp2); 
  }
  console.log(temp1);
  // console.log(temp2); temp2는 존재하지 않는 변수이기 때문에
}

위 코드에서 보면 temp1과 temp2 는 서로 각자의 local scope를 가지고 있다 temp1이 속한
범위에서는 temp2에 접근할 수 없다 이미 temp2의 범위가 이미 종료되었기 때문이다.
temp2의 범위에서 temp1의 값을 호출하는 것을 볼 수 있는데 이는 scope가 중첩이 가능하다는 뜻이다

Global Scope

Global Scope의 경우 선언한 후 파일 내부에서는 언제든지 접근할 수 있게 된다 따라서 어떤 local scope에서도 접근이 가능하게 된다

let global="it's global";

{
  let temp1='hi';
  {
   let temp2='hello';
   console.log(temp1);
   console.log(temp2); 
   console.log(global);  
  }
  console.log(temp1);
  console.log(global); 
}

2. Function Scope,Block Scope

Block Scope

Block Scope는 중괄호{} 로 구분되는 scope를 말한다 이 범위에서는 이 범위 내에서 만 선언된 변수에만 접근이 가능하다.

Function Scope

Function Scope 는 함수 자체가 가지는 범위로 이 범위는 global 적으로 사용이 가능하다

function test(){
  for(let i=0;i<10;i++){
    console.log('block');
  }
  console.log(i);//// 버그가 난다
}
test()

var, let, const

이 예약어들은 변수를 사용할 때 사용하는 예약어 이다

var : 이 예약어를 이용하여 변수를 선언한면 이 변수는 function scope를 가진다 이 범위르 가지는 변수는 global하게 접근이 가능하다
let : let은 block scope를 가진다 따라서 let으로 선언된 변수는 변수가 선언된 scope에서만 사용이 가능하다,값의 재정의는 가능하지만 재선언은 불가능하다
const : let과 같이 block scope를 가지는데 const로 선언된 변수는 값의 재정의 ,재선언이 안된다

function checkVar(){
    var name='LeeMintaek'
    if(name==='LeeMintaek'){
        var age=25;
    }
    return name+age;
}


console.log(checkVar());

위 코드에서는 age가 block scope를 벗어났지만 var로 선언되었기 때문에 에러없이 함수가 반환된다

3. 전역 변수와 window 객체

window객체

이 객체는 global하게 선언된 모든 변수와 함수를 가지고 있는 변수이다 따라서 dot notatino연산자를 이용하여 조회가 가능하다.

4. 선언없이 초기화된 전역변수

선언없이 초기화된 변수는 전역변수로 취급되기 때문에 사용을 안하는 것이 좋다 전역으로 선언되면 개발자의 의도와 다르게 변경될 수 있기 때문이다.

Closure

closure란 외부함수의 변수에 접근할 수 있는 내부 함수이다 이 함수를 이용하면 함수내부에서 선언된 변수를 보존하면서 해당 변수에 접근할 수 있다 아래 코드르 보면 알 수 있다

function testClosure(age) {
    let fAge=age;
    return function newYear() {
        fAge++;
        console.log("새해가 밝았습니다 나이는 "+fAge+"입니다.");
    }
    
}

let temp=testClosure(19);
temp();
temp();
temp();