[혼공JS] 함수 chapter 5

함수의 기본 형태

익명함수

fuction( ){  }

함수는 코드의 집합을 나타내는 자료형입니다. 

사용하면 좋은점 : 

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

예제

    <script>
        //변수를 생성합니다.
        const 함수 = function(){
            console.log("함수 내부 코드입니다....!")
            console.log("함수 내부 코드입니다....!")
            console.log("함수 내부 코드입니다....!")
            console.log("")
        }
        함수()
        함수()
        console.log(typeof(함수))
        console.log(함수)
    </script>

결과

f(){} 형태처럼 이름이 붙지않는 함수를 익명함수라고 함

 

선언적 함수

이름이 있는 함수를 선언적 함수라고 합니다.

fuction 함수(){}
let 함수 = fuction(){ };

예제

<script>
		function 함수() {
            console.log("함수 내부 코드입니다....!")
            console.log("함수 내부 코드입니다....!")
            console.log("함수 내부 코드입니다....!")
            console.log("")
        }
        함수()
        함수()
        console.log(typeof(함수))
        console.log(함수)
</script>

이전과 달리 f 함수() { } 로 이름이 선언 된것을 확인 할 수 있습니다.

 

매개변수와 리턴값

함수를 호출 할떄 괄호 안에 적는 것을 매개변수 prompt()함수 안에 적는 것을 매개변수

최종 결과값을 리턴값이라 함

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

input = 매개변수 , output = 리턴값 

 

function f(x) 
{
	return x*x
}
console.log(f(3))

 

 

기본적인 함수 예제

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

1. 4로 나누어 떨어지는 해는 윤년인다.

2. 100으로 나누어 떨어지는 해는 윤년이 아니다. ( 즉 100년 이 아니면 윤년)

3. 400으로 나누어 떨어지는 해는 윤년이다.

 

조건 구현 ? ->

1 번 (year %4 ==0) 

2 번 (year %100 !==0) 

3 번 (year %400 ==0) 

말이 이상한데 4년일때 윤년 거기서 100년주기가 아니고 400년 주기인 년도.

조건 (year %4 ==0) && (year %100 ==0) || (year %400 ==0)

 

function f(x) 
{
       return x*x
}
        console.log(f(3))

        function 윤년(year)
        {
            return (year %4 ==0) && (year %100 !==0) || (year %400 ==0)
        }
        console.log(`2020년은 윤년일까? === ${윤년(2020)}`) 
        console.log(`2021년은 윤년일까? === ${윤년(2021)}`) 
        console.log(`2022년은 윤년일까? === ${윤년(2022)}`) 
        console.log(`2023년은 윤년일까? === ${윤년(2023)}`) 
        console.log(`2024년은 윤년일까? === ${윤년(2024)}`)

 

※함수 이름 : 일반적으로 true or false를 반환하는 함수는 isOOO이라는 함수명을 붙임

 

A부터 B까지 더하는 함수

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

 

최소값을 구하는 함수

    <script>
        function min(array) {
            let output =array[0]
            for(const item of array)
            {
                if(output>item){
                    output=item
                }
            }
            return output
        }
        const testitem= [52,55,105,203,11,23,1]
        console.log(`${testitem}중에`) 
        console.log(`최솟값 ${min(testitem)}`) 
    </script>

배열내의 첫번째 값과 그다음값을 순서대로 비교하면서 (for문으로 반복해서) 더 작은값이면 output을 바꾼다!

나머지 매개변수 - 가변 매개변수 함수

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

        function sample(...items) {
            console.log(items)
        }
        sample(1,2)
        sample(1,2,3)
        sample(1,2,3,4)

매개변수 배열을 사용하지 않은 형태로 계산가능하다!

예제 : 최대값을 구하는 함수 - 배열없이

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

        console.log(`max(52,55,105,203,11,23,1)중에`) 
        console.log(`최댓값 ${max(52,55,105,203,11,23,1)}`)

 

 

 

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

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

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

나머지 매개변수는 마지막에 배열로 표현되는 것을 확인 할 수 있다!

 

