🌷[230302] 코드스테이츠 부트캠프 : 참조 자료형과 원시 자료형 (1탄)

🦄 너무너무너무 피곤하므니다.... 너무 졸리고... 다음 주 정보처리 기사 ... 너무 히므드니다. 

     빨리 정처기 끝났으면 하는 마음 반 ,, 1주일만 더 있었으면 좋겠다는 생각 반.... ㅠㅠㅠㅠ 쿳소..

 

🍀 오늘의 날짜 : 23년 03월 02일 

🍀 오늘의 주제 : 참조 자료형과 원시 자료형 

• 원시 자료형과 참조 자료형 
• 스코프와 클로저 

 

 

---

 

 

 

🌷햇깔렸던 부분들 + TIP🌷

 

 

참조 자료형과 원시 자료형 

 

💠참조 자료형(reference data type)

: 대량의 데이터를 다루기에 적합한 배열과 객체, function 등의 자료형 

 

[특징]

#원시 자료형을 변수에 할당하면 " 메모리 공간" 에 " 값 자체 " 가 복사되어 저장 

# 값이 저장된 변수를 다른 변수에 할당하면 " 원시 값 자체가 복사 " 되어 저장. 

# 원시 자료형은 변경 불가능한 값 / 한번 생성된 원시자료형은 (Read Only)

 

le a = 2;    //a값은영원히2
let b = a;    //b값은 a의 값인 2 

 

 

 

💠원시 자료형(primitive data type)

:  고정된 저장 고안을 차지하는 number / string / boolean / null / undefined 과 같은 자료형

 

[특징]

# 참조 자료형은 값 자체를 저장하는 것이 아니라 값을 저장 했던 곳의 " 주소 " 를 저장 (메모리 공간에 저장)

# 참조 자료형이 저장된 변수를 다른 변수에 할당하게 되면 동일한 "주소"를 저장하는 것 

# 원본 혹은 복사본이 변경 되면 같은 주소를 가르키고 있었기 때문에 서로 영향이 미친다.(변경 가능한 값)

let a = [ 1, 2, 3 ]; 
let b = a; 

 

 

 

깊은 복사 얕은 복사 

 

다시 한번 짧게 정리하자면, 원시 자료형은 값 자체의 복사가 일어나고, 복사본의 변경이 원본이 영향을 미치지 않는다. 반면 참조 자료형은 임의의 저장 공간에 값을 저장하고, 이 저장공간을 참조하는 주소의 참조가 일어나며 원본이나 복사본의 변경 발생 시 서로에게 영향을 미칩니다. 

 

 

👇서로 영향을 아예 안 미치게 할 수는 없는 건가? 

 

이전 수업에서 배열 공부할 때, 원본 배열에 영향이 가는 메소드와 원본 배열에 영향이 가지 않는 메소드를 공부 했었습니다. 

 

 

* 원본에 영향이 가는 메소드(함께  변경) :  push / pop / shift / unshift

* 원본에 영향이 가지 않는 메소드 : slice / split 

 

 

[TIP] spread syntax  ( ... )

[1] ES6에서 새롭게 추가된 문법, 배열을 펼칠 수 있습니다. 

[2] 배열과 객체를 복사할 때도 사용할 수 있습니다. 

 

# 새로 만들어진 배열은 같은 요소를 가지고 있어도 각각 다른 주소를 참조 합니다. [ ... arr ] 도 동일하게 작동

 = 기존의 메모리 공간[ arr ] 과 새로운 메모리 공간 [ copy ] 에 같은 요소가 각각 저장 되어 본질적으로는 다른 것이지요. 

[1]
let arr = [ 1, 2, 3, 4, 5];
console.log( ... arr);      // 1 2 3 4 5  

// [ ... arr ] 로 배열 전달 시, 
let arr = [ 1, 2, 3, 4, 5 ] ; 
let copy  = [ ... arr ] ; 

console.log( copy) ;    // [ 1, 2, 3, 4, 5 ] ;
console.log( arr === copy );    // false

[2] 
let obj = { apple: 'red',  banana : ' yellow' };
let copyObj = { ... obj };

console.log( copyObj ) ;   // { apple : 'red', banana : 'yellow ' }
console.log( obj --- copyObj );   // false

* Objec.assign( )을 이용해서 똑같이 참조 자료형을 복사 할 수 있다. 

 

💡참조 자료형 내부에 참조 자료형이 중첩 되어 있는 경우, slice (), Object.assign(), spread syntax 를 사용해도 100% 복사할 수 없으니 주의하자요.  == " 얕은 복사 " 

 

 

 

깊은 복사 

참조 자료형 내부에 중첩 되어 있는 모든 참조 자료형을 100% 복사하는 방법 은 ... JS 내부적으로는 수행할 수 있는 방법이 없다고 합니다.. 🤔 

하지만, 비슷한 결과는 만들어 낼 수 있습니다.  👇👇

 

JSON.stringify( ) 와 JSON.parse( )

const arr = [ 1, 2, [ 3, 4 ] ]; 
const copyArr = JSON.parse(JSON.stringify(arr); 

console.log(arr);    // [ 1, 2, [3, 4] ] 
console.log( copyArr);     // [ 1, 2, [3, 4] ] 

** 물론 arr과 copyArr이 같은건 아닙니다!**   ( arr === copyArr)  // false
** 참조 자료형 안에 중첩된 참조 자료형이 " 함수 " 면 " Null " 을 반환하니 100% 되는 건 또 아님. 
** 굳이 굳이 이용하려면 node.js환경에서 외부 라이브러리 사용 : loadash , ramda 

 

 

➡️ [230302] 코드스테이츠 부트캠프 : 스코프와 클로저 (2탄)

 

 

 

---

🌱 오늘의 생각                                               

🔹

🔹

 

🌱  공부 중 참고 사이트                                   

🔹

🔹

 

🌱 도움이 될 만한 사이트 추천쓰                     

🔹

🔹

🔹