자바스크립트에서 this, var, new 개념 완전 정리

 

---

📚 자바스크립트에서 this, var, new 개념 완전 정리

---

1. this는 함수 안에서 "누가 호출했느냐"에 따라 달라진다

호출 방식 this가 가리키는 대상

new 함수()	새로 만들어진 객체 (인스턴스)
그냥 함수() 호출	전역 객체 (브라우저에선 window)
메서드에서 obj.함수()	그 객체 (obj)
strict 모드에서 함수()	undefined (전역도 아님!)

---

2. this를 쓸 땐 무조건 new와 함께 써야 안전하다

function MyFunc(val) {
  this.a = val;
}
new MyFunc('hello');  // this.a는 새 객체 안에 들어감

🔸 만약 new 없이 호출하면

MyFunc('hello');
console.log(window.a); // ❗ 전역 변수 생김 (this가 window이므로 위험)

→ ❗ 전역에 불필요한 변수 생겨서 버그 유발 위험

---

3. var, let, const를 쓰면 지역 변수로 보호된다

function test() {
  var a = 'hello'; // 지역 변수
  console.log(a);
}
console.log(a); // ❌ 에러: a is not defined

🔸 반대로 var 없이 쓰면?

function test() {
  a = 'hello'; // ❗ 전역 변수 됨!
}
test();
console.log(a); // 😱 전역 변수로 남아있음

---

4. new는 "객체를 만들겠다"는 뜻

function Person(name) {
  this.name = name;
}
var p = new Person('철수');  // p는 { name: '철수' } 객체

🔹 만약 this 없이 그냥 var name = ...으로 처리한다면 객체를 만들 이유가 없음 → new도 필요 없음

---

5. 언제 this vs var 쓰면 되는가?

상황 변수 선언 호출 방식 예시 설명

객체 속성 저장하고 싶을 때	this.a	new	new Cls()	생성자 함수 또는 클래스처럼 사용
함수 안에서만 잠깐 쓰는 값	var a	그냥 호출	fn()	일반 함수용 변수, 지역 스코프 보호
this 썼는데 new 안 썼을 때	❌ 위험	전역 오염	Cls()	window.a 생김 (❗ 버그 위험)

---

6. 실전 예제로 비교

✅ 안전한 객체 생성

function Test(aaa) {
  this.a = aaa;
}
let obj = new Test('hi');
console.log(obj.a); // 'hi'

 

❌ 위험한 방식 (new 없이 this 사용)

function Test(aaa) {
  this.a = aaa;
}
Test('hi');
console.log(window.a); // 'hi' → 전역 변수 됨! (❌ 버그 가능)

 

✔ 지역 변수만 쓸 거면 this 말고 var/let 써라

function Test(aaa) {
  var a = aaa;
  console.log(a);
}
Test('hi');

---

✅ 요약 한 줄 정리

패턴 언제 쓰나 설명

this.a = ... + new	객체 만들고 속성 저장할 때	생성자 함수처럼 사용
var a = ...	함수 안에서만 쓰고 끝날 때	지역 변수로 안전하게 사용
this.a = ... (❌ new 없이)	절대 지양!	전역 오염으로 이어짐 (버그 유발)

---

📌 마무리 요약

• this는 함수 호출 방식에 따라 달라진다
• this를 썼다면 new와 함께 써야 안전하다
• 그냥 값만 처리하려면 var, let, const로 지역 변수 쓰면 된다
• new는 객체를 생성할 때만 사용하고, 안 쓸 거면 this도 쓰지 마라

---