[ 혼공스 ] 4주차 : 함수

 

Chap 5 함수

1. 함수의 기본 형태

• 함수 호출: 함수를 사용하는 것
• 매개변수: 함수 호출 시 괄호 내부에 넣는 자료
• 리턴값: 함수를 호출해서 최종적으로 나오는 결과

1) 익명 함수

• 함수는 코드의 집합을 나타내는 자료형이며, 기본 형태는 다음과 같다

• 함수를 코드의 집합이라고 말하는 이유는 중괄호 {. . .} 내부에 코드를 넣기 때문이다.
• 함수를 사용하면 좋은 점!
  • 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있다.
  • 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아짐
  • 기증별(함수별)로 수정이 가능하므로 유지보수가 쉽다.

익명 함수 선언하기 // 5-1-1.html

<script>     // 변수를 생성합니다.     const 함수 = function() {         console.log('함수 내부의 코드입니다 ... 1')         console.log('함수 내부의 코드입니다 ... 2')         console.log('함수 내부의 코드입니다 ... 3')         console.log('')     }     // 함수를 호출합니다.     함수()     함수()     // 출력합니다.     console.log(typeof 함수)     console.log(함수) </script>

함수 내부의 코드입니다 ... 1 함수 내부의 코드입니다 ... 2 함수 내부의 코드입니다 ... 3     함수 내부의 코드입니다 ... 1 함수 내부의 코드입니다 ... 2 함수 내부의 코드입니다 ... 3   function ƒ  ()  {     console.log('함수 내부의 코드입니다 ... 1')     console.log('함수 내부의 코드입니다 ... 2')     console.log('함수 내부의 코드입니다 ... 3')     console.log('') }

• 함수:  코드의 집합
• 함수를 실행하면 여러 코드를 한 번에 묶어서 실행할 수 있음
• 필요할 때마다 호출하여 반복적으로 사용할 수도 있음
• 함수의 자료형: function
• 현재 코드에서 함수를 출력하면 f ( ) { }라고 출력됨
• 익명 함수(anonymous function) : 이름이 붙어있지 않은 함수

 

2) 선언적 함수

• 선언적 함수: 이름이 있는 함수

선언적 함수 선언하기 5-1-2.html

<script>     // 함수를 생성합니다.     function 함수 () {         console.log('함수 내부의 코드입니다 ... 1')         console.log('함수 내부의 코드입니다 ... 2')         console.log('함수 내부의 코드입니다 ... 3')         console.log('')     }     // 함수를 호출합니다.     함수()     함수()     // 출력합니다.     console.log(typeof 함수)     console.log(함수) </script>

• 실행 결과는 앞에서 살펴보았던 익명 함수와 큰 차이가 없다

 

 

3) 매개변수와 리턴값

• 매개변수: 함수를 호출할 때 괄호 안에 적는 것
• prompt() 함수 사용 시 매개변수로 message를 넣어야 함.
• prompt() 함수의 최종 결과는 문자열로 나옴
• 리턴값: 함수의 최종 결과

• 매개변수와 리턴값을 갖는 함수를 만드는 방법

• input 매개변수
• output 리턴값
• 리턴값은 함수 내부에 return 키워드를 입력하고 뒤에 값을 넣어서 생성

기본 형태의 함수 만들기 // 5-1-3.html

<script>     // 함수를 선언합니다.     function f(x) {         return x*x     }     // 함수를 호출합니다.     console.log(f(3)) </script>

9

4) 기본적인 함수 예제

(1) 윤년을 확인하는 함수 만들기

• 윤년의 특징
  • 4로 나누어 떨어지는 해는 윤년이다.
  • 100으로 나누어 떨어지는 해는 윤년이 아니다.
  • 400으로 나누어 떨어지는 해는 윤년이다.

윤년인지 확인하는 함수 // 5-1-4.html

<script>     function isLeapYear(year) {         return (year %4 ===0) && (year%100 !==0) || (year%400 ===0)     }     console.log(`2020년은 윤년일까? === ${isLeapYear(2020)}`)     console.log(`2010년은 윤년일까? === ${isLeapYear(2010)}`)     console.log(`2000년은 윤년일까? === ${isLeapYear(2000)}`)     console.log(`1900년은 윤년일까? === ${isLeapYear(1900)}`) </script>

