JS 배열과 배열 사이에 값 넣기 || 두 배열 합쳐 새로운 배열 만들기

오늘도 어떻게 하면 일을 하면서 실력도 늘릴 수 있을까 고민하게 된다. 

분명히 일은 하고 있고 앞에 생긴 문제들을 하나 씩 해결하고 있는데 내 기분은 그저 눈 앞에 문제만을 해결한 거 같아 만족스럽지 못했다.

 

내가 사용하는 프로그램에서 json 형식으로 그리드의 틀과 데이터를 받다보니깐 변수 안에 엄청나게 긴 Json형식으로 값이 들어가 있었다. 

여태까지는 페이지 중에서 이 그리드의 틀을 건드리는 경우가 없었는데 이번 페이지에서는 값이 변경될 때마다 서로 다른 칼럼들을 보여줘야 해서 변수 안에 들어 있는 json형식에 값을 변경해줘야 했다. 

 

let a = {
"Cfg": {
"id": "${gridId}"
},
"Cols": [
{"Name": "a", "Width": "100", "Type": "Text", CanExport: "0", CanEdit: "0", Visible: "0"},
{"Name": "b", "Width": "100", "Type": "Text", CanExport: "0", CanEdit: "0", Visible: "0"},

{"Name": "c", "Width": "100", "Type": "Text", CanExport: "0", CanEdit: "0", Visible: "0"},
{"Name": "d", "Width": "100", "Type": "Text", CanExport: "0", CanEdit: "0", Visible: "0"},

{"Name": "e", "Width": "100", "Type": "Text", CanExport: "0", CanEdit: "0", Visible: "0"},
{"Name": "f", "Width": "100", "Type": "Text", CanExport: "0", CanEdit: "0", Visible: "0"}

]; 

 

대충 이런 식으로 변수 하나에 떄려박아져있다. 내가 원했던 건 저 Cols 안에 있는 name이 c, d, e, f가 특정 조건에 맞춰서 바꿔 세팅되기를 원했다. 

 

처음에는 Cols 안에 조건문을 넣어서 해결 하려고 했는데 안될 거 같았지만 해보니 역시나 조건문을 쓸 수 없었다. 왜 쓸 수 없는지는 정확하게는 아직 모르겠다.

 

그다음으로 생각한 것은 

{"Name": "c", "Width": "100", "Type": "Text", CanExport: "0", CanEdit: "0", Visible: "0"},
{"Name": "d", "Width": "100", "Type": "Text", CanExport: "0", CanEdit: "0", Visible: "0"}, 

이 값들을 한 변수 안에 넣어서 "Cols" : [ a, b, c] ; 이런 방식으로 쓰면 되겠다 싶었는데.

객체 2개를 한 변수 안에 집어넣으려면  배열을 사용해서 c = [{1}, {2}] 이 모양으로 저장을 해야 하는데 그렇게 되면 

[] 괄호를 제외하고 어떻게 넣어야할까 그냥 갑도 아니고 객체인데 어떻게 하지 고민했다. 

push를 사용하면 되는지 다른 좋은 방법이 있는지 고민하다가 

배열 안에 값들을 하나로 합치면서 새로운 배열을 만들면 되겠다 싶었다. 

찾아보니 전개연산자 (spread operator)가 내가 원하는 방식이었다. 

 

a = [{1},{2}];

b = [{3}, {4}];  

 

이렇게 2개의 배열이 있다면 전개 연산자를 사용하면

c = [... a,... b]; 

 

c= [{1}, {2}, {3}, {4}] 이렇게 쉽게 값이 합쳐지고 새로운 배열이 생기게 된다. 

 

나는 전개연산자를 사용해서

a.Cols = [...a.Cols, ...b]; 

a.Cols = [...a.Cols, ...c];

a.Cols = [...a.Cols, ...d];

 

내가 원하는 조건에 따라 컬럼값이 변경되도록 만들었다.