JavaScript 루프 내에서 동적 변수 이름 생성하는 방법

루프에서 동적 변수 이름 만들기

자바스크립트에서는 var, let 키워드로 문자열을 조합해 새로운 변수를 직접 선언할 수 없습니다. 대신 현재 스코프(scope)의 객체에 속성(property)을 동적으로 추가하면 원하는 효과를 얻을 수 있습니다.

전역 스코프나 일반 함수 스코프에서는 this가 현재 실행 컨텍스트를 가리키므로, 이를 활용해 다음과 같이 작성할 수 있습니다.

동적 속성 생성 예제

for (var i = 0; i < coords.length; ++i) {
    this["marker" + i] = "add here";
}

위 코드는 반복문이 돌 때마다 marker0, marker1, marker2… 처럼 인덱스 번호가 붙은 이름의 속성을 차례대로 생성합니다.

생성된 값 접근하기

이렇게 만든 속성은 일반 변수처럼 점 표기법 또는 대괄호 표기법으로 접근할 수 있습니다.

var a = this.marker0;
alert(a); // "add here" 출력

브라우저 환경의 전역 스코프라면 this 대신 window 객체를 사용해도 결과는 동일합니다.

더 좋은 대안: 배열과 객체 사용

동적으로 이름을 붙인 변수는 디버깅이 어렵고 전역 스코프를 오염시킬 수 있으므로, 실무에서는 배열(Array)이나 객체(Object)를 사용하는 것이 권장됩니다.

// 배열 활용
var markers = [];
for (var i = 0; i < coords.length; ++i) {
    markers[i] = "add here";
}
alert(markers[0]); // "add here" 출력

배열을 사용하면 length로 개수 확인, forEach나 map으로 순회 처리 등이 가능해 코드가 훨씬 깔끔하고 관리하기 쉬워집니다.