자바스크립트 함수의 기본 형태

자바스크립트 함수의 기본 형태

 

📌 함수

코드의 집합

{}내부에 코드를 넣기 때문

 

📌 함수 호출

함수를 사용하는 것

 

📌 매개변수

함수를 호출할 때 괄호 내부에 여러 가지 자료를 넣는데, 이 자료를 매개변수라고 한다.

 

📌 리턴값

함수를 호출해서 최종적으로 나오는 결과

 

📌 함수를 사용하면 좋은점

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

 

📌 익명함수

function() { }

 

📌 선언적 함수

function 함수() {

}

let 함수 = function() { };

---

📌 매개변수와 리턴값

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

모든 함수가 매개변수와 리턴값을 사용하는 것이 아니라 필요한 경우에만 매개변수와 리턴값을 사용합니다.

 

    <script>
        function f(x){
            return x*x
        }

        console.log(f(3))
    </script>

---

📌 윤년인지 확인하는 함수

    <script>
        let year = Number(prompt('연도를 입력하세요.',''))

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

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

---

📌 숫자 계산하는 함수

function 함수(매개변수) {
	let output = 초기값
    처리한다
    return output
}

일반적으로 숫자를 계산해서 출력할 때는 다음과 같은 형태의 함수를 사용한다.

 

📌 a부터 b까지 더하는 함수

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

        console.log(`1부터 100까지의 합: ${sumAll(1,100)}`)
        console.log(`1부터 500까지의 합: ${sumAll(1,500)}`)
    </script>

 

📌 a부터 b까지 곱하는 함수

    <script>
        function multiplyAll(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>

---

📌 가변 매개변수

호출 할때 매개변수의 개수가 고정적이지 않은 함수

 

📌 최솟값 구하기

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

        const testArray = [52, 273, 32, 103, 275, 24, 57]
        console.log(`${testArray} 중에서`)
        console.log(`최소값 = ${min(testArray)}`)
    </script>

 

📌 나머지 매개변수(rest parameter)

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

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

 

📌 나머지 매개변수 활용한 min함수

    <script>
        function min(...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>

---

📌 전개연산자 사용

    <script>
        function sample(...items){
            console.log(items)
        }

        const array = [1, 2, 3, 4]
        console.log('# 전개 연산자를 사용하지 않는 경우')
        sample(array)
        console.log('# 전개 연산자를 사용하는 경우')
        sample(...array)
    </script>

전개연산자를 사용하지 않는 경우 배열이 매개변수로 들어오고

전개연산자를 사용하는 경우, 숫자가 하나하나 전개되어 매개변수로 들어온다.

 

※ 구버전 : apply() 함수 이용

---

📌 어떤 자료가 배열인지 확인

Array.isArray()

typeof로는 배열인지 확인할 수 없다.

 

📌 배열인지 아닌지에 따라 분기

    <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,103,275,24,57)}`)
        console.log(`min(숫자, ...) : ${min(52,273,[103,275,24,57])}`)
        console.log(`min(숫자, ...) : ${min([103,275,80,57], 52,273)}`)
    </script>

처음 입력된 값이 배열이면, 배열에 관한 min 구하고 끝난다.

만약 처음 입력된 값이 숫자이면, 숫자에 대한 min을 구하고 끝난다.

---

📌 기본 매개변수

항상 비슷한 값을 입력하는 경우, 같은 매개변수를 여러번 반복할 필요 없이 기본 매개변수로 설정해준다.

 

📌 급여계산하기

기본 매개변수로 시급 8,590원, 근무시간 40시간

    <script>
        function earnings(name, wage=8590, hours=40){
            console.log(`# ${name} 님의 급여 정보`)
            console.log(`- 시급 : ${wage}원`)
            console.log(`- 근무시간 : ${hours}시간`)
            console.log(`- 급여 : ${wage * hours}원`)
        }

        earnings('구름')
        earnings('별', 10000)
        earnings('인성', 10000, 52)
    </script>

※ 구버전 

wage = typeof(wage) != undefined ? wage : 8590
hours = typeof(hours) != undefined ? hours : 52

wage = wage || 8590
hours = hours || 52

 

📌 윤년인지 확인하기

기본 매개변수로 올해년도가 들어감.

    <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 max = function(array){
            let output = array[0]
            for(const item of array){
                if(item > output){
                    output = item
                }
            }
            return output
        }

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

 

📌 숫자 최대값 찾기

    <script>
        const max = function(...array){
            let output = array[0]

            for(const item of array){
                if(output < item)
                    output = item
            }
            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 item of items){
                if(output < item){
                    output = item
                }
            }

            return output
        }

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

---

참고한 책 : 혼자 공부하는 자바스크립트