자바스크립트 Copy by Value VS Copy by Reference + Spread Opreator(...)

모든  내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg
자바스크립트에서 Copy by Value와 Copy by Reference 에 대해 알아보겠습니다 . 자바스크립트에서 변수를 복사할 때 쓰이는 복사 방법입니다.  

[무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 - 인프런 | 강의

Copy by value 는 값에 의한 전달로 " 값을 그대로 가져오는 형태를 " 말합니다. Copy by reference 는 참조에 의한 전달이라고 보시면 될것 같습니다.

다음 사항과 같이 이해하시면 편하실것 같습니다.

 * 1) 기본적으로 모든 primitive 값은 copy by value다 ( * object를 빼고 생성된 모든 데이터타입들은 primitive 
 * function, Array 도 primitive 값)
 * 2) 객체는 copy by refernce다

이 소스는 origianl 변수에 "안녕하세요"를 추가하고  origianl 변수에 저장된 문자열을  basic 변수에 복사한 것을 의미합니다.

let original = '안녕하세요';
let basic = original;

console.log(original);
console.log(basic);

originalObj 에 name 키에 '카리나' 를 추가하고 group키에 '에스파'라는 키값을 저장해서 출력하는 소스입니다.

let originalObj = {
    name: '카리나',
    group: '에스파',
};
let basicObj = originalObj;

console.log(originalObj);
console.log(basicObj);

출력결과 

basicObj 변수에도 originalObj 에 저장된 값을 불러오기 때문에 같은 값을 나오는 것입니다.

 

 

다음은 originalObj 저장된 group 키값을 '자바스크립트로 변환하여 출력하는 소스입니다

originalObj['group'] = '자바스크립트';
console.log(originalObj);
console.log(basicObj);

출력결과 다음과 같이 group 키값이 '자바스크립트' 로 변환된 것을 알 수 있습니다.

 

copy by value와 copy by reference 를 비교할 수 있는 소스코드입니다

 

const winter1 = {
    name: '윈터',
    group: '에스파',
}
const winter2 = winter1;
const winter3 ={
    name: '윈터',
    group: '에스파',
}

// true
console.log(winter1 === winter2); // copy by reference 를 통해서 같은 메모리 공간을 참조
// false
console.log(winter1 === winter3); //같은 똑같지만 실제로 컴퓨터가 보기에는 다른 메모리 공간을 참조  
// false
console.log(winter2 === winter3);
console.log('--------------');

 

다음은 Spread Operator 입니다

//spread Operator 를 쓰면 copy by vaule가 된다. 실제로 Object를 새로 선언했기 때문
//spread Operator 를 쓰면 똑같은 값을 갖고 있는 object나 Array를 copy by value로 완전히 새로운 값으로 복사를 할 수 있다.

이 소스코드는 

spread operator 위치에 따라 출력되는 값의 위치가 달라진다는 것을 알 수 있는 코드입니다.

const winter4 = {
    ...winter3,
}
console.log(winter4);

console.log(winter4 === winter3);
console.log('--------------');
const winter5 = {
    year: 2001,
    ...winter3,
};
console.log(winter5);
console.log('--------------');
const winter6 = {
    name: '자바스크립트', //name: '자바스크립트'리고 해도 밑에서 spread를 했고, spread에서 name 값이 있었기 때문에 winter3 에 있는 name 키값으로 '자바스크립트' 키값을 덮어 쓴다 
    ...winter3,
};
console.log(winter6);
console.log('--------------');
const winter7 = {
    ...winter3,
    name:'자바스크립트',
}
console.log(winter7);
console.log('--------------');
const numbers = [1,3,5];
const numbers2 = [
    ...numbers,
    10,
];
console.log(numbers2);