(2) A부터 B까지 더하는 함수 만들기

a부터 b까지 더하는 함수 // 5-1-5.html

<script>     function sumAll(a,b) {         let output = 0         for (let i =a; i<=b; i++) {             output +=1         }         return output     }     console.log(`1부터 100까지의 합: ${sumAll(1, 100)}`)     console.log(`1부터 500까지의 합: ${sumAll(1, 500)}`) </script>

 

(3) 최솟값 구하는 함수 만들기

최솟값을 구하는 함수 // 5-1-6.html

<script>     function min(array) {         let output = array[0]         for (const item of array) {             // 현재 output보다 더 작은 item이 있다면             if (output > item) {                 // output의 값을 item으로 변경                 output = item             }         }         return output     }     const testArray = [52, 273, 32, 103, 275, 24,57]     console.log(`${testArray} 중에서`)     console.log(`최솟값 = ${min(testArray)}`) </script>

5) 나머지 매개변수

• 가변 매개변수 함수 : 호출할 때 매개변수의 개수가 고정적이지 않은 함수
• 가변 매개변수 함수를 구현할 때 나머지 매개변수(rest parameter)라는 특이한 형태의 문법을 사용
• 나머지 매개변수의 기본적인 사용 방법은 다음과 같다

• 함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어온다.

나머지 매개변수를 사용한 배열 만들기 // 5-1-7.html

<script>     function sample(...items) {         console.log(items)     }     sample(1,2)     sample(1,2,3)     sample(1,2,3,4) </script>

나머지 매개변수를 사용한 min()  함수

<script>     //나머지 매개변수를 사용한 함수 만들기     function min(...items) {         // 매개변수 items는 배열처럼 사용합니다.         let output = items[0]         for (const item of items) {             if (output > item) {                 output = item             }         }         return output     }     // 함수 호출하기     console.log('min(52,273, 32, 103, 275, 24, 57)')     console.log(`= ${min(52,273, 32, 103, 275, 24, 57)}`) </script>

(1) 나머지 매개변수와 일반 매개변수 조합하기

• 나머지 매개변수는 이름 그대로 나머지다.
• 다음 패턴과 같이 일반적인 매개변수와 조합해서 사용할 수 있음

나머지 매개변수와 일반 매개변수를 갖는 함수 // 5-1-9.html

<script>     function sample(a,b, ...c) {         console.log(a,b,c)     }     sample(1,2)     sample(1,2,3)     sample(1,2,3,4) </script>

• 함수를 호출할 때 매개변수 a,b가 먼저 들어가고, 남은 것들은 모두 c에 배열 형태로 들어간다.

 

1. 지금까지 살펴보았던 내용을 종합해서 다음 함수를 구현해보자.
   • min(배열) 형태로 매개변수에 배열을 넣으면 배열 내부에서 최솟값을 찾아주는 함수
   • min(숫자, 숫자, ...) 형태로 매개변수를 넣으면 숫자들 중에서 최솟값을 찾아주는 함수

• 위를 구현하려면 매개변수로 들어온 자료형이 배열인지 숫자인지 확인할 수 있어야 함
• 숫자 자료형은 typeof 연산자를 사용해서 쉽게 확인할 수 있다.
• 배열에 typeof 연산자를 사용하면 object(객체)라는 결과가 나온다.

 

• 간단한 예제에서는 typeof(배열) == 'object'와 같은 형태로 배열인지 확인할 수 있지만
• 정확하게 배열인지 확인하려면 Array.isArray() 메소드를 활용해야한다.

매개변수의 자료형에 따라 다르게 작동하는 min() 함수 // 5-1-10.html

<script>     function min(first, ...rests) {         // 변수 선언하기         let output         let items                 // 매개변수의 자료형에 따라 조건 분기하기         if (Array.isArray(first)) {             output = first[0]             items = first         } else if (typeof(first) === 'number') {             output = first             items = rests         }         // 이전 절에서 살펴보았던 최솟값 구하는 공식         for (const item of items) {             if (output > item) {                 output = item             }         }         return output     }     console.log(`min(배열): ${min([52,273,32,103,275,24,57])}`)     console.log(`min(숫자, ...): ${min([52,273,32,103,275,24,57])}`) </script>

 

(2) 전개 연산자 (spread operator)

• 배열을 전개해서 함수의 매개변수로 전달해주는 연산자
• 전개 연산자는 다음과 같은 배열 앞에 마침표 3개(...)를 붙이는 형태로 사용

전개 연산자의 활용 // 5-1-11.html

<script>     // 단순하게 매개변수를 모두 출력하는 함수     function sample(...items) {         console.log(items)     }     // 전개 연산자 사용 여부 비교하기     const array = [1,2,3,4]     console.log('# 전개 연산자를 사용하지 않은 경우')     sample(array)     console.log('# 전개 연산자를 사용한 경우')     sample(...array) </script>

• 전개 연산자를 사용하지 않은 경우에는 배열이 매개변수로 들어옴
• 전개 연산자를 사용한 경우에는 순자가 하나하나 전개되어 매개변수로 들어

6) 기본 매개변수

• 함수의 매개변수로 항상 비슷한 값을 입력하는 경우가 있음
• 항상 같은 매개변수를 여러 번 반복해서 입력하는 것이 귀찮게 느껴질 수 있다
• 이런 경우 매개변수에 기본값을 지정하는 기본 매개변수를 사용

• 매개변수는 왼쪽부터 입력하므로 다음과 같이 함수를 작성하면 기본 매개변수의 의미가 없음.
• b에 값을 전달하기 위해서는 a에 값을 채워야하기 때문이다.

• 매개변수로 시급과 시간을 입력받아 급여를 계산하는 함수를 만들어보자!
  • 함수이름: earnings
  • 매개변수: name(이름), wage(시급), hours(시간)
  • 함수의 역할: 이름, 시급, 시간을 출력하고, 시급과 시간을 곱한 최종 급여 출력
• wage와 hours를 입력하지 않고 실행하면 wage에 최저 임금이 들어가고,
  hours에 법정근로시간 1주일 40시간이 기본 매개변수로 입력되게 만들어보자.

기본 매개변수의 활용 // 5-1-12.html

<script>     function earnings (name, wage=8590, hours=40) {         console.log(`# ${name} 님의 급여 정보`)         console.log(`- 시급: ${wage}원`)         console.log(`- 근무 시간: ${hours}시간`)         console.log(`- 급여: ${wage * hours}}원`)         console.log('')     }     // 최저임금으로 최대한 일하는 경우     earnings('구름')     // 시급 1만원으로 최대한 일하는 경우     earnings('별', 10000)     //시급 1만원으로 52시간 일하는 경우     earnings('인성', 10000, 52) </script>

기본 매개변수를 추가한 윤년 함수 // 5-1-13.html

<script>     function isLeapYear(year=new Date().getFullYear()) {         console.log(`매개변수 year: ${year}`)         return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)     }     console.log(`올해는 윤년일까? ===${isLeapYear()}`) </script>

 

