4. 함수

4. 함수 (함수를 정의하여 코드의 재사용성을 높일 수 있다.)

4-1. 함수 정의하기

 ① 함수 선언문(function declaration): function 키워드를 사용하여 함수를 선언하고 필요할 때 호출할 수 있다.

 ② 함수 표현식(function expression): function 키워드를 사용하여 변수에 함수를 할당할 수 있다.

 

4-2. 함수 호출하기

 ① 함수 호출하기: 함수명() 이렇게 사용하여 호출한다.

 

4-3. 함수 매개변수와 반환값

 ① 함수 매개변수: function 함수명(매개변수), 함수를 호출할 때는 매개변수에 값을 전달한다.

 ② 함수 반환값: return 으로 반환값을 지정한다.

 

4-4. 함수 스코프

 ① 전역 스코프(gloval scope): 전역 스코프에서 변수를 선언하고 함수에서 변수를 참조, 선언된 변수는 어디에서나 참조 가능

 ② 지역 스코프(local scope):  지역 스코프에서 변수를 선언하고 변수를 참조, 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조 가능

 ③블록 스코프(block scope): 조건문 내에서 변수를 선언하면 조건문 내에서 선언된 변수는 해당 블록 내에서만 참조

 

4-5. 화살표 함수

 ① 기본적인 화살표 함수: 화살표 함수를 사용하여 함수를 선언 가능 

 ② 한 줄로 된 화살표 함수:  함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있다.

 ③ 매개변수가 하나인 화살표 함수:  매개변수가 하나일 경우에 괄호를 생략할 수 있다.

---

확인 문제 풀이

@ 5-1 함수의 기본 형태

1.  A부터 B까지 범위를 지정했을 때 범위 안의 숫자를 모두 곱하는 함수 작성

<script>
        const multiplyAll = function(a,b) {
            let num = 1 // 초기값 설정
            for (let i = a; i <= b; i++) {  // i를 a로 초기값을 설정 i값이 b와 같아지면 1씩 증가 종료
                num *= i
            }
            return num      // for문을 통해 나온 값을 num에 반환
        }
        
        console.log(multiplyAll(1,2))
        console.log(multiplyAll(1,3))
    </script>

 

2. max()함수를 작성

 - 1. 매개변수로 max([1, 2, 3, 4])와 같은 배열을 받는 max()함수를 작성

<script>
        const max = function (array) {
            let output = array[0]
            for(const x of array) {	// 현재 output보다 더 작은 x가 있다면
                if ( output < x) {	// output의 값을 x로 변경
                    output = x
                }
            }
            return output
        }

        console.log(max([1,2,3,4]))
    </script>

 - 2. 매개변수로 max(1,2,3,4)와 같이 숫자를 받는 max() 함수를 작성

<script>
        const max = function (...array) {
            let output = array[0]
            for(const x of array) {
                if ( output < x) {
                    output = x
                }
            }
            return output
        }

        console.log(max(1,2,3,4))
    </script>

 - 3. max([1,2,3,4]) 형태와 max(1,2,3,4)형태를 모두 입력할 수 있는 max() 함수를 작성

<script>
        const max = function (num1, ...rest) {
            let output
            let X

            if (Array.isArray(num1)) {
                output = num1[0]
                x = num1
            }else if (typeof(num1) ==='number') {
                output = num1
                x = rest
            }
            for (const a of x) {
                if(output < a) {
                    output = a
                }
            }
            return output

        }

        console.log(`max(배열): ${max([1,2,3,4])}`)
        console.log(`max(숫자, ...): ${max(1,2,3,4)}`)
            
    </script>

@ 5-2 함수 고급

1. filter 함수의 콜백 함수 부분을 채워서 ① 홀수만 추출, ② 100 이하의 수만 추출, ③ 5로 나눈 나머지가 0인 수만 추출하기

<script>
        // 변수를 선업합니다.
        let numbers = [273, 25, 75, 52, 103, 32, 57, 24 ,76]

        // 처리합니다.
        // 1. 홀수만 출력
        numbers = numbers.filter((a) => a % 2 === 1)    // 나머지가 1인 값을 ===으로 확인
        // 2. 100 이하의 숫자만 출력
        numbers = numbers.filter((a) => a <= 100)		//100보다 작거나 같은 값을 확인
        // 3. 5로 나눈 나머지가 0인 수만 추출
        numbers = numbers.filter((a) => a % 5 === 0)	// 나머지를 ===로 확인
        //출력합니다.
        console.log(numbers)
    </script>

 

2. forEach 메소드를 사용하는 형태로 변경하기

<script>
        const array = ['사과', '배', '귤', '바나나']

        console.log('# for in 반복문')
        for (const i in array) {
            console.log(i)
        }

        console.log('# for of 반복문')
        for (const i of array) {
            console.log(i)
        }
    </script>

위 코드를 변경

<script>
        const array = ['사과', '배', '귤', '바나나']
        
        console.log('# for in 반복문')
        array.forEach ((a, i) => {      // parameter의 i, 즉 저장된 번호를 가져온다.
            console.log(i)
        })

        console.log('# for of 반복문')
        array.forEach ((a, i) => {      // parameter의 a, 즉 문자를 가져온다.
            console.log(a)
        })
    </script>