변수 호이스팅 | 얕은 복사와 깊은 복사

변수 호이스팅

변수 호이스팅이란 변수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미함
JS 명령을 실행하는 과정은 아래와 같음

1. 변수 키워드를 파악
2. 키워드가 var라면 undefined를 할당 (이를 초기화라고 함)
3. 키워드가 let, const라면 일시적 사각지대인 TDZ 에 머물게 됨 ( undefined로 초기화 x)
4. 실행

이러한 과정으로 실행되기 때문에 시각적으로 var 키워드만 호이스팅되는 것처럼 보임 하지만 모든 변수가 호이스팅을 하게 된다 . let과 cont는 undefined를 할당하기 바로 전 TDZ라는 사각지대에 머무르기 때문에 호이스팅이 안되는 것처럼 보임

함수 호이스팅

함수 호이스팅이란 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미함
이것도 변수 호이스팅과 비슷해보이지만, 함수 종류에 따라 호이스팅이 불가능함

• 함수 선언식 ( 호이스팅 O )

function test() { return } 

• 함수 표현식 ( 호이스팅 x )

const test = fucntion () { return } 

🚫 하지만 호이스팅은 절대 좋은 일이 아님! 값이 할당되기 전에 호출하는 것은 비정상적인게 맞으니 최대한 호이스팅이 일어나지 않게 해야함 이러한 이유로 JSON을 만든 더글라스 크락포드도 함수 표현식 사용을 권장함

깊은 복사 , 얕은 복사

깊은 복사(Deep Copy)

'실제 값' 을 새로운 다른 메모리에 공간에 복사하는 것을 의미

1. spread syntax 사용

const obj = {id : 1 , name : 'jungho' };
const copyObj = {...obj}

console.log(obj === copyObj ) // false

obj.id = '1';
console.log(obj.id) // '1'
console.log(copyobj.id) // 1

2. Object 객체의 assign() 사용

const obj = {id : 1 , name : 'jungho' };
const copyObj =  Object.assign({}, obj1);

console.log(obj === copyObj ) // false

obj.id = '1';
console.log(obj.id) // '1'
console.log(copyobj.id) // 1

• 복사본을 수정했을 때 원본은 변하지 않는 깊은 복사가 됨
• 하지만, 깊은 복사도 딱 한 곁까지만 일어남

한 곁까지만 깊은 복사가 된다는 의미는

const obj = {id : 1 , name : 'jungho'  hobby : ['game' , 'movie' ] };
const copyObj = {...obj}

console.log(obj === copyObj ) // false
console.log(obj.hobby  === copyobj.hobby) // true

copyObj.hobby[0] = "Exercise"

console.log(obj.hobby[0]) // "Exercise"
console.log(copyObj.hobby[0]) // "Exercise"

• 각 객체를 비교했을 때는 false가 나와서 깊은 복사가 잘 되어 보이지만,
• 각 객체의 hobby의 주소값은 같음
• hobby의 주소값은 같기 때문에 복사본의 hobby 요소를 변경하면 원본의 hobby 요소도 바뀜

결론 : 완전한 깊은 복사를 편하게 구현하기 어려움
재귀함수 , JSON.parse(), JSON.stringify() 등을 이용하는 방법은 있긴함...

얕은 복사(Shallow Copy)

'주소 값'을 복사한다는 의미, 주소 값이 같기에 참조하는 실제 값도 같음

const obj = {id : 1 , name : 'jungho' };
const copyObj = obj;


console.log(obj === copyObj ) // true
const copyObj['id'] = '1'

console.log(copyObj) // {id : '1' , name : 'jungho' };
console.log(obj) // {id : '1'  , name : 'jungho' };

• 위 두 배열은 같은 데이터주소를 가지고 같은 주소를 참조하고 있음
• 때문에 copyObj 요소를 수정한다면 obj 요소도 동일하게 변경됨