JavaScript 입문 10일차

어제에 이어 함수 2번째 이다. 함수는 제대로 이해하고 사용해야하기에 시간 할애를 좀 더 하고 있다. 저자의 언급으로도 반복문과 함수 부분이 책에서 가장 난이도 있는 부분이라니까 이 부분만 제대로 이해하고 넘긴다면 다른 부분은 술술 넘길 수 있을꺼 같다.

21/05/20 JavaScript 공부정리

일단 선언적 함수의 책의 문제들을 실험삼아 몇개 풀어보았다.

1. 선언적 함수 예제

• a 부터 b 까지의 합을 구하는 함수

<script>
  function sum(a,b) {
    let output = 0
    for (let i = a; i <= b; i++) [
      output += i
    }
  return output
  }

  alert(`5 부터 29 까지의 합은 ${sum(5,29)} 이다.`)
</script>

위의 코드를 복사하여 콘솔창에 넣어보면 경고창으로 5 부터 29 까지의 합을 나타낸다.
'sum 함수' 를 선언하여 'sum(a,b)' 의 형태로 a 와 b 에 원하는 범위의 값만 넣어준다면 그 값을 계산해주는 함수가 만들어진 것이다.

• 최소값을 구하는 함수

<script>
    function min(array) {
        let output = array[0]
        //output 의 초기값을 배열의 맨 앞의 값으로 정한다.
        //여기선 '11' 이 초기값이 될 것이다. (아래 배열 참조)
        
        for (const v of array) {
            if(output > v) {
                output = v
            }
        //원리는 초기값 11 과 배열의 원소들을 순서대로 비교한다.
        //첫 연산은 11 > 243 이다. if 안의 값이 false 가 되므로 output = v 가 실행되지 않는다.
        //뒤에 11 > 4 부분에서 true 값을 얻어 output은 4로 변한다.
        //이러한 과정을 통해 최소값을 도출한다.
        }
        return output
    }
const a = [11, 243, 45, 356, 34019, 33, 4, 5, 9]
alert(`배열의 최소값은 ${min(a)} 이다.`)
</script>

처음 문제를 보았을 때 아는 지식을 동원해서는 풀기에 많이 힘들었다. 일부 해설을 참조할 수 밖에 없었다. 일단 여기서는 최소값을 구하는 함수 'min()' 을 선언 하였다. 위의 코드 부분에 주석으로 설명을 대부분 달아놓았지만 간단히 다시 설명하자면 최소값을 구할 수들을 배열로 묶고 만들어진 min() 함수의 본문은 배열 안의 값들을 순서대로 비교하며 최소값을 구하는 코드이다. 위의 코드를 복사해서 실행하면 '4' 라는 값을 경고창으로 띄우는 것을 확인할 수 있다.

2. 나머지 매개변수
이는 위와 같이 최소값을 구하는 함수를 만들 때 매개변수에 들어가는 배열은 고정적이지 않다. 배열 안의 요소가 9개 이거나 5개 이거나 매 상황마다 달라진다.

min([11, 243, 45, 356, 34019, 33, 4, 5, 9])
//위의 예제처럼 요소가 9개인 배열이거나

min([34, 12, 64, 32, 11])
//위와 같이 요소가 5개 뿐인 배열일수도 있다.

이렇게 매개변수가 고정적이지 않은 함수를 가변 매개변수 함수 라고 한다.
이러한 함수를 구현할 때 책에서 언급하길 자바스크립트는 나머지 매개변수 라는 특이한 문법을 사용한다. 기본 형태는 아래와 같다.

function 함수명(...나머지 매개변수) {}

위의 형태만 봐선 이해가 잘 안된다. 나 역시 책에서 형태만 봤을 때 이해가 되지 않았지만
예제를 보면서 이해를 하였다. 예재와 함께 복습 겸 살펴보겠다.

<script>
    function 나머지(...i) {
        console.log(i)
    }

    나머지(11,23,54,66,78,43)
</script>

위와 같이 코드를 넣고 콘솔창을 확인해보면

>Array(6)0: 
0. 11: 
1. 32: 
2. 54
3. 66
4. 78
5. 43
length: 6
>__proto__: Array(0)
//콘솔창에서 볼 수 있는 결과물이다.

위의 '함수명' 뒤의 '(...i)' 를 통해서 나머지 함수에 들어간 숫자가 배열로 들어간 것을 확인할 수 있다. 책에서는 이를 이용하여 최소값을 구하는 코드를 다시 만드는 예제가 있다. '나머지 매개변수' 를 활용해서 최소값을 구하는 함수를 다시 만들어 보겠다.

<script>
    function min(...i) {
  	//min(array)를 (...i)로 변환했다. 'i' 를 아무 문자로 바꿔도 상관없다.
        let output = i[0]
        //output 의 초기값을 배열의 맨 앞의 값으로 정하는 것은 값다.
        //단지 이전의 array[0]이 i[0] 으로 변환된 것 뿐이다.
        
        for (const v of i) {
            if(output > v) {
                output = v
            }
        //기본적인 틀은 똑같다. 역시 array 가 i로 바뀐 것 뿐이다.
        }
        return output
    }
alert(`1123, 243, 545, 234, 3443, 534, 233 중 최소값은 ${min(1123, 243, 545, 234, 3443, 534, 233)} 이다.`)
</script>

위와 같은 코드로 다시 만들어보았다. 이전과 달리 min 안에 따로 배열을 상수로 선언하여 집어넣거나 직접 배열로 넣지않고 써넣어도 배열로 인식되어 연산을 수행 한다.

3. 기본 매개변수

• 개념
  간단히 말해서 매개변수에 기본값을 주는 것이다. 책에서는 어제 벨로그에 정리한 예제인 '윤년 구분하기' 를 이용하여 설명을 한다. 아래가 어제 만든 윤년을 구분하는 코드이다.

<script>
 const x = Number(prompt('년도를 입력해주세요',''))

  function 윤년(year) {
  return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 ===0)
  }

  alert(`${x}는 윤년일까? === ${윤년(x)}`)
</script>

이것이 어제만든 코드이다. 여기서 만약에 사용자가 prompt 로 나타난 입력창에 아무것도 입력하지 않았을 경우 문제가 생길 수 있다. 그걸 방지하기 위해서 아무것도 입력되지 않을 때에 들어갈 기본값을 설정해주는 것이다. 위의 코드와 다르게 기본 매개변수가 들어간 윤년을 구하는 코드를 만들어보겠다.

<script>
    const 윤년 = function (연도 = new Date().getFullYear()) {
        alert(`윤년을 알아볼 년도는 ${연도}년 입니다.`)
      //기본 매개변수가 제대로 들어갔는지 알아보기 위해 넣었다.
        return (연도 % 4 ===0) && (연도 % 100 !== 0) || (연도 % 400 ===0)
    }

    alert(`윤년인가요? === ${윤년()}`)
    //기본 매개변수인 현재년도의 윤년을 판단한다.
</script>

위는 기본 매개변수를 활용하여 새롭게 만든 윤년을 알아보는 코드이다. 기본 매개변수로 현재년도를 자동으로 들어가게 되어있다. 아래 alert 안의 '윤년()' 부분에 원하는 년도를 넣으면 자동으로 계산 을 한다. '윤년()' 처럼 아무것도 입력하지 않는다면 자동으로 현재년도를 이용하여 계산한다.