TIL. 12 JavaScript - 함수

Minjae Choi·2021년 5월 20일

JavaScript

목록 보기

4/20

🎈 함수란?

function(함수) 프로그래밍에서 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합이다.(리팩토링에서 아주 중요한 역할을 차지한다.)

   <script>function nightDayHandler(){}</script>
   
   // nightDayHandler라는 함수 선언이며, {}안에는 JavaScript가 들어간다.

argument(인자) 어떤 함수를 호출시에 전달하는 값이다.
parameter(매개변수) 전달된 인자를 받아들이는 변수이다.

   <script>
       function onePlusOne() {
           document.write(1+1+'<br>');
       }
       onePlusOne();
       function sum(left, right) {
           document.write(left+right+'<br>');
       }
       sum(2,3); // 5
       sum(3,4); // 7
   </script>
   
   // 함수로 전달하는 2, 3이라는 값을 argument라고 하며,
   // 값을 받아서 함수 안으로 매개해주는 left, right를 parameter라고 한다.

return 값을 반환하는 명령어이며, 리턴을 만난 함수는 값을 출력하고 끝난다. 함수의 가장 마지막에 들어가야 한다.

📋 실습

<head>
    <script>
        function nightDayHandler(self){
            var target = document.querySelector('body');
            if (self.value === 'night') {
                target.style.backgroundColor='black';
                target.style.color='white';
                self.value = 'day';
                var alist = document.querySelectorAll('a');
                var i = 0;
                while(i < alist.length) {
                    alist[i].style.color = 'powderblue';
                    i = i + 1;
                }
            } else {
                target.style.backgroundColor='white';
                target.style.color='black';
                self.value = 'night';
                var alist = document.querySelectorAll('a');
                var i = 0;
                while(i < alist.length) {
                    alist[i].style.color = 'blue';
                    i = i + 1;
                }
            }
        }
    </script>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <input type="button" value="night" onclick="
        nightDayHandler(this)
    ">
    <input type="button" value="night" onclick="
        nightDayHandler(this)
    "> 
</body>

nightDayHandler라는 함수 선언 후, 낮과 밤이 바뀌는 코드를 짜고 onclick에 긴 코드 대신 nightDayHandler라는 함수를 넣어 리팩토링한다.
기존에 있던 this는 함수로 가면서 self라는 매개변수를 정의하고 함수에는 nightDayHandler(self), onclick에는 nightDayHandler(this)로 입력한다.
함수를 사용함으로써 몇개의 버튼이 되었든 같은 이벤트 효과의 버튼을 쉽게 생성할 수 있다.

✔ 결과물

WEB

HTML

CSS

JavaScript

Minjae Choi

TIL

이전 포스트

TIL. 13 JavaScript - Object(객체)

다음 포스트

TIL. 12 JavaScript - 함수

JavaScript

🎈 함수란?

📋 실습

WEB

TIL. 13 JavaScript - Object(객체)

TIL. 11 JavaScript - 배열, 반복문

0개의 댓글