S07L02 - 자바스크립트에서 this

html

JavaScript에서 this 키워드 이해하기: 종합 가이드
목차

소개

    JavaScript에서 this 키워드

전역 스코프
객체 리터럴 내부
함수 및 메서드 내에서
화살표 함수와 this


최고의 실천 방법
결론
추가 자료


소개

  JavaScript는 다재다능하고 강력한 프로그래밍 언어로서, 개발자들에게 객체와 그 동작을 관리하고 조작할 수 있는 다양한 도구와 키워드를 제공합니다. 그 중 핵심적인 키워드 중 하나가 this입니다. this가 다양한 컨텍스트 내에서 어떻게 작동하는지 이해하는 것은 효율적이고 버그 없는 JavaScript 코드를 작성하는 데 필수적입니다. 이 가이드는 this 키워드의 복잡한 면면을 깊이 있게 탐구하며, 전역 스코프, 객체 리터럴, 함수, 화살표 함수에서의 동작을 살펴봅니다. 초보자이든 기본 지식을 가진 개발자이든 관계없이 this를 숙달하면 JavaScript 능력을 향상시킬 수 있습니다.


JavaScript에서 this 키워드
전역 스코프

  전역 실행 컨텍스트(어떤 함수 밖에서)에서 this는 전역 객체를 참조합니다. 브라우저 환경에서는 전역 객체가 window입니다.

예제:




		
		
			
			
Java
			
			console.log(this); // Outputs: Window { ... }
			
				
					
				
					1
				
						console.log(this); // Outputs: Window { ... }
					
				
			
		


설명:

console.log(this)가 전역 스코프에서 실행될 때, 브라우저 창과 관련된 속성과 메서드를 포함하는 window 객체가 기록됩니다.

객체 리터럴 내부

  객체 메서드 내부에서 사용될 때, this는 객체 자체를 참조합니다.

예제:




		
		
			
			
Java
			
			const user = {
    name: 'John Doe',
    gender: 'Male',
    getDetails: function() {
        console.log(this);
    }
};

user.getDetails();
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						const user = {
    name: 'John Doe',
    gender: 'Male',
    getDetails: function() {
        console.log(this);
    }
};
 
user.getDetails();
					
				
			
		


출력:




		
		
			
			
Java
			
			{
  name: 'John Doe',
  gender: 'Male',
  getDetails: [Function: getDetails]
}
			
				
					
				
					1
2
3
4
5
				
						{
  name: 'John Doe',
  gender: 'Male',
  getDetails: [Function: getDetails]
}
					
				
			
		


설명:

여기서 getDetails 메서드 내부의 this는 user 객체를 참조합니다. this를 기록하면 user 객체의 모든 속성과 메서드가 표시됩니다.

함수 및 메서드 내에서
this의 값은 함수가 호출되는 방식에 따라 달라집니다:


    일반 함수:

일반 함수에서, 엄격 모드가 아닐 때 this는 전역 객체(window in browsers)를 참조합니다.

예제:
    




		
		
			
			
Java
			
			function showThis() {
    console.log(this);
}

showThis(); // Outputs: Window { ... }
			
				
					
				
					1
2
3
4
5
				
						function showThis() {
    console.log(this);
}
 
showThis(); // Outputs: Window { ... }
					
				
			
		


  

    메서드:

객체 메서드에서, this는 메서드가 속한 객체를 참조합니다.

예제:
    




		
		
			
			
Java
			
			const car = {
    brand: 'Tesla',
    model: 'Model S',
    getCarInfo: function() {
        console.log(this.brand + ' ' + this.model);
    }
};

car.getCarInfo(); // Outputs: Tesla Model S
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						const car = {
    brand: 'Tesla',
    model: 'Model S',
    getCarInfo: function() {
        console.log(this.brand + ' ' + this.model);
    }
};
 
car.getCarInfo(); // Outputs: Tesla Model S
					
				
			
		


  

