JavaScript에서 이름 문자열로 전역 변수를 동적으로 가져오는 방법

JavaScript에서 var 키워드로 선언한 전역 변수나 var 없이 선언된 변수는 모두 window 객체의 속성(property)으로 자동 등록됩니다. 이러한 특성을 활용하면 문자열을 조합해 변수 이름을 동적으로 생성한 다음, 대괄호 표기법(bracket notation)을 사용하여 해당 전역 변수의 값에 접근할 수 있습니다.

가져온 값은 alert() 함수를 사용해 화면에 표시할 수 있으며, 기본 문법은 다음과 같습니다.

alert(window['yourVariableName' + 'yourVariableName' + otherVariableName]);

window 객체 뒤에 대괄호를 붙이고 그 안에 문자열 또는 문자열을 반환하는 표현식을 작성하면, 해당 이름을 가진 전역 변수의 값이 반환됩니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
   var globalVariablelocal_print100=100;
   print100=1;
   alert(window['globalVariable' + 'local_' + print100]);
</script>
</body>
</html>

코드 설명

var globalVariablelocal_print100 = 100; — var 키워드로 선언된 전역 변수는 window 객체의 속성으로 등록됩니다.
print100 = 1; — var 없이 선언된 변수 역시 전역 변수가 되어 window 객체에 추가됩니다.
alert(window['globalVariable' + 'local_' + print100]); — 문자열 'globalVariable', 'local_', 변수 print100의 값(1)이 차례대로 연결되어 'globalVariablelocal_1'이라는 이름이 만들어지고, window 객체에서 이 이름과 일치하는 속성 값인 100을 찾아 경고창에 표시합니다.

프로그램 실행 방법

위 코드를 anyName.html(index.html)이라는 파일 이름으로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server 옵션을 선택하면 브라우저에서 바로 실행할 수 있습니다.

출력 결과

JavaScript에서 이름 문자열로 전역 변수를 동적으로 가져오는 방법

주의 사항

ES6에서 도입된 let과 const로 선언한 변수는 window 객체의 속성으로 등록되지 않기 때문에 이 방법으로 접근할 수 없습니다. 문자열로 동적 접근이 필요한 경우에는 반드시 var 키워드를 사용하거나 var 없이 변수를 선언해야 한다는 점을 기억하세요.