JS 편 - 6일차

 

6일차

 

 

 

---

24. 함수 예고

• 함수(function)라고 하는 것에 떠오르는 이미지는 수납상자이다. 집에 살림이 많아지면 수납상자를 장만해서 정리 정돈 할 것이다.
• 마찬가지로 코드가 많아지면 그 코드를 잘 정리 정돈하기 위한 도구가 필요하다.
• 가장 먼저 생각할 수 있는 것은 아주 간단하며 강력한 도구가 함수이고, 그것보다 좀 더 큰 도구가 객체이다.

<input type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night') {
        target.style.backgroundColor = 'black';
        target.style.color = 'white'; 
        this.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';
        this.value = 'night';

        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
            alist[i].style.color = 'blue';
            i = i + 1;
        }
    }
">

• 만약 위와 같은 <input>태그를 극단적으로 생각하여 1억 개 작성한다고 상상을 해보자. 여기서 'powderblue'라는 부분을 다른 색으로 바꿔야 한다면 1억 개의 'powderblue'를 전부 바꿔야 한다. 물론 쉽지가 않다. 그리고 만약 하나를 복사하였더라도 만약 다른 사람이 본다면 완전히 중복된 코드라고 바로 알 수 있을까? 그건 어려울 것이다.
• 이처럼 코드의 양이 엄청나게 많아지고, 그로 인해 웹 페이지의 크기가 커지고, 인터넷을 통해 전송할 때 비용과 시간과 노력이 더 들어가게 된다. 
• 이러한 절망적인 상황에서 구원해주는 도구가 바로 함수이다. 
• 자세한 실습은 28장 함수의 활용에서 실습할 예정이며, 일단 이정도로만 이해하고 넘어가자. 

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=WpTdoEvmFxw

 

---

 

 

반응형

 

 

25. 함수

• 함수는 영어로 function이라 하고, 객체에서는 함수를 메서드라고 부르는 경우도 있다.
• 이번 장에서는 먼저 함수의 기본적인 문법을 배우고, 매개변수(parameter)와 인자(argument)를 배운 다음, return 키워드를 배우면 끝이 난다.
• 우선 함수의 기본적인 문법을 배워보자.
• 아래의 코드로 설명하겠다.

<h1>Function</h1>
<h2>Basic</h2>
<ul>
    <script>
        document.write('<li>1</li>');
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
        document.write('<li>3</li>');
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
    </script>
</ul>
<h2>Parameter & Argument</h2>
<h2>Return</h2>

• 위의 코드처럼 이러한 출력을 하는 코드를 작성하고 싶다고 가정하자. 그런데 보는 것과 같이 2-1, 2-2 부분을 반복한다. 보통 이러한 경우에는 반복문을 쓰지만, 위의 경우는 연속되지 않게 반복되어 사용하는 것이 어렵거나 불가능하다. 만약 위의 코드가 극단적으로 중복이 1억 번이며 연속적이지 않다면 반복문은 불가능하다.
• 이때 함수를 사용한다.
• 함수를 사용한 아래의 코드를 보자.

<ul>
    <script>
        function two(){
            document.write('<li>2-1</li>');
            document.write('<li>2-2</li>');    
        }
        document.write('<li>1</li>');
        two();
        document.write('<li>3</li>');
        two();
    </script>
</ul>

• 실행 결과는 같지만 내부적으로는 완전히 다른 메커니즘으로 구동한다.
• 웹 브라우저는 function two( )라는 코드를 보면 function과 중괄호를 보고 two라는 함수를 만들려고 하고, 그 함수의 내용은 중괄호 안의 내용임을 생각하고 기억한다.
• 그리고 two( );를 보면 웹 브라우저는 'two라는 함수를 실행하고 싶구나'라는 것을 알게 된다. 그래서 two 함수의 코드를 two( );가 위치하는 곳에 있는 것처럼 실행하게 된다.
• 이것이 바로 함수의 기본적인 문법이다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=IOuePUzLdnQ

 

---

 

 

 

 

26. 매개변수와 인자

• 함수를 자판기라고 보면 제품이 하나밖에 없는 자판기로, 언제나 똑같은 제품을 받을 수 있는 자판기이다.
• 만약 원하는 제품을 선택하면 그 제품에 해당하는 제품을 제공하는 자판기가 있다면 훨씬 더 효용이 있지 않을까?
• 이때 제품을 선택하는 것은 입력이라고 할 수 있고, 자판기가 그 입력에 대해 해당하는 제품을 제공하는 것을 출력이라고 할 수 있다.
• 특히 수학적으로 함수라고 하는 것은 입력과 출력의 문제라고 할 수 있다.
• 입력에 해당하는 것을 매개변수(parameter) 또는 인자(argument)라고 한다.
• 출력에 해당하는 것은 return과 관련이 있다.
• 먼저 처음 이야기 하였던 제품이 하나밖에 없는 자판기의 예를 보자.

<script>
    function onePlusOne(){
        document.write(1 + 1 + '<br>');
    }
    onePlusOne(); // 2
</script>

• 이처럼 onePlusOne( ) 함수는 언제나 똑같이 동작하는 함수이다.
• 다음은 원하는 제품을 제공하는 자판기의 간단한 예를 보자.

