메리

AJAX에서 return 받은 결과값을

여러 함수에서 이용하려다가

자꾸 값이 똑같아져서...

AJAX 동기화 문제인가.. 함수 순서때문인가.. 어리둥절하다가 알아냄...^.ㅠ

내 문제는 이거였다.. 

array2 값을 c와 d에 따로 담아서 

c의 값을 바꿨는데 d값도 덩달아 바뀐거... 

  let array2=[{"key":"메뉴","value":"짜장"},{"key":"사이드","value":"탕수육"}];
  let c = array2;
  let d = array2;
  c[0].value="짬뽕";
  console.log(d[0].value); //짬뽕 출력

심지어 아래와 같은 방식으로 복사를 했는데도 자꾸 값이 바뀌는 것이었다...

for(let i in array2){
    c[i] = array[i];
    d[i] = array[i];
  }

같은 예라고 할 수 있겠다. 이것이 바로 참조값(주소값)이 복사가 되는 얕은 복사.

  let array=["1","2","3"];
  let a = array;
  let b = array;
  a[0]="text";
  console.log(b[0]); //"text" 출력

a <- array 주소값 

b <- array 주소값 

이렇게 담기면서

a[0]을 변경 -> array[0] 변경 -> b[0] 변경

이렇게 되었던것..

깊은복사 방법

1. 반복문으로 때려넣기

반복문으로 값을 하나하나 때려넣어주면 참조값이 아닌 값이 들어가기 때문에

더이상 영향을 받지 않는다. 

 let array3 = ["a","b","c"];
  let e=[];
  let f=[];
  
  for(let i in array3){
    e[i] = array3[i];
    f[i] = array3[i];
  }
  e[0]="eee";
  console.log(f[0]); //"a" 출력

JSON 구조의 배열일 경우 {키:값}을 하나하나 때려넣어 줘야한다 

  let array4=[{"key":"동물","value":"갱쥐"},{"key":"동물","value":"보노보노"}];
  let x = [];
  let y = [];
  for(let i in array4){
    x.push({"key":array4[i].key,"value":array4[i].value});
    y.push({"key":array4[i].key,"value":array4[i].value});
  }

  x[0].value="포로리";
  console.log(y[0].value); //"갱쥐" 출력

2. slice

slice 를 이용해도 깊은 복사가 된다. 

slice 는 start 부터 end 까지 대상 배열에서 꺼내와 새로운 배열을 만들어 값을 집어 넣는다. 

start 와 end 가 주어지지 않으면 전체 배열을 복사한다.

  let array5 = ["aa","bb","cc"];
  let v = array5.slice();
  let w = array5.slice();

  v[0]="ddd";
  console.log(w[0]);

3. Object.assign

Object.assing()은 뒤의 인자를 앞에 인자에 합쳐 넣는다. 

var o1 = {name:'kim'};  
var o2 = Object.assign({},o1); 
o2.name='kim2'; 

console.log(o1,o2); //{name: "kim"} {name: "kim2"}