[ 확인문제 ]

<script>       const multiplyAll = function (a,b) {         let output = 0         for (let i = 1; i <= 100; i++) {           output += i         }         return output       }       console.log(multiplyAll(1,2))       console.log(multiplyAll(1,3))     </script>

<script>       const max = function (array) {         let output = array[0]         for (const data of array) {           if (output < data) {             output = data           }         }         return output       }       console.log(max([1,2,3,4]))     </script>

<script>       const max = function (...array) {         let output = array[0]         for (const data of array) {           if (output < data) {             output = data           }         }         return output       }       console.log(max(1,2,3,4))     </script>

<script>       const max = function (first, ...rests) {         let output         let items         if (Array.isArray(first)) {           output = first[0]           items = first         } else if (typeof(first) === 'number') {           output = first           items = rests         }         for (const data of items) {           if (output < data) {             output = data           }         }         return output       }       console.log(`max(배열): ${max([1,2,3,4])}`)       console.log(`max(숫자, ...): ${max(1,2,3,4)}`)     </script>

 

2. 함수 고급

1) 콜백 함수(callback)

• 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다.
• 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다.

콜백 함수(1): 선언적 함수 사용하기 // 5-2-1.html

<script>       // 함수를 선언합니다.       function callThreeTimes (callback) {         for (let i = 0; i < 3; i++) {           callback(i)         }       }       function print (i) {         console.log(`${i}번째 함수 호출`)       }       // 함수를 호출합니다.       callThreeTimes(print)     </script>

