[Javascript] 배열 key의 동적 할당

플젝을 만들다가. 예전에 썼던 코드를 좀 보는데 이해가 안되는 코드가 있었다.

분명 내가 쓴 코드인데.. 아주 간단한 문법같은데 그냥 넘어가긴 찝찝하고 신경쓰여서.. 알아 보다 보니

심지어 내 블로그에도 적어놨었던 부분이었다.

 

 const onChangeInput = (e) => {
    let { value, name } = e.target;
    if (name === "payStatus") {
      value = Number(value);
    }

html 상에서 name = "property_name" 을 주고 이것을 키값으로 해서

검색 조건( input의 value )을 변경시 상태에 저장해서 http 요청시 해당 상태값을 data로 보내는 로직이었다.

 

근데 저기 [name] 부분.

 

왜 배열 형태로 키를 받는건지??

저건 javascript 객체 키 속성을 동적으로 할당해주는 문법이다.

 

그냥 쉽게 생각해서 key를 변수로 받을수 있게 하는것이다.

 

원래같으면  객체의 키 : 밸류 구조에서 value는 변수로 할당이 가능하지만 key는 그렇게 하면 에러가 난다.

 

예를 들어

const 과일 = "사과"

const AA = {
	디저트 : 과일
};

console.log(AA) // {디저트 : "사과"}

 

이렇게는 가능하지만,

 

const 과일 = "사과"

const AA = {
	과일 : "포도"
};

console.log(AA) // { 과일 : "포도" }

의도한 할당이 AA =  {사과 : "포도"} 라고 해도 , 키값을 저렇게 변수로는 할당 할 수 없다는 소리다.

 

 

이럴때 [ ] 안에 키값을 써주면 키값도 동적 할당이 가능해진다.

 

 

결론은

 

역시 한번 본다고 그게 내 머리에 입력되면 내가 컴퓨터지 사람이겠나! 싶은 생각이 들었고

여러번 쓰고 생각하고 보고 반복해야겠구나~ 싶었당 !

 

그럼에도 "나중에 또 봐야지" 라는 마인드 보단 웬만하면 한번 볼때 최대한 숙지할 수있도록 노력도 해야겠다.