JavaScript this와 super, 5분 만에 차이 이해하기 - 코드카인 티스토리

안녕하세요! 😊 JavaScript의 super와 this를 이해하는 시간을 가져봐요!

코드를 작성하다 보면 "왜 이걸 써야 하지?", "둘의 차이는 뭘까?" 같은 고민을 하게 되죠. 오늘은 이런 궁금증을 해결하고, 여러분이 클래스 상속과 객체 지향 프로그래밍에서 중요한 개념을 쉽게 이해할 수 있도록 도와드릴게요! 💡

---

🛠️ this란? 객체 자신을 가리키는 지휘자!

this는 JavaScript에서 현재 실행 중인 함수가 속한 객체를 참조하는 키워드입니다. 쉽게 말해, “나 자신”을 나타내는 거죠.
this는 문맥(context)에 따라 가리키는 대상이 달라질 수 있으니 주의해야 해요!

🚗 예시: 자동차 운전자 비유

this는 마치 자동차의 운전자 같아요. 자동차 안에서 운전하는 사람은 누구든 현재 자동차를 제어할 권한이 있죠.

class Car {
  constructor(brand) {
    this.brand = brand; // this는 현재 Car 객체를 참조
  }

  displayBrand() {
    console.log(`This car is a ${this.brand}`);
  }
}

const myCar = new Car('Tesla');
myCar.displayBrand(); // 출력: This car is a Tesla

this는 myCar 객체를 가리키고, myCar의 속성(brand)에 접근해 자동차의 브랜드를 출력합니다.

---

🦸‍♂️ super란? 부모 클래스의 도움 요청

super는 부모 클래스의 생성자 또는 메서드에 접근하기 위해 사용됩니다. 자식 클래스가 부모 클래스의 기능을 확장하거나 재사용할 때 유용하죠.

🎓 예시: 부모님에게 도움 요청하기

부모님께 도움을 요청해서 자신의 할 일을 더 잘 해내는 모습이라고 보면 돼요.

class Parent {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 부모 클래스의 생성자를 호출
    this.age = age;
  }

  greet() {
    super.greet(); // 부모 클래스의 greet 메서드 호출
    console.log(`I am ${this.age} years old.`);
  }
}

const child = new Child('Alex', 10);
child.greet();
// 출력:
// Hello, I am Alex
// I am 10 years old.

여기서 super(name)은 부모 클래스의 생성자에 접근해 name 속성을 초기화합니다.
super.greet()는 부모 클래스의 greet 메서드를 호출해 부모의 인사를 재활용하면서 추가 메시지를 출력합니다.

---

🔍 this와 super의 차이점 한눈에 보기

구분	this	super
역할	현재 객체를 참조	부모 클래스의 생성자나 메서드에 접근
사용 위치	메서드나 생성자에서 사용	자식 클래스에서만 사용 가능
동작 원리	객체 자신의 속성과 메서드에 접근	부모 클래스의 기능을 호출하거나 확장
비유	자동차 운전자	부모님께 도움 요청

---

🏋️‍♀️ 실전 연습: super와 this 함께 사용하기

class Animal {
  constructor(name) {
    this.name = name;
  }

  sound() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 부모 클래스의 name 초기화
    this.breed = breed;
  }

  sound() {
    super.sound(); // 부모 클래스의 sound 호출
    console.log(`${this.name} barks loudly!`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.sound();
// 출력:
// Buddy makes a sound.
// Buddy barks loudly!

여기서 super.sound()는 부모 클래스의 기본 동작을 유지하면서, 자식 클래스에서 기능을 추가적으로 구현하는 좋은 방법이에요. 😊

---

💡 주요 포인트 정리

1. this는 현재 객체를 참조하고, 문맥에 따라 달라진다.
2. super는 부모 클래스의 생성자나 메서드를 호출할 때 사용된다.
3. super와 this의 순서:
   • 생성자에서 this를 사용하기 전 반드시 super를 호출해야 한다.
   • 이유는 부모 클래스의 생성자가 호출되지 않으면 자식 클래스가 초기화되지 않기 때문이에요.

---

😊 마무리하며..

JavaScript에서 this와 super는 객체 지향 프로그래밍의 핵심이에요. 두 키워드를 제대로 이해하면, 코드의 재사용성과 가독성을 높일 수 있습니다.
여러분도 이제 클래스 상속에서 이 두 키워드를 자신감 있게 사용할 수 있을 거예요! 🚀