var 변수 = 1234
var 어레이 = [1,2,3]
var obj = { name : 'Kim'}여기 어레이와 obj각각 이 가지고 있는 값은 해당 값이 저쪽에 있습니다~~라는 화살표가 들어있다. 그러니까 주소지가 들어있다.
이런 식으로 변수를 선언하고 할당을 한다.
Array, object는 변수에 값이 저장이 안됩니다.
Primitive data type 다루기 :복사
var 이름1 = '김'
var 이름2 = 이름1
console.log(이름1)
console.log(이름2)이렇게 하면 둘다 김이 나온다.
var 이름1 = '김'
var 이름2 = 이름1
이름1 = '박'
console.log(이름1)
console.log(이름2)이러면
박
김
으로 출력이 된다.
Reference data type 다루기:복사
var 이름1 = { name : '김' }
var 이름2 = 이름1
이름1.name = '박'
console.log(이름1)
console.log(이름2)박
박
으로 출력되는 것을 확인할 수 있다. 이름2는 데이터를 바꾼적이 없는데? 왜??
object나 array는 reference data type이어서, 데이터가 직접 저장되는 것이 아니라 데이터가 메모리상 어딘가 저기에 있어요 하는 화살표가 저장되어있음.
그래서 값을 변경해도 화살표를 타고 들어가서 pc메모리의 값을 바꿀 뿐임.
그래서 복사하려면 다른 방식을 이용해야 함.
var 이름1 = { name : '김' }
var 이름2 = { name : '박' }
이름1.name = '최'
console.log(이름1)
console.log(이름2)이렇게 되면 이름1과 이름2가 가리키는 화살표가 다른 게 된다.
Reference data type 다루기 예시2
var 이름1 = { name : '김' }
var 이름2 = { name : '김' }
console.log(이름1 == 이름2)이러면
false가 출력되는 모습을 확인할 수 있다.
이유는 앞 서 얘기한 것처럼 변수의 값이 아닌 변수가 위치한 메모리 주소를 가리키는 화살표를 저장하고 있기 때문이다.
Reference data type 다루기 예시3
var 이름1 = { name : '김' }
var 이름2 = { name : '김' }
function 변경(obj){
obj.name = 'Park'
}
변경(이름1);
console.log(이름1)
바뀐 것을 확인 가능헏,
씐기한것
var 이름1 = { name : '김' }
var 이름2 = { name : '김' }
function 변경(obj){
obj = { name : 'park' }
}
변경(이름1);
console.log(이름1)오브젝트를 재할당해주는 함수를 실행하려 했으나... 실패하고 오브젝트의 값은 바뀌지 않았다.
이것은 reference랑 parameter의 합작품임.
파라미터는 변수생성 & 할당과 똑같음.
여기서
obj = { name : 'park' }
는
var obj = { name : 'park' }
와 똑같은 게 되는 것이다.
function 변경(obj){
obj = { name : 'park' }
}
변경(var obj = 이름1);이것과 같다는 말임.(js가 그렇게 해석함)
오잉 이것은 얕은복사?! 주소 화살표만 복사해서 기입시킨 것이나 다름없다는 말이다.
이런식으로 하면 이름1은 그냥 자기가 가리키던 화살표를 그대로 잘 가리키고 있다.
설명
예제 3. 함수를 이용해 object를 변경하면 어떻게 될까
object를 = 등호를 이용해 조작하면 뭔가 일이 일어나는거 같으니까
이번엔 한번 함수를 이용해서 object 조작 기계를 만들어보겠습니다.
var 이름1 = { name : '김' };
function 변경(obj){
obj = { name : 'park' };
}
변경(이름1);말되죠? 변경() 이라는 함수를 만들었는데,
이 함수는 뭔가 오브젝트를 입력하면 오브젝트 내용을 { name : 'park' } 으로 재할당해주는 함수입니다.
그래서 이름1을 집어넣어서 실행해봤습니다.
Q. 근데 실행해봐도 이름1은 바뀌지 않습니다. 왜 그럴까요?
5년차 자바스크립트 개발자에게 물어봐도 왜 그런지 잘 모릅니다.
여러분 이거 알면 이제 6년차 개발자인겁니다.
누르기 전에 신입 가르치듯 설명해보셈
왜그러냐면 여러분 함수 만들 때 파라미터라는거 만들잖아요.
파라미터는 일종의 변수처럼 생성되고 사라지는 존재라고 보시면 됩니다.
그냥 쉽게말하면 var 변수에요 변수
(인간의 시점)
var 이름1 = { name : '김' };
function 변경(obj){
obj = { name : 'park' };
}
변경(이름1);(자바스크립트의 시점)
var 이름1 = { name : '김' };
function 변경(obj){
obj = { name : 'park' };
}
변경(var obj = 이름1);자바스크립트가 파라미터를 만들고 사용할 땐 대충 맨 밑줄처럼 만든다고 생각하시면 됩니다.
(실제 이런 문법이 있는건 아니지만요)
obj라는 파라미터자리에 이름1이라는 변수를 집어넣으시면
var obj = 이름1 이렇게 파라미터형 변수를 만든겁니다.
var 이름1 = { name : '김' };
function 변경(obj){
obj = { name : 'park' };
}
변경(이름1);음 근데 이거 오늘 계속 보던 패턴인데요
obj 라는 변수에 이름1이라는 { object } 를 등호로 복사해서 넣으면 어떻게 되나요?
obj, 이름1 이 두개 변수는 서로 같은 화살표를 갖게 되며 { name : '김' } 값을 공유합니다.
그런데 함수 내부를 잘 보시면 obj라는 변수는 obj = { name : 'Park' } 이렇게 재할당을 해주고 있죠?
이것은
obj라는 변수에 새로운 화살표를 재할당을 한 것이지
실제 이름1이라는 변수는 전혀 건드리지 않고 있습니다.
그래서 결국 이름1은 바뀌지 않는 것입니다.
저렇게 만들면 안되겠군요.
▼ 그럼 밑의 예제코드는 실행하면 콘솔창에 무엇이 출력될까요??
var 이름1 = { name : '김' };
function 변경(obj){
obj.name = 'park';
}
변경(이름1);
console.log(이름1);한번 예상해보신 다음 실제 실행해보셔서 출력결과랑 맞춰보시길 바랍니다.
그리고 그런 출력결과가 나오는 이유도 한번 설명해봅시다.
(이유는 위에 다 있습니다)
이제 알았으니 나 이런거 안다고 온동네 소문내도록 합시다.
