[JS] 기본형과 참조형

 

 

💡 Primitive Type 기본형

기본형 변수에 값을 할당할 땐 변수에 값을 바로 넣는다.

Number, String, Boolean, Null, Undefined

let x = 3;
let y = x;

console.log(x); // 3 : x 에 3이 담김
console.log(y); // 3 : y 에 3이 담김 (x 값을 복사해 담음)

y = 5;

console.log(x); // 3
console.log(y); // 5 : y 에 5가 담김

 

 

💡 Reference Type 참조형

참조형 변수에 값을 할당할 땐 값을 어딘가에 담아두고 그 주소값을 변수에 저장한다.

Object, Array(배열도 객체다)

let x = {name: "aoto"};
let y = x;

console.log(x); // {name: "aoto"}
console.log(y); // {name: "aoto"}

y.age = 20;
console.log(x); // {name: "aoto", age: 20}
console.log(y); // {name: "aoto", age: 20}

let z = [1, 2, 3];
let k = z;

console.log(z); // [1, 2, 3]
console.log(k); // [1, 2, 3]

k[2] = 4;

console.log(z); // [1, 2, 4]
console.log(k); // [1, 2, 4]

 

❗️참조형 값을 변수를 통해 다른 변수에 할당했을 때

복사한 객체를 수정하면 원본 객체도 수정이 돼버린다.

 

➕ 참조형을 복사해보자!

먼저 배열!

slice() 메소드의 파라미터를 전달하지 않으면 원래 값이 그대로 리턴되는 특성 이용

let num1 = [1, 2, 3];
let num2 = num1.slice();

num2.push(4);

console.log(num1); // [1, 2, 3]
console.log(num2); // [1, 2, 3, 4]

 

다음 객체!

let aoto = {
  name: "aoto",
  age: 20
};

let aoto2 = Object.assign({}, aoto);

aoto2.age = 30;

console.log(aoto); // {name: "aoto", age: 20}
console.log(aoto); // {name: "aoto", age: 30}

 

** 중첩됐을 경우나, 더 직관적으로 보여줄 수 있는 방법 고민해보기..