JavaScript OOP에서의 컨텍스트 손실

클래스를 다룰 때 컨텍스트가 손실되어 this가 클래스 객체가 아닌 다른 것을 가리키는 경우가 발생할 수 있습니다. 어떻게 이런 일이 일어나고 어떻게 해결해야 하는지 살펴보겠습니다.

사용자 이름과 해당 사용자가 방문한 도시들의 배열을 포함하는 User 클래스가 있다고 가정해 봅시다:

class User {
	constructor(name, cities) {
		this.name = name;
		this.cities = cities;
	}
}

도시들을 출력하는 메서드가 있다고 해봅시다:

class User {
	constructor(name, cities) {
		this.name = name;
		this.cities = cities;
	}
	
	showCities() {
		this.cities.forEach(function(city) {
			console.log(city);
		});
	}
}

이 메서드에서 클래스의 몇 가지 보조 메서드를 사용하기로 결정했다고 가정해 봅시다. 이 경우 컨텍스트가 손실됩니다:

class User {
	constructor(name, cities) {
		this.name = name;
		this.cities = cities;
	}
	
	showCities() {
		this.cities.forEach(function(city) {
			console.log(this.#cape(city)); // 컨텍스트가 손실됨
		});
	}
	
	#cape(str) {
		return str[0].toUpperCase() + str.slice(1);
	}
}

예를 들어, 화살표 함수를 도입하여 문제를 해결할 수 있습니다:

class User {
	constructor(name, cities) {
		this.name = name;
		this.cities = cities;
	}
	
	showCities() {
		this.cities.forEach(city => {
			console.log(this.#cape(city));
		});
	}
	
	#cape(str) {
		return str[0].toUpperCase() + str.slice(1);
	}
}

다음 코드에서 발생한 오류를 수정하세요:

class Employee {
	constructor(name, salary, coeffs) {
		this.name = name;
		this.salary = salary;
		this.coeffs = coeffs;
	}
	
	getTotal() {
		return this.coeffs.reduce(function(res, coeff) {
			return res + this.salary * coeff;
		}, 0);
	}
}

let employee = new Employee('john', 1000, [1.1, 1.2, 1.3]);
let total = employee.getTotal();
console.log(total);