[JavaScript/JQuery] 동적변수 사용 방법

 

안녕하세요. 
오늘은 자바스크립트에서 동적 변수를 생성하는 방법에 대해 포스팅해보겠습니다.

 

 

 

 

---

 

 

 

일반적인 다중 변수

 

 

var test1 = 1;
var test2 = 2;
var test3 = 3;
var test4 = 4;
var test5 = 5;
var test6 = 6;
var test7 = 7;
var test8 = 8;
var test9 = 9;
var test10 = 10;

 

스크립트에서 로직을 설계하게되면 위와같이 많은 변수들이 필요할 경우가 생기게 됩니다.
이를 개선하기 위해서 변수명을 동적으로 생성하여 효율적으로 코드를 짤 수가 있습니다.

 

eval()란 함수를 사용해서 동적 변수를 생성할 수 있으나 
성능이나 보안 디버깅의 어려움등의 단점이 있으며,
가장 중요한 것은 실행하는 과정에서 많은 성능 비용이 발생하여 
작동되지 않을 경우가 있었습니다.

 

 

 

---

 

 

 

동적 변수 생성 방법

 

 

var test = {};
for (var i = 1; i < 11; i++){ 
   test[`test`+i] = i;
}

그래서 저는 객체에 키값으로 변수명을 생성하는 방법을 이용해보았습니다.

 

 

 

{
 
test1:1,
test2:2,
test3:3,
test4:4,
test5:5,
test6:6,
test7:7,
test8:8,
test9:9,
test10:10
 
}

 

 

 

배열안에 동적 변수들이 생성이 되는 것을 확인할 수 있습니다.

변수명이 동일한 규칙을 갖고 있지만 코드도 짧고 로직에 맞게 동적인 변수를 생성할 수 있습니다.

 

 

 

 

 

반응형

 

 

 

---

 

 

 

 

 

동적 변수 사용 방법

 

 

 

console.log(test.test1);
결과값 : 1

 

 

 

사용할때는 위와 같이 test배열에 변수명을 선언해주는 것과,

 

 

var key = 'test1';
console.log(test[key]);
결과값 : 1

 

별도의 문자열 변수명을 선언하여 test배열 대괄호에 넣어주면 사용할 수 있습니다.