# function



```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="alert" class="alert-box" >
        알림창
        <button onclick="document.getElementById('alert').style.display = 'none'">닫기</button>
    </div>
    <button onclick="document.getElementById('alert').style.display = 'block'">알림창을 보여줘!</button>
</body>

</html>
```

이렇게 라인안에 모든 내용을 작성하면 (js, css) 라인이 너무 길어지고 코드가 지저분해진다.

지저분한 코드 = 수정, 유지보수가 어렵다.



```html
<script> 
    function 함수명(){
        //함수내용 작성
    }
</script>
```

✨실습.  button에 있는 javaScript를 function으로 분리하기&#x20;

###

### 🐫함수명 작명 방법(camelCase)

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FYJ5sgiZTDyDXdAJ8QKBG%2FScreenshot_37.png?alt=media&#x26;token=8dc3362e-3bb3-49f0-9b2b-1a986ba80f00" alt=""><figcaption></figcaption></figure>

&#x20;함수명을 작명할때는 camelCase로 직관적이게 작성한다.



<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FjxHE6OtCiB1qvSf3RyCX%2FScreenshot_38.png?alt=media&#x26;token=d7252d17-d9ef-44e7-b088-9617d18a1637" alt=""><figcaption></figcaption></figure>

### 😱오타 주의!

```javascript
 function alertPopup(){
     document.getElementById('alret').style.display = 'block'
 }
 
 // alert > alret 오타 
```

이렇게 오타가  나면 버튼을 클릭해도 동작을 안한다.

당황하지 말고 F12를 눌려서 개발자 도구를 켜보자😥

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FokOrur01xfuUsX9idik9%2FScreenshot_41.png?alt=media&#x26;token=a8c6d460-cba7-445c-99c1-a2c595f51e15" alt=""><figcaption><p>Console 탭을 누르면 오류 로그를 확인 할 수 있다.</p></figcaption></figure>

이렇게 오류 로그를 보고 원인을 찾고 수정하는것을 Debugging(디버깅) 이라고 한다.&#x20;

해당 에러로그를 복붙해서 구글에 검색해보자.

[https://sir.kr/qa/398083](https://sir.kr/qa/398083) : 여기서 답변을 확인해보자&#x20;



앞으로 개발을 하면서 수많은 오류들을 만날텐데 로그만 봐도 알 수 있는 경우도 있고 모르겠으면 구글에 검색해보면 된다.&#x20;

