본문 바로가기

Front-End: Web/JavaScript

[코딩애플] js part 2-2. 이상한 Reference data type과 더 이상한 예제 3개

반응형

이상한 Reference data type과 더 이상한 예제 3개

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

이상한 Reference data type과 더 이상한 예제 3개이상한 Reference data type과 더 이상한 예제 3개

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

이상한 Reference data type과 더 이상한 예제 3개

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

이상한 Reference data type과 더 이상한 예제 3개

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

이상한 Reference data type과 더 이상한 예제 3개

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

이상한 Reference data type과 더 이상한 예제 3개

Primitive data type

  • 그냥 문자와 숫자
  • 변수에 값이 그대로 저장됨

Reference data type

var 변수 = 1234;
var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨
  • Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다.
  • [1,2,3]이 저쪽에 있어요(화살표) 를 저장함

종류

  1. Array
  2. Object

Reference data type 다루기 예시 1: 복사

Primitive data type

var 이름1 = '김';
var 이름2 = 이름1;
console.log(이름1); // 김
console.log(이름2); // 김

이름1 = '박';
console.log(이름1); // 박
console.log(이름2); // 김

Reference data type

var 이름1 = { name: '김' };
var 이름2 = 이름1;
console.log(이름1); // { name: '김'}
console.log(이름2); // { name: '김'}

이름1.name = '박';
console.log(이름1); // { name: '박'}
console.log(이름2); // { name: '박'} -> 이름2는 데이터를 변경한 적이 없는데?

Reference data type은 이름1에는 {name: '김'}이게 저장되는 게 아니라, {name:'김'}이 담긴 **PC의 메모리가 저기있어요** 라고 가리키는 **화살표(reference)가 저장**된다.

코드를 다시 보자. 이름2는 {name: '김'} 오브젝트가 있는 게 아니라, 이름1의 화살표를 복사한다.

var 이름1 = 화살표;
var 이름2 = 이름1 = 화살표;

그림으로 나타내면 이렇다.

![01](.\images\01.png)

이름1.name = '박'으로 바꾸면,

![02](.\images\02.png)

그래서 array, object는 함부로 복사하면 큰일난다!

그럼 복사하고 싶을 땐 어떻게 하나?

  1. object 복사 기계(constructor)를 만들어서 찍어내면 된다(다음시간에 배울 것임).
  2. 각각 다른 reference를 가지도록 작성한다.
var 이름1 = { name: '김'};
var 이름2 = { name: '박'};

새 중괄호를 할당할 때마다 새로운 화살표를 만든다.

![](.\images\03.png)

Reference data type 다루기 예시 2:

var 이름1 = { name: '김'};
var 이름2 = { name: '김'};
console.log(이름1 == 이름2); // false

이름1의 화살표 !== 이름2의 화살표. 따라서 false다.

![](.\images\04.png)

Reference data type 다루기 예시 3:

오브젝트를 변경해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj.name = 'Park';
}

변경(이름1); // {name: 'Park'}

➡️ 변경 성공

오브젝트를 재할당해주는 함수

var 이름1 = { name: '김'};

function 변경(obj) { 
    obj = { name: 'park'};
}

변경(이름1);
console.log(이름1); // { name: '김'}

➡️ 실패. 안바뀜.

parameter와 reference datda type의 합작이다. **파라미터는 변수생성 & 할당과 똑같다.**

오브젝트에 이름1을 넣으면,

변경(이름1) = 변경(var obj = 이름1)

이거랑 똑같다. 이름1 화살표를 하나 복사해서 obj에 집어넣은거다. 그래서 obj도 이름1과 똑같은 곳을 화살표로 가리킨다.

![](.\images\05.png)

그리고 이 obj에 새로운 오브젝트를 할당하자. 그러면 이렇게 된다.

![](.\images\06.png)

그래서 이름1에 재할당한게 아니라, obj에 재할당한거다. 그래서 이름1은 그대로다.

**그 파라미터 변수에 = {} 해봤자 원래 이름1 오브젝트는 변화가 없다.**

반응형