10, 11강 강의 정리

▶️ window 객체

• window 객체는 브라우저를 가리키는 객체로, 브라우저가 제공하는 기본 객체와 함수들은 대부분 window 객체 안에 들어 있다.
• document 객체나 console 객체도 실제로는 window.document, window.console인데 window를 생략하고 document와 console만 적는다.

▶️ this

-this는 상황에 따라 다른 값을 가진다. 기본적으로 this는 window 객체를 가리키므로 어떤 때에 어떤 값을 가지는지 외우면 된다.

1) 객체를 통해 this를 사용할 떄는 this가 해당 객체를 가리키게 된다.
2) 특정 메서드는 콜백함수의 this를 변경한다. addEventListener가 대표적이다.
3) this가 바뀌는 것을 원치 않는다면 함수 선언문 대신 화살표 함수를 사용한다.

---

▶️ shall Copy(얕은 복사) & deep Copy(깊은복사)

const array = [{ j: 'k' }, { l: 'm' }];
const reference = array; // 참조
const shallowCopy = [...array]; // 얕은 복사
const deepCopy = JSON.parse(JSON.stringify(array)); // 깊은 복사
console.log(array === reference); // true
console.log(array[0] === reference[0]); // true
console.log(array === shallowCopy); // false
console.log(array[0] === shallowCopy[0]); // true
console.log(array === deepCopy); // false
console.log(array[0] === deepCopy[0]); // false

• 복사는 어떤 값을 다른 변수에 대입할 때 기존 값과 참조 관계가 끊기는 것을 의미한다. 객체가 아닌 값은 애초부터 참조 관계가 없으므로 그냥 복사된다.

• 객체를 복사할 때는 얕은 복사와 깊은 복사가 있는데, 얕은 복사는 중첩된 객체가 있을 때 가장 바깥 객체만 복사되고 내부 객체는 참조 관계를 유지하는 복사를 의미한다.

• 깊은 복사는 내부 객체까지 참조 관계가 끊겨서 복사되는 것을 의미한다.

• JSON.parse(JSON.stringify(값))으로 간단하게 딥카피할 수 있다.

얕은 복사를 할 때는 ... 연산자를 사용한다. 배열이라면 [...배열]을 하면 되고, 객체라면 {...객체}를 하면 된다.

---