화살표 함수와 this

  화살표 함수는 this와 관련하여 일반 함수와 다르게 동작합니다. 화살표 함수는 자체적인 this를 가지지 않으며, 정의될 당시의 외부 컨텍스트의 this 값을 캡처합니다.

예제:




		
		
			
			
Java
			
			const developer = {
    name: 'Alice',
    skills: ['JavaScript', 'React'],
    getSkills: () => {
        console.log(this);
    }
};

developer.getSkills(); // Outputs: Window { ... }
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						const developer = {
    name: 'Alice',
    skills: ['JavaScript', 'React'],
    getSkills: () => {
        console.log(this);
    }
};
 
developer.getSkills(); // Outputs: Window { ... }
					
				
			
		


설명:

getSkills가 developer 객체 내부의 메서드임에도 불구하고, 화살표 함수를 사용하면 this는 developer 객체 대신 전역 객체(window)를 참조하게 됩니다. 이는 종종 예기치 않은 동작을 초래하며, 흔한 실수 지점입니다.


최고의 실천 방법


    객체 메서드에는 일반 함수를 사용하세요:

this가 객체를 참조하도록 하려면 메서드에 일반 함수 표현식을 사용하세요.

권장:
    




		
		
			
			
Java
			
			getDetails: function() {
    console.log(this);
}
			
				
					
				
					1
2
3
				
						getDetails: function() {
    console.log(this);
}
					
				
			
		


피할 것:
    




		
		
			
			
Java
			
			getDetails: () => {
    console.log(this);
}
			
				
					
				
					1
2
3
				
						getDetails: () => {
    console.log(this);
}
					
				
			
		


  

    짧은 메서드 정의 활용:

현대 JavaScript는 function 키워드 없이 간결한 메서드 정의를 허용하여 올바른 this 컨텍스트를 유지합니다.

예제:
    




		
		
			
			
Java
			
			const user = {
    name: 'Jane Doe',
    getName() {
        console.log(this.name);
    }
};

user.getName(); // Outputs: Jane Doe
			
				
					
				
					1
2
3
4
5
6
7
8
				
						const user = {
    name: 'Jane Doe',
    getName() {
        console.log(this.name);
    }
};
 
user.getName(); // Outputs: Jane Doe
					
				
			
		


  

    화살표 함수 사용 시 주의:

콜백이나 이벤트 핸들러와 같이 외부 스코프의 this 컨텍스트를 유지하려는 경우에만 화살표 함수를 사용하세요.



    엄격 모드를 이해하세요:

엄격 모드에서는 어떤 객체에도 바인딩되지 않은 일반 함수 내에서 this가 undefined로 남아, 우발적인 전역 객체 참조를 피할 수 있습니다.




결론

  JavaScript에서 this 키워드는 강력하면서도 복잡할 수 있는 기본 개념입니다. this의 값은 실행 컨텍스트에 따라 동적으로 변하며, 이는 개발자들이 버그와 의도치 않은 동작을 방지하기 위해 명확한 이해를 필요로 합니다. 전역 스코프, 객체 리터럴, 일반 함수, 화살표 함수에서 this의 동작을 구분함으로써, 개발자들은 보다 예측 가능하고 유지보수 가능한 코드를 작성할 수 있습니다. 객체 메서드에는 일반 함수를 사용하고 화살표 함수 사용 시 주의하는 등 최고의 실천 방법을 준수하면 this를 효과적으로 활용할 수 있습니다. this의 숙달은 JavaScript 기술을 향상시킬 뿐만 아니라 더 진보된 프로그래밍 패러다임을 탐구하는 기반을 마련해 줍니다.


  키워드: JavaScript, this 키워드, 객체 리터럴, 화살표 함수, 전역 스코프, 함수, 메서드, 프로그래밍, 개발자 가이드, JavaScript 튜토리얼


추가 자료

MDN Web Docs: this 키워드
JavaScript.info: this 키워드
Eloquent JavaScript: this 이해하기
You Don't Know JS: 스코프 & 클로저

참고: 이 기사는 AI에 의해 생성되었습니다.