this와 리팩토링
2023. 1. 12. 12:16
javascript에서는 this라는 키워드가 있는데 이 키워드는 자기자신을 가리킨다.
이전 포스트에서 조건문을 활용해 만든 토글 예제를 살펴보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if-else</title>
</head>
<body>
<input id='toggle' type="button" value="night" onclick="
if(document.querySelector('#toggle').value === 'night') {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#toggle').value = 'day'
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#toggle').value = 'night'
}
">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
</p>
</body>
</html>위 코드에서 버튼의 onclick 속성값을 보면 document.querySelector('#toggle')이 반복되는 것을 볼 수 있다.
id가 toggle인 요소를 선택하는 코드인데, 버튼 자기자신을 선택하고 있다.
이럴 때 그냥 this를 사용하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if-else</title>
</head>
<body>
<input type="button" value="night" onclick="
if(this.value === 'night') {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = 'day'
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
this.value = 'night'
}
">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
</p>
</body>
</html>this를 사용하게 되면서 id값도 필요하지 않게된다.
그리고 또 document.querySelector('body')도 반복해서 등장하는데, 이런 것들은 변수를 통해 중복을 제거해주면 좋다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if-else</title>
</head>
<body>
<input type="button" value="night" onclick="
var target = document.querySelector('body')
if(this.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day'
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night'
}
">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
</p>
</body>
</html>
이렇게 코드의 중복을 제거하고 가독성을 좋게 만드는 것을 리팩토링이라고 한다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs124
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org
'공부 > JavaScript' 카테고리의 다른 글
| 함수 (0) | 2023.01.26 |
|---|---|
| 반복문 (0) | 2023.01.12 |
| 조건문 (0) | 2023.01.12 |
| querySelector() (0) | 2023.01.11 |
| HTML에서 JavaScript 사용하기 (0) | 2023.01.10 |
