JS 기초를 한번 훑어보다가 헷갈리는걸 발견했다.
JS에서 copy by value랑... reference가 있댄다.
- copy by value : '값' 에 의한 전달
- copy by reference : '참조'에 의한 전달
이라고 한다.
(개뿔도 모르겠다.)
간단한 예시코드를 들어서 설명을 해보는게 조금 더 이해가 빠를 것 같다.
- copy by value
let original = '반갑습니다.
let clone = original이라는 예시코드에서 original은 '반갑습니다' 라는 string을 할당 받았으며, clone은 반갑습니다 라는 값을 할당받은 original과 동일하다.
console.log(clone)
console.log(original)결과는 모두 동일할 것이다.
다만 여기서 하나 재밌는 것을 섞어주자면
clone += ' 사실 반갑지 않습니다.'를 추가하게 되면 어떤 값이 나올까?
console.log(clone) = '반갑습니다. 사실 반갑지 않습니다'
console.log(original) = '반갑습니다.보시는 바와 같이 값이 return 될 것이다. 기본 '값' 을 참조하면서 추가적인 값이 나오기 때문이다.
허접한 그림이지만. 그림을 보면은 다른 저장소의 '위치'에 데이터가 '각 각' 들어있고 해당 '값'을 참조하기에, clone값을 수정한다고 하더라도 original의 변수값이 변경되지 않는 것이다.
더 쉽게 풀어보자면
각각의 DATA창고 위치가 있기때문에, 다른 값이 변경되어도 원본은 변경되지 않는 것이다.
하지만
reference는 개념이 조금 다르다... 골치가 아파진다
- copy by reference
copy by reference는 '값'이 아닌 '참조'를 전달한다.
참조?
사진에서 보기와 같이 어떠한 data를 보관하는 장소에서 그 자체의 '값' 이 아닌 해당 데이터가 보관되어있는 '장소'를 참조하는 것이다.
예를들자면
let originalObj = {
name: '개발자',
group: '백엔드',
};
// copy by reference
let cloneObj = originalObj;
console.log(originalObj);
console.log(cloneObj);
console.log('-------------------------');
originalObj['group'] = '정육점사장';
console.log(cloneObj);
console.log(originalObj);해당 코드를 자세히 보자면 originalObj가 개발자, 백앤드라는 각각의 key가 있고 cloneObj는 originalObj와 같다고 처리해두었다.
-
originalObj의 group을 정육점사장 이라고 값을 변경하고
-
두 변수의 값을 콘솔로 찍어본다.
-
console.log(cloneObj);
console.log(originalObj);
값을 출력해보면 놀랍게도
{ name : '개발자', group : '정육점사장'}
{ name : '개발자', group : '정육점사장'}으로 나오게 된다.
cloneObj를 변경하지 않았음에도 두 변수 모두 변경된 이유는
해당 값은 '값'이 아닌 '참조'를 통한 '데이터의 위치'만 같기때문
이라고 보면 이해가 쉬울 것 같다.
마지막 예를 들자면
originalObj = {
name: '김서현',
gorup: '소녀시대',
};
cloneObj = {
name: '김서현',
gorup: '소녀시대',
};
console.log(originalObj === cloneObj) 값은?아예 값이 같은 obj를 만들었다 한들 결과는
' False ' 가 나오게된다. 다시한번 반복하지만 '값' 자체가 아닌 '위치'를 참조하기에, 값은 같지만 해당 데이터들은 각각 다른 데이터베이스 저장소에 위치가 되기때문에 같지 않다라는 결과가 나올 것이다.
spread operator 너마저....
const game = {
name: '카운터 스트라이커',
genre: 'FPS',
};
const game2 = {
...game,
};
console.log(game2);
console.log(game === game2);
// 값은 같지만 value만 가지고 온것(copy by value) 새로운 obj를 spread opeerator로 만들기에 이 또한 역시 false가 뜬다.
JS를 공부 하면 할수록 서비스가 커짐에 따라서 예측불가능한 상황이 많이 나오지않을까?.. 물론 실무에서 하나하나 신경쓴다고 하지만... 이런것들을 자세히 뜯어보다 보면 왜 내코드에 말도안되는 오류들이 발생했었는지 하나.. 혹은 둘 이상 이유가 나올 것 같다는 생각도 든다.
