스코프(1)

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• 1. 스코프
• 2. 스코프 체인
• 3. 변수 숨기는 방법 3가지
• 4. 클로져

 

<스코프>

1. 스코프 : 변수의 유효 범위(어디까지 참조 가능한가)

1-1) 스코프의 종류

• 전역 스코프 : 코드 어디에서든 참조 가능(남용x, 의존x)
• 지역 스코프 : 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조 가능
• 함수 스코프 : 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수
• 블록 스코프 : 코드 블록 내부에서 선언한 변수는 지역 변수. len과 const로 선언된 변수는 그 변수를 둘러싼 아무 블록의 스코프에 속함.

 

1-2) 자바스크립트 스코프의 특징

• 함수 단위의 유효범위 : if문, for문 등 구문들이 사용되었을 때, 중괄호 밖의 범위에서도 그 안의 변수 사용 가능
• 변수명 중복 허용 : 같은 변수명이 여러 개 있는 변수를 참조할 때 가장 가까운 범위의 변수를 참조함.
• var 키워드의 생략 : 변수를 선언할 떄, 보통 int나 char와 같은 변수 형을 사용하는 다른 프로그래밍 언어들과는 달리 자바스크립트는 var키워드를 사용하며, 이를 생략하여도 오류가 나지 않음.
• 렉시컬 특성

 

 

2. 스코프 체인

함수가 중첩함수일 때 상위함수의 유효범위까지 흡수하는 것.

즉, 하위함수가 실행되는 동안 참조하는 상위 함수의 변수 또는 함수의 메모리를 참조하는 것.

innerFunction 실행문맥의 유효범위 체인 리스트는 1번지에 상위 함수인 outerFunction의 변수 객체를 참조한다.

만약 innerFunction내부에 새로운 내부 함수가 생기게 되면 그 내부함수의 유효범위 체인 리스트의

1번지는 outerFunction의 변수 객체를, 2번지는 innerFunction의 변수 객체를 참조한다.

 

 

3. 변수 숨기기

3-1) var선언을 이용

function f1(a){    #외부 블록 
    function f2(a){   #내부 블록 
        return a-1; 
    } 

    var b;   #b를 외부로부터 숨김. var을 사용하지 않으면 전역으로 선언됨. 
    b = a+f2(a); 
    console.log(b); 
} 

f1(2);  //3 

 

3-2)  같은 이름을 선언하는 방법

{ 
    let x = 'blue'; 
    console.log(x);   //blue 
    { 
        let x = 'red';    #외부 블록의 x에 접근하지 못하게 함. 
        console.log(x);   //red 
    } 
    console.log(x);   //blue 
} 

 

3-3) 모듈 패턴을 이용하는 방법 : 모듈화하여 변수에 접근가능한 함수만을 제공, 직접적으로 변수에는 접근하지 못하게 함.

functio examModule() {   
    var something = "cool"; 
    var another = [1, 2, 3]; 
   
    function f2(a){   
        console.log(something);         
    } 

    function f2(a){   
        console.log(another);         
    } 

   return {   
        doSomething: doSomething, 
        doAnother: doAnother 
    }; 
}

 

 

4. 클로저 : 간단히 말해, 함수 내부에 작성된 함수이다. 내부함수에서 참조하는 외부함수는 닫히지 못하고 내부함수에 의해서 닫히게 된다.

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
#myFunc변수에 displayName을 리턴함
#유효범위의 어휘적 환경을 유지

myFunc();
#리턴된 displayName 함수를 실행(name 변수에 접근)

 

4-1) 클로저의 장점

• 스코프 안에서 함수를 정의하면 해당 스코프를 더 오래 유지할 수 있다.
• 접근할 수 없는 것에 접근할 수 있다.

let f;
{
    let o = { note: 'Safe' }
    f = function() {
    	return o;
    }
}
let oRef = f();
oRef.note = "Not so safe after all!"

 

 

[참고 사이트] 

스코프 체인 - http://www.nextree.co.kr/p7363/

클로저 - https://medium.com/@khwsc1/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80-javascript-scope-and-closures-8d402c976d19