매개변수 자료형에 따라 다르게 동작하는 min함수

        function max(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([52,55,105,203,11,23,1])}`) 
        console.log(`max숫자 ${max(52,55,105,203,11,23,1)}`)

 

 

전개연산자

함수이름(...배열)

        function sample(...items) {
            console.log(items)
        }
        const array = [1,2,3,4]
        console.log('#전개연산자 사용않하는 경우')
        sample(array)
        console.log('#전개연산자 사용하는 경우')
        sample(...array)

전개연산자를 사용해야지 풀어저서 사용가능하다!

 

기본 매개변수

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

        function earnings(name,wage=8590,hours=40) {
            console.log(`${name}님의 급여정보`)
            console.log(`-시급 : ${wage}원`)
            console.log(`-근무시간 : ${hours}시간`)
            console.log(`-총 급여 : ${wage*hours}원`)
            console.log('')
        }
        earnings('별')
        earnings('핫산',1000000)
        earnings('냐옹',10000,52)

 

 

함수고급

콜백함수

뭐지...?

        function callThreeTimes(callback) {
            for(let i=0; i<3;i++){
                callback(i)
            }
            
        }
        function print(i) {
            console.log(`${i}번쨰 함수 호출`)
        }
        callThreeTimes(print)

 

callThreeTimes함수의 매개변수에 print함수를 전달?

function callThreeTimes(print) 
{
	for(let i=0; i<3;i++)
	{
		function print(i) 
		{
		console.log(`${i}번쨰 함수 호출`)
		}
	}
            
}
        
callThreeTimes(print)

이렇게 진행 되는거 같다!

 

익명함수사용 해보기 - 많이 사용되는 형태

        function callThreeTimes(callback) {
            for(let i=0; i<3;i++){
                callback(i)
            }
            
        }

        callThreeTimes(
            function(i) {console.log(`${i}번쨰 함수 호출`)}
        )

 

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

단순히 배열의 요소들을 사용하여 콜백을 호출합니다.

        const numbers = [273,52,103,32,57]

        numbers.forEach(
            function(value,index,array){
            console.log(`${index}번째 요소 : ${value}`)
        })

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

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

        let numbers = [273,52,103,32,57]

        numbers = numbers.map(function (value,index,araay)
        {
            return value*value
        })
        numbers.forEach(console.log)

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

리턴하는 값이 true인것만 모아서 새로운 배열을 만듭니다.

        const numbers = [273,52,103,32,57]
        const evenNumbers = numbers.filter(function(value){
            return value % 2 ===0
        })

        console.log(`원래배열 : ${numbers}`)
        console.log(`짝수만 추출 : ${evenNumbers}`)

 

화살표 함수

단순한 콜백함수를 쉽게 입력하고자 화살표 함수를 생성함

function(매개변수) { } 을 쉽게
(매개변수) => {}
(매개변수 )=> 리턴값

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

 

순서대로 - 필터로 짝수인 수들만 걸러내고 ( 0,2,4,6,8) - 맵으로 value제곱을 하고 (0,4,16,36,64) -> 이치로 value를 콘솔로 내보냄

 

타이머함수

setTimeout(함수,시간)	특정시간 후에 함수를 한번 호출합니다.
setInterval(함수,시간)	특정 시간마다 함수를 호출합니다.

        setTimeout(() => {
            console.log('1초 후에 실행됩니다.')
        }, 1*1000);

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

clearTimeout(타이머_ID)	setTimeout()함수 타이머 제거
clearInterval(타이머_ID)	setInterval()함수 타이머 제거

        let id 
        let count = 0
        id =setInterval(() => {
            console.log(`1초 마다 실행됩니다.(${count}번째)`)
            count++
        }, 1*1000);

        setTimeout(() => {
            console.log(`타이머 종료합니다.`)
            clearInterval(id)
        }, 5*1000);

 

 

즉시 호출 함수를 왜 사용할까?

- 외부에서 호출한 스크립트 코드에서 식별자가 충돌할 수 있기 때문에 블록으로 막거나 함수로 막아서 중복 되지 않게 하는것입니다.

함수를 만들자 마자 사용해서 충돌 방지!

 

익명 함수 vs 선언 함수

익명 함수 - 코드 순서대로 호출됨

선언 함수 - 순차적인 코드 실행전에 생성됨 - 따라서 어디에서 호출해도 실행됨 - 어디에 함수명이 같은게 있을지 모르기에 문제가 많이 생길 수 도 있다