if (roles.includes('ROLE_ADMIN')) {
	$("#ip1").parent().parent().hide();
	for (var i = 2; i <= a; i++) {
		$("#ip" + i).parent().parent().remove();
	}
} else {
	$("#ip1").parent().parent().show();
	for (var i = 2; i <= a; i++) {
		$("#ip" + i).parent().parent().remove();
	}
}

회사에서 이런식으로 한 블록 내에 두개의 for 문을 써야할 때가 있었다.

호환성을 위해 ES5 문법을 써야했고, 나는 자연스럽게 for문 하나당 var를 사용하여 i를 선언했다.

그랬더니 아래와 같은 경고가 뜨는것이 아닌가!

오잉 난 분명 블록 범위 내에 다른 변수를 선언한건데… 하고 찾아보니 var는 다른 언어와 같이 블록 범위로 사용되지 않는다는 것을 알 수 있었다.

ES6에서 추가된 문법중에 let이 있는데, let은 우리가 익히 알고 있는 것과 같이 블록 범위를 가지고, var는 함수 범위를 가진다고 한다.

그러니까, var로 선언된 변수는 해당 변수가 만들어진 함수 전체에 적용된다는 뜻.

따라서 위의 코드에 var 대신 let을 사용하면 경고가 사라진다.

그러면 var는 왜 이렇게 사용되고 설계되었을까 갑자기 궁금해져서 찾아보았다.

먼저, var는 JavaScript의 초기 버전에서 변수를 선언하는 유일한 키워드였다.

이 당시 var는 함수 범위를 가지는 것이 자연스러웠다.

왜냐하면, 당시 JavaScript는 간단한 웹 페이지 상호 작용을 위한 언어로 사용되었고, 함수 범위의 변수는 이러한 목적에 적합했다. 대부분의 로직은 함수 안에서 처리되고, 이벤트 리스너나 단순한 스크립트 코드로 되어있었다.

그러나 웹 애플리케이션의 복잡성이 증가하고, 블록 범위의 변수가 필요한 상황이 많아지면서 함수 범위의 변수만으로는 코드 관리가 어려워졌다.

따라서 ES6에서는 블록 범위의 변수를 선언할 수 있는 'let'과 'const' 키워드가 도입되었다.

이로써 개발자들은 변수의 스코프를 더 세밀하게 관리할 수 있게 되었다.