js 스크립트 코드의 지역화

javascript ES5 정리

js 스크립트 코드의 지역화

풀스택 개발자 2020. 9. 23. 12:36

개발자는 항상 가독성이 좋은 코드를 작성해야한다.

아래의 코드를 보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function add(){
             var a=3;
             var b=4; 
             btnprint.value=a+b;
              update = document.getElementById("update");
              update.innerText = a+b;
         }
         function init(){
            btnprint = document.getElementById("btn-print");
            btnprint.onclick = add;
        }
        window.onload = init;
      </script>
</head>
<body>
    
    <input type="button" value="클릭" id="btn-print"/></br>
    <span id="update">하이요</span>
</body>

</html>

init함수를 보면 btnprint.onclick = add; 부분이 있다.

이는 add함수를 만들고 또 대입함으로써 불필요한 작업이다.

이를 수정해보겠다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
         function init(){
            btnprint = document.getElementById("btn-print");
            btnprint.onclick = function add(){
             var a=3;
             var b=4; 
             btnprint.value=a+b;
              update = document.getElementById("update");
              update.innerText = a+b;
         }
        }
        window.onload = init;
      </script>
</head>
<body>
    
    <input type="button" value="클릭" id="btn-print"/></br>
    <span id="update">하이요</span>
</body>

</html>

add함수를 그냥 바로 대입시켜줌으로써 두번해야하는 작업을 한번으로 줄였다.

이때 함수이름명 add를 생략해도된다 그러면 아래와 같이 이름이 없는 함수 즉 익명함수가 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
         function init(){
            btnprint = document.getElementById("btn-print");
            btnprint.onclick = function (){
             var a=3;
             var b=4; 
             btnprint.value=a+b;
              update = document.getElementById("update");
              update.innerText = a+b;
         }
        }
        window.onload = init;
      </script>
</head>
<body>
    
    <input type="button" value="클릭" id="btn-print"/></br>
    <span id="update">하이요</span>
</body>

</html>

다음으로

window객체의 하위객체 onload를 사용하여 init함수를 window를 모두 읽어들인 후 실행한다.

이 또한 init함수 앞에 바로 기입할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function init(){
            btnprint = document.getElementById("btn-print");
            btnprint.onclick = function (){
             var a=3;
             var b=4; 
             btnprint.value=a+b;
              update = document.getElementById("update");
              update.innerText = a+b;
         }
        }

      </script>
</head>
<body>
    
    <input type="button" value="클릭" id="btn-print"/></br>
    <span id="update">하이요</span>
</body>

</html>

처음 코드와 수정한 코드의 차이를 보면 가독성이 정말 좋아졌다는것을 볼 수 있다.