[JS] function에 구멍을 뚫어보자 🔫 파라미터

function에서 유난히 더 이해가 어려웠던 파라미터..!

parameter 개념을 제대로 익혀보자

 

---

 

파라미터? 그게 뭐고 🤷

1. parameter(파라미터): 함수 내에 구멍🕳을 뚫는 것
   - 비슷한 함수가 많으면 가변적인 부분에 구멍을 뚫어서 재사용한다
   - 하나의 함수로 다양한 기능 실행 가능해짐
2. 함수에 구멍 뚫는 방법
   - () 소괄호 내에 아무 글자나 적기
   - {} 중괄호 내에도 같은 글자 아무데나 작성
3. 근데.. 구멍을 왜 뚫는거지?
   - 구멍을 뚫으면 함수를 업그레이드해서 사용할 수 있다
   - 이제 함수를 쓸 때 소괄호 내에 문자, 숫자 등을 입력해서 사용 가능
   - 알림창열기('안녕') 이란,
      → 구멍에 '안녕'을 넣어서 알림창열기 안의 코드를 실행해주세요! 라는 뜻
      → 참고) ' ' 있으면 문자임 ('123'은 문자, 123은 숫자)
4. 주의사항
   - .style.display = 구멍;    /     알림창열기('구멍');
    → js 에서는) 구멍에 '' 붙이지 않기! 
    → html 에서는) '구멍' 에 '' 붙이기!
   

function 알림창열기(구멍){
  document.getElementById('alert').style.display = 구멍;
}

 

 

파라미터 활용 예시

복잡한 수식을 여러 번 적지 않고 재사용하고 싶을 때, 아래와 같이 파라미터를 활용한다

여기서는 구멍(파라미터) 자리에 a를 넣어주었다

function plus(a) {
 2 + a
}

// plus(3)은 2+3 = 5를 반환한다
// plus(100)은 2+100 = 102를 반환한다

 

파라미터를 여러 개 넣는 것도 가능하다

function plus(a, b) {
 a + b
}

// plus(5, 10)은 5+10 = 15를 반환한다

 

** 수학에서 함수 공부할 때를 떠올리면 쉽다.

f(x) = x + 1 일 때 
f(3) = 4
f(5) = 6

 

 

---

문제

 

문제

HTML이 다음과 같을 때, 아래 조건에 맞는 알림창이 나오도록 설정해보자

1. 버튼1을 누르면 '아이디를 입력하세요' 알림창 등장
2. 버튼2를 누르면 '비밀번호를 입력하세요' 알림창 등장

<div class="alert-box" id="alert">
        <p>아이디를 입력하세요</p>
        <button onclick="알림창열기('none')">닫기</button>
</div>
<div class="alert-box" id="alert">
        <p>비밀번호를 입력하세요</p>
        <button onclick="알림창열기('none')">닫기</button>
</div>

<button onclick="알림창열기('block');">버튼1</button>
<button onclick="알림창열기('block');">버튼2</button>

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

 

풀이 1)

- id, pw창에 각각의 아이디를 부여하여 한 함수 안에 두 줄을 작성한다

- 한 함수 내에 두 개의 파라미터를 부여하여 각각 실행한다

<div class="alert-box" id="alert-id">
        <p>아이디를 입력하세요</p>
        <button onclick="handleAlert('none')">닫기</button>
</div>
<div class="alert-box" id="alert-pw">
        <p>비밀번호를 입력하세요</p>
        <button onclick="handleAlert('none')">닫기</button>
</div>

<button onclick="handleAlert('block');">버튼1</button>
<button onclick="handleAlert('block');">버튼2</button>

<script>
        function handleAlert(event1, event2) {
            document.getElementById('alert-id').style.display = event1;
            document.getElementById('alert-pw').style.display = event2;
        }
</script>

 

 

풀이 2) ** 최종 완성

저렇게 해도 작동은 되지만, 어떻게 해야 간결하게 쓸 수 있을까 고민을 했다.

그러다 id, pw 창을 분리하지 않고, 버튼 클릭에 따른 텍스트 변경 + display 변경을 한 함수에 넣었더니

코드를 훨씬 간결하게 작성할 수 있었다. 

p 태그의 id도 가능하면 상위 id인 alert에 따라 alert-text 라고 직관적으로 지으려고 했다.

함수명도 강사님께서 제안하신 이름보다는 handleAlert 라는 동사형으로 지어서 그 성격을 파악하기 쉽도록 했다

(클린코드의 효과인가 ..!ㅋㅋㅋ 최근 네이밍에 더욱 신중해졌다)

 

- 버튼1, 2를 누르면 각각 제목만 바꾼 알림창을 띄운다
   → alert-box 전체 숨겨두기

   → handleAlert 함수 하나에 인수 2개(display, innerHTML)를 주고 꺼내서 쓰기

<div class="alert-box" id="alert">
   <p id="alert-text"></p>
   <button onclick="handleAlert('none')">닫기</button>
</div>
<button onclick="handleAlert('block','아이디를 입력하세요');">버튼1</button>
<button onclick="handleAlert('block','비밀번호를 입력하세요');">버튼2</button>

<script>
   function handleAlert(event1, event2) {
       document.getElementById('alert').style.display = event1;
       document.getElementById('alert-text').innerHTML = event2;
   }
</script>

 

---

해답

강사님이 공개하신 정답은 아래와 같다.

 

직관적이기는 하지만 내가 생각했던 것보다는 길어서, 오래 고민한 보람이 있구나 느꼈다.

혼자 더 고민하고 성장한 기분!

<div class="alert-box" id="alert">
   <p id="title">알림창</p>
   <button onclick="알림창열기('none')">닫기</button>
</div>
<button onclick="아이디알림창();">버튼1</button>
<button onclick="비밀번호알림창();">버튼2</button>

<script>
   function 아이디알림창() {
       document.getElementById('alert').style.display = 'block';
       document.getElementById('title').innerHTML = '아이디를 입력하세요';
   }
   function 비밀번호알림창() {
       document.getElementById('alert').style.display = 'block';
       document.getElementById('title').innerHTML = '비밀번호를 입력하세요';
   }
   function 알림창열기(구멍) {
       document.getElementById('alert').style.display = 구멍;
   }
</script>

 

 

 

 

---

TIL 끝!