[JS] 생소했던 function 문법 🔨 이해하기

JS를 처음 배울 때 function을 잘 이해하지 못해서 한참 여러 영상을 뒤져봤던 기억이 있다..

그러다가 여기 강의가 제일 이해가 잘 돼서 정착했던 게 계기가 되었다

하지만 따로 배운 내용을 기록해두지는 않았기에 아래에 정리해서 작성해두겠다

 

---

 

function 문법이란

1. function(함수): 긴 코드를 한 단어로 축약하고 싶을 때 쓰는 것
   → 특정 기능을 다음에도 다시 사용하기 위해 모듈화해놓는 문법
2. function 작성하는 방법
   - function 키워드 쓰고 소괄호, 중괄호 붙이기
   - 소괄호 왼쪽에 작명하고
   - 긴 코드를 중괄호 안에 담으면 코드 축약 끝!
   - 그럼 이제 아무거나이름() 을 쓸 때마다 그 자리에 긴 코드가 실행된다

function 아무거나이름(){
  축약하고 싶은 긴 코드
}

 

 

Alert 예제 function으로 줄이기

1. 버튼의 onclick 안에 길고 더럽게 작성된 JS 코드를 함수로 축약해보자
   *** (참고) 함수 이름 짓는 팁!
   - 영어 소문자로 시작한다
   - camelCase에 따라 작성한다 ( ex.  openAlert ⭕️   open_alert ❌ )
   
   
2. Alert 창을 여는 코드를 function 안에 넣어본다
   - 그러면 앞으로 알림창열기() 라고 쓸 때마다 function 내부의 코드가 실행된다 
   - 따라서 버튼 onclick 안에 길게 쓴 내용을 한 단어로 대체할 수 있게 된다

<button onclick="알림창열기()">알림창 여는 버튼</button>

<script>
  function 알림창열기(){
    document.getElementById('alert').style.display = 'block';
  }
</script>

 

 

문제

아래 코드를 함수로 축약해보자

예제)

<div class="alert-box" id="alert">
	알림창임
    <button onclick="document.getElementById('alert').style.display = 'none';">
    닫기</button>
</div>

풀이)

<div class="alert-box" id="alert"> 알림창임
    <button onclick="알림창닫기()">닫기</button>
</div>

<script>
	function 알림창닫기() {
    		document.getElementById('alert').style.display = 'none';
    }
</script>

 

자주 겪는 에러

1. JS 코드는 밑에 작성해야 한다
   - HTML이 위에, JS가 아래에 있어야 조작이 잘된다
   - 컴퓨터가 html 파일을 위에서부터 읽어나가기 때문이다
   
   
2. 오타를 조심하자
   - getElementById(), 혹은 id 입력 시 오타 주의
   - 에러날 경우: 브라우저 우클릭 → 검사 → console 확인

 

 

 

---

 

TIL 끝!