리팩토링(refactoring)

 

 

코딩을 하고나면 코드에 비효율적인 면이 생기기 마련이다.

 

코드 자체를 효율적으로 만들어서

그 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을

리팩토링이라고 합니다.

 

소프트웨어의 규모가 커지고 복잡해지면 틈틈이 리팩토링 해야 좋은 프로그램을 만들 수 있다.

 

 

 

사례

조건문을 이용하여 토글 기능이 있는 버튼을 구현하는 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>자바스크립트</h1>
    <h2>조건문</h2>

    <input type="button" id="night_day" value="night" onclick="
        if(document.querySelector('#night_day').value ==='night'){
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color ='white';
            document.querySelector('#night_day').value= 'day';

        }else{
            document.querySelector('body').style.backgroundColor='white';
            document.querySelector('body').style.color ='black';
            document.querySelector('#night_day').value= 'night';
        }
    ">

    <p>코딩하는 코린이</p>

    

</body>
</html>

 

 

 

this 키워드 사용

 

onclick과 같은 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도록 

약속돼 있는 특수한 키워드를 사용한다.  바로 this 키워드 이다.

 

<input type="button" id="night_day" value="night" onclick="
        if(document.querySelector('#night_day').value ==='night'){
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color ='white';
            document.querySelector('#night_day').value= 'day';

 

document.querySelector('#night_day').value= 'day';

여기서 doucment.querySelector('#night_day')는 자기 자신을 가리킨다.

 

따라서 이 코드 대신 this로 바꾸면 된다.

 

 <input type="button" id="night_day" 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';
        }
    ">

 

 this.value= 'day';

 

 

코드가 훨씬 간결해졌다.

 

중복 제거

 

위에 코드를 보면

 

 document.querySelector('body')

부분이 중복 해서 등장하고 있다.

 

 

중복된 코드를 간결하게 하여 유지보수 하기 편하게 만들어보자

 

<body> 태그를 변수 target에 할당

 

var target = document.querySelector('body');

 

 

<input type="button" id="night_day" 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';
        }
    ">

 

코드가 간결해졌다.!!

'JavaScript' 카테고리의 다른 글

JavaScript 함수 (function)  (0) 2020.12.06
조건문 활용- 토글(toggle)  (0) 2020.12.06
JS의 이벤트  (0) 2020.12.06
script 태그  (0) 2020.12.06
JavaScript 란?  (0) 2020.12.06

+ Recent posts

티스토리툴바