생코 선생님 댓글 중 아주 잘 정리해놓은 것이 있어서 발췌해 옴
18강. 리팩토링, 중복의 제거
[목적] 리팩토링(ReFactoring. 코드의 비효율적인 것을 제거하는 것.
중복코드를 개선하는 등 코드를 깔끔히 정리해주는 것.)을 통해 코드의 중복을 제거한다.
[실습
] 16강에서 했던 조건문을 좀 더 깔끔히 바꾸어본다.
(1) <input type="button" value="night" onclick=" -> input 태그 안에 id값을 지정해준 것을 삭제한다.
굳이 안 써도 대체 가능.
(2) if(this.value === 'night'){ -> 현재 value값이 night이므로
this로 값을 써주기만 하면 됨. if 안에 있는 코드가 사실상 자기 자신이므로 this를 쓴 것.
(3) 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'; } ">
-> value값 써주는 곳은 다 this로 표현.
(4) 그런데 여기서 document.querySelector('body')가 계속 중복으로 나오므로
var target = document.querySelector('body')으로 target 변수를 지정해서 더 짧은 코드로 완성 가능.
이 target변수는 input태그 안에서만 유효한 변수.
[코드]
<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';
} ">
cf) ctrl+D를 누르면 같은 문자열을 중복 선택해준다. (하나씩 추가되는 형태)
Ctrl+Shift+L을 누르면 커서가 위치된 문자열을 전부 선택해 준다
'프론트엔드 > js' 카테고리의 다른 글
| [생활코딩 WEB2 JS 23강] 반복문과 배열로 웹하이퍼링크도 색 입혀주자 / 구글링 (0) | 2023.08.08 |
|---|---|
| [생활코딩 WEB2 JS 20강] Loop & Array 반복문 배열 (0) | 2023.08.08 |
| [생활코딩 WEB2 JS 15강] 비교 연산자와 블리언, 조건문 , 토글키 만들기 (0) | 2023.08.08 |
| [생활코딩 WEB2 JS 12강] 제어할 태그 선택하기 onclick, Selcet 선택자 구글링하기, Document.querySelector(), css는 소문자,js는 대문자 이해하기 (0) | 2023.08.07 |
| [JS] 강의 찾는데만 한나절.. 챗GPT로 해결보다 (0) | 2023.08.06 |
