1. 프로그램 제작에서 새로 배운 것들

---

1) window

• window 객체는 브라우저를 가리키는 객체이다.
• 브라우저가 제공하는 기본 객체와 함수들은 대부분 window 객체 안에 들어 있다.
• document 객체, console 객체도 window에 들어있으며, 생략하고 사용할 수 있다.

2) this

• 기본적으로 window를 가리킨다.
• 객체를 통해 사용하면 객체를 가리킨다.
• addEventListener와 같은 특정 메소드에서 콜백함수의 this는 특정 메소드가 가리키는 태그를 가리킨다. 이를 원치 않으면 함수 선언문이 아닌, 화살표 함수를 사용하면 된다.

3) 참조, 깊은 복사, 얕은 복사

• 복사는 어떤 값을 다른 변수에 대일할 때 기존 값과 참조 관계가 끊기는 것을 의미한다. 객체가 아닌 값은 애초에 참조관계가 없으므로 그냥 복사된다.
• 얕은 복사는 중첩된 객체가 있을 때 가장 바깥 객체만 복사되고 내부 객체는 참조 관계를 유지한다.
• [...배열], {...객체}를 사용하면 얕은 복사를 할 수 있다.
• 깊은 복사는 내부 객체까지 참조 관계가 끊겨서 복사된다.
• JSON.parse(JSON.stringify(값))으로 간단하게 깊은 복사를 할 수있다. 다만, 성능도 느리고 함수나 Math, Date 같은 객체를 복사할 수 없다. 따라서 실무에서는 lodash같은 라이브러리를 사용한다.

const array = [{j: 'k'}, {l: 'm'}]; // 중첩된 객체
const shallowCopy = [...array]; // 얕은 복사
const deepCopy = JSON.parse(JSON.stringify(array)); // 깊은 복사

4) 클래스

• 객체를 생성하는 템플릿 문법이다.

class human {
  constructor(name, age, height, weight) {
	this.name = name;
    this.age = age;
    this.height = height;
    this.weight = weight;
  }
  study (target) {
    실행문;
  }
}

const me = new human("최준영", 24, 178, 75);

• 클래스를 호출할 떄 new를 붙여 호출하면 constructor 메소드가 실행되고 객체가 반환된다.

5) 클래스 상속

• 여러 클래스 간에 공통되는 부분이 존재하면 이를 클래스로 새로 선언한 후 상속시키면 재사용성이 높아진다.

class Unit {
  constructor(name, hp, att) {
    this.name = name;
    this.hp = hp;
    this.att = att;
  }
  attack(target) {
    target.hp -= this.att;
  }
}
  
class Hero extends Unit { // extends로 부모 클래스 상속
  constructor (name) {
  	super(name, 100, 10); // 부모클래스의 생성자 호출
    this.lev = 1; // 그외 속성
  }
  attack(target) {
    super.attack(target); // 그외 속성이 없다면 생략 가능
  }
}

2. 복습코딩

---