3. 블록 유효 범위 변수로 정보를 격리하라

이번 글에서는 반복문에서 let을 사용해 유효 범위충돌을 방지하는 방법을 살펴보려 한다.

 

블록 유효 범위 변수 선언을 이용하면 변수는 블록 내에서만 접근할 수 있다고 했는데

 

for문 내부에 선언한 변수도 for문의 중괄호 밖에서는 접근할 수 없다. 반대로 함수 외부에 선언한 변수는 블록 내부에서 접근할 수 있다.

 

함수의 최상위에서 블록 유효 범위 변수를 선언한 경우에는 함수 내부의 if문이나 for문에서 접근할 수 있다.

 

반면에 어휘적 유효 범위를 따르는 변수를 선언한 경우에는 함수 내부 어디서든 접근할 수 있다.

 

이 경우 if 블록 내부에서 생성한 변수를 함수 내부의 다른 곳에서 접근할 수 있다.  

function addClick(items){
	for(var i=0; i<items.length; i++){
    	items[i].onClick = function () {
        		return i;
        };
    }
    return items;
}
const example = [{}, {}];
const clickSet = addClick(example);
clickSet[0].onClick();

위 코드는 배열의 어떤 항목을 선택해도 결과가 똑같다. -> 유효 범위의 문제로 var로 할당한 변수는 함수 유효 범위를 따르기 때문이다(어휘적 유효 범위를 의미한다)

 

즉, 함수 내에서 마지막으로 할당한 값을 참조한다.

 

3번째 줄에서 추가한 새로운 함수는 i값을 설정한 시점이 아닌 코드를 호출한 시점의 i값을 반환한다.

 

function addClick(items){
	for(let i=0; i<items.length; i++){
    	items[i].onClick = function () {
        		return i;
        };
    }
    return items;
}
const example = [{}, {}];
const clickSet = addClick(example);
clickSet[0].onClick();

위 코드는 var를 let으로만 변경한 코드인데 let은 블록 유효 범위를 따르므로, 블록 내에서 선언한 변수는 해당 블록에서만 유효하다. 따라서 반복되어 값이 변경되어도 이전에 선언한 함수의 값은 변경되지 않는다.

-> 쉽게 말하면 let을 이용하면 for문이 반복될 때마다 값을 잠근다.

 

다음 글에서는 템플릿 리터럴을 이용해 데이터를 읽을 수 있는 문자열로 변환하는 방법을 알아보려 한다.