<script>
    function sum(left, right){
        document.write(left + right + '<br>');
    }
    sum(2, 3); // 5
    sum(3, 4); // 7
</script>

• 위의 코드에서 sum(2, 3);는 2, 3이라는 값의 인자(argument)를 받고 함수 안으로 변수를 매개하는 변수 즉, 매개변수(parameter)인 left, right가 이 값을 받게되고, 함수는 출력하게 된다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=MXf9UqMXuGM

 

---

 

27. 함수(return문)

• 이번 장은 함수에 관한 마지막 시간이다. 함수는 입력과 출력의 두 가지로 이루어져 있다고 하였다.
• 입력은 매개변수와 인자라는 것이며 출력은 return이라는 것과 관련이 있다.
• 먼저 return을 배우기 전에 표현식(expression)이라는 것이 무엇인지 알아보자.
• 1+1은 2이다. 그렇다면 1+1은 숫자 2에 대한 표현식이라고 할 수 있다. 2-1 역시 숫자 1에 대한 표현식이다. 1===1 역시 true에 대한 표현식이다.
• 함수도 마찬가지이다. sum( )이라는 함수를 실행하면 document.write(left + right + '<br>');이 실행되겠지만 이번에는 sum( )을 실행했을 때 2+3의 계산 결과인 5를 받도록 표현식을 만들려고 한다. 이를 위해서는 return을 알아야 한다.
• 만약 앞서 작성한 코드에서 sum( )을 실행한 결과의 색깔을 바꿔야 한다면 다음과 같이 수정할 수 있다.

<script>
    function onePlusOne(){
        document.write(1 + 1 + '<br>');
    }
    onePlusOne(); // 2

    function sum(left, right){
        document.write(left + right + '<br>');
    }
    function sumColorRed(left, right){
        document.write('<div style="color:red;">' + left + right + '</div>');
    }
    sum(2, 3); // 5
    sumColorRed(2, 3); // 5
    sum(3, 4); // 7
</script>

• 하지만 두 값만을 더하는 작업이 다양한 곳에서 사용된다면 이것은 필요에 따라 상당히 많은 함수를 만들어야 한다. 이럴 때 return을 사용할 수 있다.
• 아래의 코드를 보자.

<h2>Return</h2>
<script>
    function sum2(left, right){
        return left + right;
    }
    document.write(sum2(2, 3) + '<br>');
    document.write('<div style="color:red;">' + sum2(2, 3) + '</div>');
    document.write('<div style="font-size:3rem;">' + sum2(2, 3) + '</div>');
</script>

• 만약 위처럼 sum2( )를 실행한 결과값을 돌려준(return)다면, sum2(2, 3)은 숫자 5에 대한 표현식이 될 수 있다.
• 그리고 그 결과를 줄바꿈하거나 결과의 글자색을 빨간색으로 표현하거나, 폰트의 크기를 다르게 할 수 있을 것이다.
• 위의 결과는 5는 5인데 평범한 5와 붉은색 5, 커다란 5가 제각기 출력된다. 계산이라는 기능만을 sum2( ) 함수에 구현함으로써 원자화된 기능을 다양한 맥락에서 사용할 수 있는 자유가 생기게 된다.
• 이처럼 return을 사용함으로써 다양한 용도로 함수를 활용할 수 있다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=6MzCHO8M3Uc

 

---

 

28. 함수의 활용

• 이번 장에서는 night/day 버튼을 함수를 이용해 효율적으로 바꾸는 작업을 해보자.
• 이처럼 동작하는 내용은 똑같지만 코드를 효율적으로 만드는 것을 리팩터링이라고 한다. 함수는 리팩터링의 굉장히 중요한 수단 중 하나이다.
• 만약 우리가 만든 아래의 코드가 극단적으로 1억 개가 생긴다면 나쁜 일이 생기지 않을까?

<input type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night') {
        target.style.backgroundColor = 'black';
        target.style.color = 'white'; 
        this.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';
        this.value = 'night';

        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
            alist[i].style.color = 'blue';
            i = i + 1;
        }
    }
">

• 그래서 함수로 리팩터링하여 아래와 같은 코드를 작성할 수 있다.

<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>
    ...
    
    <input type="button" value="night" onclick="
        nightDayHandler(this);
    ">
    
    ...
</body>

• 여기서 주의해야 할 것은 원래의 코드의 onclick 이벤트 안에서 this는 이 이벤트가 소속된 태그를 가리키도록 약속되어있는데 nightDayHandler( ) 안의 코드에서 this라는 값은 더 이상 input 버튼이 아니고, 전역 객체를 갖게 된다.
• 그래서 함수 안에서 this 값이 input 버튼을 가리키도록 함수가 실행될 때 this를 인자로 받아 self라는 매개변수로 받는다.
• 이처럼 함수를 사용하게되면 만약 1억 개의 같은 <input> 태그가 있고 그것을 변경하더라도 함수의 내용만 바꾸면 모두 적용되는 효과를 얻을 수 있다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=WsPJ8FsoMcU

 

 

 

---

해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---