콜백 함수(2): 익명 함수 사용하기 // 5-2-2.html

<script>       // 함수를 선언합니다.       function callThreeTimes (callback) {         for (let i = 0; i < 3; i++) {           callback(i)         }       }       // 함수를 호출합니다.       callThreeTimes(function (i) {         console.log(`${i}번째 함수 호출`)       })     </script>

(1) 콜백 함수를 활용하는 함수: forEach()

• 콜백 함수를 활용하는 가장 기본적인 함수
• 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출함

배열의 forEach() 메소드 // 5-2-3.html

<script>       const numbers = [273, 52, 103, 32, 57]       numbers.forEach(function (value, index, array) {         console.log(`${index}번째 요소 : ${value}`)       })     </script>

(2) 콜백 함수를 활용하는 함수: map()

• map() : 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수

배열의 map() 메소드 // 5-2-4.html

<script>       // 배열을 선언합니다.       let numbers = [273, 52, 103, 32, 57]       // 배열의 모든 값을 제곱합니다.       numbers = numbers.map(function (value, index, array) {         return value * value       })       // 출력합니다.       numbers.forEach(console.log)     </script>

(3) 콜백 함수를 활용하는 함수: filter()

• 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

배열의 filter() 메소드 // 5-2-5.html

<script>       const numbers = [0, 1, 2, 3, 4, 5]       const evenNumbers = numbers.filter(function (value) {         return value % 2 === 0       })       console.log(`원래 배열: ${numbers}`)       console.log(`짝수만 추출: ${evenNumbers}`)     </script>

2) 화살표 함수

• map(), filter() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하고자 할때
• function 키워드 대신 화살표 (=>)를 사용하며, 다음과 같은 형태로 생성하는 간단한 함수

• 내부에서 this 키워드가 지칭하는 대상이 다르다는 등의 미세한 차이가 있음

배열의 메소드와 화살표 함수 // 5-2-6.html

<script>       // 배열을 선언합니다.       let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]       // 배열의 메소드를 연속적으로 사용합니다.       numbers         .filter((value) => value % 2 === 0)         .map((value) => value * value)         .forEach((value) => {           console.log(value)         })     </script>

• 메소드 체이닝(method chaining)
  • 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것

3) 타이머 함수

• 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수

타이머 걸기 // 5-2-7.html

<script>       setTimeout(() => {         console.log(`1초 후에 실행됩니다.`)       }, 1 * 1000)       let count = 0       setInterval(() => {         console.log(`1초마다 실행됩니다.(${count}번째)`)         count++       }, 1 * 1000)     </script>

타이머 취소하기 // 5-2-8.html

<script>       let id       let count = 0       id = setInterval(() => {         console.log(`1초마다 실행됩니다(${count}번째)`)         count++       }, 1 * 1000)       setTimeout(() => {         console.log('타이머를 종료합니다.')         clearInterval(id)       }, 5 * 1000)     </script>

 

 

[ 확인문제 ]

<script>       // 변수를 선언합니다.       let numbers = [273, 52, 103, 32, 57, 24, 76]       // 처리합니다.       // (1) 홀수만 추출       numbers = numbers.filter((x) => x % 2 === 1)       // (2) 100 이하의 수만 추출       numbers = numbers.filter((x) => x <= 100)       // (3) 5로 나눈 나머지가 0인 수만 추출       numbers = numbers.filter((x) => x % 5 === 0)       // 출력합니다.       console.log(numbers)     </script>

(0) [ ]

 

<script>       const array = ['사과', '배', '귤', '바나나']       console.log('# for in 반복문')       array.forEach((item, i) => {         console.log(i)       })       console.log('# for of 반복문')       array.forEach((item, i) => {         console.log(item)       })     </script>