[javascript] 이론 Reference(참조)

- object type은 객체 타입 또는 참조 타입 이라고 한다.
- 참조 타입이란 실제 값이 아닌 참조값으로 처리 됨을 의미 한다.
- 객체 타입은 동적으로 변화가 가능 하므로 메모리 영역을 동적으로 변화 할 수 있기 때문에 메모리 공간을 확보 하고     메모리의 힙 역역에 저장 된다.

 

var off = { val :10 }
var off1 = { val :10 }
    
var off2 = off
console.log(off === off1)  -> false
console.log(off === off2)  -> true

  - 위 와 같이 나온 이유는 off와 off1의 내용은 같지만 별개의 객체를 생성하여 참조값에 할당 하여서 변수의 off와 off1      의 어드레스는 동일 하지 않는다
  - 변수 off2는 변수 off의 값을 할당 하였기 때문에 동일한 객체를 가르키는 참조값을 저장 하여 참조변수 off와 off2의      참조값은 동일 하다

 

  - 원시 타입의 값이 한번 정해지면 변화 되지 않고 원시값은 참조가 없기 때문에 복사가 가능 하다. 

var aa = "1"
var bb = aa
bb = "2"
console.log(aa) // 1

   - 단 객체는 참조가 된다. 

var aa = [1,2,3]
var bb = aa
bb[0] = 4
console.log(aa[0]) // 4

 

1. 얕은 복사

  - 얕은 복사는 껍데기만 참조관계가 끊긴다.

const a = []
const b = 'hello'
const c = {}

const arr = [a,b,c]
const arr1 = arr // 객체를 담은 변수를 참조라 하고 참고 관계 라고 한다.

arr1[1] = '안녕'
console.log(arr[1]) // 안녕

  - 위의 해당 코드는 arr1은 arr을 참조 한 값이므로 arr1이 바뀌면 arr의 값도 바뀐 걸 볼 수 있다. 

  - 이러한 현상에서 얕은 복사를 해보자

const arr2 = [...arr]
arr2[1] = '반가워'
console.log(arr2[1]) // 반가워
console.log(arr[1])  // 안녕

   - 위에 원시값을 설명 했을 때 원시 값은 참조가 없기 때문에 복사가 된다고 했다 그로 인해 얕은 복사 된걸 확인 할         수 있다. 

 

2. 얕은 복사의 문제점 

  - 원시값의 경우는 문제가 되지 않지만 객체의 경우 는 참조 관계 이기 때문에 같이 바뀌게 되는 걸 확인 할 수 있다. 

 

const a = []
const b = 'hello'
const c = {}

const arr = [a,b,c]
const arr1 = arr // 객체를 담은 변수를 참조라 하고 참고 관계 라고 한다.

arr1[1] = '안녕'
'안녕'
const arr2 = [...arr]
arr2[1] = '반가워'
arr2[0].push(1)
console.log(arr2[0]) // [1]
console.log(arr[0])  // [1]

arr2[2].aa = "aa"
console.log(arr[2]) // {aa:"aa"}
console.log(arr[2]) // {aa:"aa"}

  - 위의 코드는 그런 문제점을 보여 주는 경우이다. 

 

3. 깊은 복사

  - 얕은 복사의 문제점을 해결 하기 위해 깊은 복사를 사용 하여 문제점을 해결 한다.

  - 깊은 복사는 참조 관계를 끊어 버리는 것이다.

const a = []
const b = 'hello'
const c = {}

const arr = [a,b,c]
const arr1 = arr // 객체를 담은 변수를 참조라 하고 참고 관계 라고 한다.

arr1[1] = '안녕'
console.log(arr[1]) // '안녕'

/* 얕은 복사 */
const arr2 = [...arr]
arr2[1] = '반가워'

console.log(arr[1]) // '안녕'
console.log(arr2[1]) // '반가워'

/* 얕은 복사의 문제점 */
arr2[0].push(1)
console.log(arr2[0]) // [1]
console.log(arr[0])  // [1]

arr2[2].aa = "aa"
console.log(arr[2]) // {aa:"aa"}
console.log(arr[2]) // {aa:"aa"}

/* 깊은 복사 */

const arr3 = JSON.parse(JSON.stringify(arr))
arr3[0].push(2)

console.log(arr3[0]) // [1, 2]
console.log(arr[0])  // [1]

  - 위의 코드 arr3에서 JSON.parse(JSON.stringify( )) 사용한 것을 보고 깊은 복사 라고 한다.

  - JSON.parse(JSON.stringify( )) 가장 간단 하게 사용 해서 보여 줄 수는 있지만  라이브러리를 사용 해서 하는 걸 추천      한다.

 

const original = [
     {
        a: 1,
        b: 2,
     },
     true,
];

const copy = original.slice();
console.log(JSON.stringify(original) === JSON.stringify(copy)); // true

copy[0].a = 99;
copy[1] = false;
console.log(original);     // [ { a: 99, b: 2 }, true ]
console.log(copy);         // [ { a: 99, b: 2 }, false ]


console.log(JSON.stringify(original) === JSON.stringify(copy)); // false

  - .slice()의 경우 얕은 복사 이며 원시 값은 참조 관계가 아닌 복사인 관계이기 때문에 false 가 된다.