[혼공스] 4주차_함수 알아보기

혼공스 커리큘럼

---

chapter 함수

01. 함수의 기본 형태

함수를 사용하는 것을 함수 호출이라고 하고, 함수 괄호 내부의 여러 가지 자료들을 매개변수라고 부릅니다. 그리고 함수를 호출해서 최종적으로 나오는 결과를 리턴값이라고 부릅니다.

함수는 어떤 형태로든 사용해도 괜찮습니다. (코드를 실행하는데 문제가 없다면..)

 

익명 함수

함수는 코드의 집합을 나타내는 자료형이며 기본형은 다음과 같습니다.

function() {}

함수의 자료형은 function이며 함수를 출력하면 f 함수이름() {}라고 출력됩니다.

이름이 붙어있지 않은 함수는 익명 함수라고 표현하고, 이름이 붙어있는 함수를 선언적 함수라고 합니다.

 

함수를 사용하면 좋은 점

• 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있습니다.
• 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아집니다.
• 기능별(함수별)로 수정이 가능하므로 유지보수가 쉬웁니다.

 

선언적 함수

이름이 있는 형태로 생성한 함수를 선언적 함수라고 하며 이 함수를 많이 사용합니다.

function 함수() {

}

 

조금의 차이는 있지만 선언적 함수는 다음의 코드와 같은 기능을 수행합니다.

let 함수 = function() {};

 

매개변수와 리턴값

함수를 호출할 때 괄호 안에 적는 것을 매개변수라 하고, 함수의 최종 결과를 리턴값이라고 합니다.

매개변수와 리턴값을 갖는 함수는 다음과 같습니다.

function 함수(매개변수, 매개변수, 매개변수) {
    문장
    문장
    return 리턴값
}

매개변수와 리턴값은 필요한 경우에만 사용합니다.

 

나머지 매개변수

호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 부릅니다.

가변 매개변수 함수를 구현할 때는 나머지 매개변수라는 문법 형태를 사용합니다.

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

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

 

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

나머지 매개변수는 이름 그대로 나머지입니다. 일반적인 매개변수와 조합해서 사용할 수 있습니다.

function 함수 이름(매개변수, 매개변수, ...나머지 매개변수) {}

 

전개 연산자

전개 연산자는 배열을 전개해서 함수의 매개변수로 전달해 줍니다.

함수 이름(...배열)

 

기본 매개변수

항상 같은 매개변수를 여러 번 반복해서 입력해야 하는 경우 매개변수에 기본값을 지정하는 기본 매개변수를 사용합니다.

함수 이름(매개변수, 매개변수 = 기본값, 매개변수 = 기본값)

 

확인 문제

1. A부터 B까지 범위를 지정했을 때 범위 안의 숫자를 모두 곱하는 함수를 만들어보세요.

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

 

 

2. 다음 과정을 따라 최댓값을 찾는 max() 함수를 만들어보세요.

    - 매개변수로 max([1, 2, 3, 4])와 같은 배열을 받는 max() 함수를 만들어보세요.

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

 

    - 매개변수로 max(1, 2, 3, 4)와 같이 숫자를 받는 max() 함수를 만들어보세요.

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

 

    - max([1, 2, 3, 4]) 형태와 max(1, 2, 3, 4) 형태를 모두 입력할 수 있는 max() 함수를 만들어보세요.

<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 i of items) {
            if (output < i) {
                output = i
            }
        }
        return output
    }
    
    console.log(`max(배열): ${max([1, 2, 3, 4])}`)
    console.log(`max(숫자, ...): ${max([1, 2, 3, 4])}`)
</script>

 

 

02. 함수 고급

콜백 함수 

자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있습니다.

이렇게 매개변수로 전달하는 함수를 콜백 함수라고 합니다.

 

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

콜백 함수를 활용하는 가장 기본적인 함수는 forEach() 메소드입니다.

forEach() 메소드는 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출합니다.

 

배열이 갖고 있는 메소드 중에서 콜백 함수를 활용하는 메소드는 다음과 같은 형태의 콜백 함수를 사용합니다.

function(value, index, array)

 

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

map() 메소드도 배열이 갖고 있는 함수입니다.

map() 메소드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수입니다.

 

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

filter() 메소드도 배열이 갖고 있는 함수입니다.

filter() 메소드는 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수입니다.

 

화살표 함수

화살표 함수는 단순한 형태의 콜백 함수를 쉽게 입력하는 함수 생성 방법입니다.

(매개변수) => {

}

 

타이머 함수

타이머 함수는 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출합니다.

함수 이름	설명
setTimeout(함수, 시간)	특정 시간 후에 함수를 한 번 호출합니다.
setInterval(함수, 시간)	특정 시간마다 함수를 호출합니다.
clearTimeout(타이머 ID)	setTimeout() 함수로 서정한 타이머를 제거합니다.
clearInterval(타이머 ID)	setInterval() 함수로 설정한 타이머를 제거합니다.

 

 

확인 문제

1. filter 함수의 콜백 함수 부분을 채워서 홀수만 추출, 100 이하의 수만 추출, 5로 나눈 나머지가 0인 수만 추출해 주세요. 그리고 코드의 실행 결과를 적어보세요.

<script>
    let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]
    
    numbers = numbers.filter((x) => x % 2 === 1)
    numbers = numbers.filter((x) => x % x <= 100)
    numbers = numbers.filter((x) => x % 5 === 0)
    
    console.log(numbers)
</script>

 

 

선택 미션

2. 이전에 반복문 부분에서 살펴보았던 다음과 같은 코드를 배열의 forEach 메소드를 사용하는 형태로 변경해 주세요.

<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>

첫 번째 forEach() 메소드는 인덱스를 매개변수로 받아들이고 콘솔에 인덱스를 출력합니다.

두 번째 forEach() 메소드는 요소를 매개변수로 받아들이고 요소를 콘솔에 출력합니다. 

 

기본 미션

기본 미션

2020년은 윤년입니다~