JS remind.두번째.Value and Reference

JS에서 값과 참조

JS는 값에 의한 전달이 일어나는 5가지의 데이터 타입(Boolean,Null,undefined,String,Number)을 가지고 있다. 우리는
이러한 데이터 타입을 원시 타입 이라 한다.

또한 참조에 의해 전달이 일어나는 3가지의 데이터 타입(Function,Object,Array)
도 가지고 있다. 사실 이 3가지는 크게 보면 전부 객체(Object) 로 볼 수 있다.

원시타입(Primitives)

어떠한 원시타입이 변수에 할당된다면, 우리는 그 변수를 원시타입을 가진 변수라고 생각한다.

let x = 10;
let y = 'abc';
let z = null;

우리가 이 변수들을 다른 변수에 = 이라는 키워드를 이용하여 할당할 때, 우리는 새로운 변수에 값을 복사(Copy)하게 된다. 이 변수들은 값에 의해 복사된다.

let x = 10;
let y = 'abc';

let a = x;
let b = y;

a와 x는 둘다 10이란 값을 가지고 있고 ,b와 y는 둘다 'abc'라는 값을 가지고 있다.
그러나 이 변수들을 분리되어 있다. 그 이유는 값들이 복사되었기 때문.

let x = 100;
let a = x;

x = 200;

console.log(a) //100;

이 처럼 같은 값을 가진 변수 하나를 바꾸더라도 다른 변수에는 아무런 영향이 없다.
각각의 변수들이 아무런 관계도 없다고 생각해도 무방

객체

원시 타입이 아닌 값이 할당된 변수들은 그 값으로 향하는 참조(reference)를 갖게된다.
참조는 메모리에서 객체의 위치를 가리키고 있다. 변수는 실제로 값을 가지고 있지 않다.!

객체는 우리의 컴퓨터 메모리 어딘가에 생성된다. 우리가 arr = [] 를 작성했을 때,
우리는 메모리 내부에 배열을 만든 것, 변수 arr이 갖는 것은 그 배열이 위치한 주소.

참조로 할당하기

객체와 같은 참조 타입이 값 =과 같은 키워드를 이용하여 다른 변수로 복사될 때,
그 값의 주소는 실제로 복사된다.그러나 객체는 값 대신 참조로 복사된다.

let reference = [1];
let refCopy = reference;

각각의 변수는 이제 같은 배열로 향하는 참조를 갖는다.

reference.push(2);
console.log(reference,refCopy) // [1,2],[1,2]

메모리 속에 있는 배열에 참조한 값이기 때문에,하나의 변수가 바뀌면 참조에 따라 둘다 변한다.

함수를 통한 파라미터의 전달

우리가 원시 값들을 함수로 전달할 때, 함수는 값들을 복사하여 파라미터로 전달한다.
이것은 =은 연산자를 이용하는 것과 같다.

let hundred = 100;
let two = 2;

function multiply(x,y){
		return x * y;
}

hundred 라는 변수에 100이라는 값을 주었다.이 값을 함수에 전달인자로 넘겼을 때
변수 x는 그 값 100을 갖게 된다. 값은 우리가 =연산자를 할당한 것처럼 복사된다.
또,인자로 넘겨진 hundred라는 변수에는 아무런 영향을 미치지 않는다.

요약

1.JS에는 값과 참조를 통한 2가지 전달 방식이 있다.
2.원시 타입(String,Number,Boolean,Null,undefined)는 값에 의한 전달.
3.객체(Object,Funtion,Array)는 참조에 의한 전달.
4.원시 타입이 할당된 변수들은 서로 관련이 없다고 볼 수 있다.(값에 의한 전달)
5.객체 타입이 할당된 변수들은 메모리상에 위치한 주소를 참조하기 때문에 관련이 있다(참조)
6.원시 값들을 함수의 파라미터로 전달할 때,값들을 복사하여 파라미터로 전달한다.(=와 같음)
7.전달인자가 참조로 전달되면 전달인자를 바꾸면 원본 값도 바뀌고
값으로 전달되면 전달인자를 바꿔도 원본 값은 바뀌지 않는다!

//값에 의한 전달
let a = 100;
function changeValue (x){
// let x = a와 같은 방법으로 전달인자 전달
		x = 10
};

changeValue(a)
a // 100

//참조에 의한 전달

let b = {value: 100};
function changeRef(y){
// let b = y 와 같은 방법으로 전달인자 전달
		y.value = 10;
};

changeRef(b)
b  // {value:10}