[JavaScript] this

this의 기본 개념

this란? 현재 코드가 실행되는 시점에서 그 함수를 호출한 객체를 가리키는 키워드. "호출한 주체"에 따라 this의 값이 달라질 수 있음

전역 스코프에서의 함수와 this

전역 스코프에서 선언된 함수는 window 객체의 메서드로 등록

예시:

function sayHello() {
  console.log(this);
}

sayHello();        // window 출력
window.sayHello(); // window 출력

console.log(window);
// 출력: Window {sayHello: ƒ, ...}

객체 메서드와 this

객체의 메서드 내에서 this를 사용하면 해당 객체의 속성에 접근 가능. 객체 내부에서 자신의 속성을 쉽게 참조할 수 있음

예시:

const person = {
  name: "철수",
  age: 18,
  introduce: function() {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고 ${this.age}살입니다.`);
  }
};

person.introduce(); // 출력: 안녕하세요, 제 이름은 철수이고 18살입니다.

this 사용의 이점

this 키워드 사용 시 객체 내부에서 자신의 속성들을 쉽게 참조 가능. 코드의 재사용성과 유지보수성 향상.

this를 사용하지 않은 예제

const person = {
  name: "철수",
  age: 18,
  introduce: function() {
    console.log("안녕하세요, 제 이름은 " + person.name + "이고 " + person.age + "살입니다.");
  }
};

person.introduce(); // 출력: 안녕하세요, 제 이름은 철수이고 18살입니다.

this 미사용 시 객체 이름(예: person) 변경 때 메서드 내부의 모든 참조 수정 필요. this 사용 시 객체 이름 변경되어도 메서드 내부 코드 수정 불필요.

화살표 함수에서의 this

화살표 함수에서 this는 일반 함수와 다르게 동작:

• 화살표 함수는 자신만의 this를 생성하지 않음
• 함수가 "정의될 때"의 스코프에 있는 this를 사용
• 이를 '렉시컬 this' 또는 '어휘적 this'라고 함

1. 일반 함수와 화살표 함수의 차이

const obj = {
  name: "철수",
  regularFunc: function() {
    console.log("Regular function:", this.name);
  },
  arrowFunc: () => {
    console.log("Arrow function:", this.name);
  }
};

obj.regularFunc(); // 출력: Regular function: 철수
obj.arrowFunc();   // 출력: Arrow function: undefined

이 예제에서 화살표 함수 내의 this는 전역 객체를 가리키므로, this.name은 undefined가 됨

2. 렉시컬 스코프의 동작

const obj = {
  name: "윤지",
  regularFunc: function() {
    const arrowFunc = () => {
      console.log(this.name); // regularFunc의 `this` 사용
    };
    arrowFunc();
  }
};

obj.regularFunc(); // 출력: 윤지

• arrowFunc는 regularFunc의 스코프에서 정의되어 obj를 가리킴
• 화살표 함수는 자신의 this를 만들지 않고, 감싸는 함수의 this를 사용

3. 화살표 함수의 설계 목적

화살표 함수는 this를 일관되게 유지하기 위해 설계:

• 일반 함수에서는 호출 주체에 따라 this가 바뀌어 예기치 않은 버그가 발생할 수 있음
• 화살표 함수는 렉시컬 스코프를 따라 this가 바뀌지 않도록 설계됨

생성자 함수에서의 this

1. 생성자 함수의 개념

• 생성자 함수: 새로운 객체를 만들기 위한 템플릿
• new 키워드로 호출 시 새로운 객체 생성, 그 객체 내에서 this 사용

2. 예제 코드

function 고양이(고양이이름) {
  this.이름 = 고양이이름;  // 'this.이름'은 새로 생성된 고양이 객체의 속성
}

const 아기고양이 = new 고양이("네로");
console.log(아기고양이.이름); // 출력: '네로'

• 고양이이름: 함수 호출 시 전달받는 매개변수
• this.이름: 새로 생성된 고양이 객체의 속성
  • this는 새로 생성된 고양이 객체를 가리킴
  • 고양이 객체에 이름 속성 생성, "네로" 값 할당

3. 생성자 함수에서 this를 사용하지 않는 경우

function 고양이(고양이이름) {
  const 이름 = 고양이이름;  // 지역 변수에 이름 저장
}

const 아기고양이 = new 고양이("네로");
console.log(아기고양이.이름); // 출력: undefined

• 아기고양이 객체에 이름 속성이 생성되지 않음
• 이름은 함수 내부의 지역 변수로만 존재
• 함수 실행 종료 시 지역 변수 소멸, 객체에 정보 저장되지 않음

4. 정리

• this 미사용: 값이 지역 변수에만 저장되어 함수 종료 시 소멸
• this 사용: 생성된 객체의 속성으로 값 저장, 이후 객체를 통해 접근 가능