[JavaScript] 리스트에서 ''으로 묶인 값 제거해서 동적 property 사용하는 방법 - EVAL() 사용 피하기, 대괄호 표기법

 

리스트를 생성하고 그 값들으로 for문을 돌려 동적 property에 들어 있는 값을 사용해야하는 상황이있었다

 

잘못된 예)

//req.data = ['a': '1', 'b':'2', 'c':'3', 'd': '4', 'e': '5'];

var list = ['a', 'b', 'c', 'd', 'e'];
var result = req.data;

for(i in list){
console.log(result.list[i]);
}

 

처음에 당연히 result.list[i] 이렇게 작성하면 데이터가 뽑힐 줄 알았는데 오류가 났다..

 

이유는 정확히 모르겠으나 리스트 안에 ''으로 감싸져 있기 때문이 아닐까 하는데...

나도 정확한 이유가 궁금하다ㅋㅋ

 

아무튼 내가 해결한 방법은 result.list[i] 에서 result[list[i]] 이렇게 바꿔주는 것!!

 

이렇게 쓰는 걸 대괄호 표기법이라 부른다고 한다.

 

사실 가장 처음 찾은 방법은 eval() 함수를 사용하는 거 였는데,

eval()은 문자로 표현된 JavaScript 코드를 실행하는 함수이다.

절대 사용하지 말라고 한다...!

 

자세한 이유는 아래 링크에서 확인 할 수 있다

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval

eval() - JavaScript | MDN

 

올바른 예)

//req.data = ['a': '1', 'b':2, 'c':3, 'd': 4, 'e': 5];

var list = ['a', 'b', 'c', 'd', 'e'];
var result = req.data;

for(i in list){
console.log(result[list[i]]);
}

 

마침 소개하는 김에 대괄호 표기법에 대해 적어둬야겠다

 

const me = new object();

me.name = "ssollacc";
me.age= 24;
me.address = "서울어딘가";

대충 이런 me라는 객체를 만들고 name, age, address라는 속성을 추가한다.

이걸 중괄호로 표현하면

const me = {
name : "ssollacc",
age : 24,
address : "서울어딘가"
};

이렇게 된다.

 

이제 본론으로 돌아와서,

javascript의 객체 속성은 대괄호 표기법(속성 접근자)을 사용해 접근할 수 있다.

객체를 연관 배열(associative array)이라고 부르기도 하는데, 속성은 자신에게 접근할 수 있는 문자열 값과 연관되어 있기 때문이다.

(쉽게 설명하면 name속성에 접근할 수 있는 문자열 "ssollacc" 값의 연관)

그러므로 me 객체의 속성을 아래 대괄호 표기법으로 접근할 수 있다

me['name'] = "ssollacc";
me['age']= 24;
me['address'] = "서울어딘가";

이러한 이유로 result.list[i] -> result[list[i]] 로 바꿔 해결할 수 있었던 것!!

 

어찌보면 당연한 내용이지만 막상 다른 상황에서는 잘 생각나지 않을 때가 있어 블로그에 끄적여둔다!ㅋㅋ