자바스크립트 함수 (JavaScript Function)

자바스크립트 함수 (JavaScript Function)

1. 함수 : 특정 기능들을 묶어서 호출할 수 있도록 하는 기능

2. 함수의 선언

기존 함수 선언 (호이스팅이 일어남) : function 함수이름(매개변수){로직}
화살표 함수 선언 (Arrow Function) : const 함수이름 = (매개변수)=>{로직}
return : 함수를 호출 했을 때 특정 값을 받고 싶다면 사용

※ 매개 변수 : 함수의 재료, 로직 : 누군가가 함수를 호출했을 때 실행시킬 로직

3. 함수 호출 : 함수이름()

▶ 연습

<body>
    <script>

        console.log('--주스 만들기 시작!--')
        console.log('오렌지를 다진다, 짠다')
        console.log('컵에 담는다')
        console.log('--주스 완성--!')

        //  (1) 함수의 선언
        // function 함수이름(){}
        
        function makeJuice(){
            console.log('--주스 만들기 시작!--')
            console.log('오렌지를 다진다, 짠다')
            console.log('컵에 담는다')
            console.log('--주스 완성--!')
        }


        // (2) 함수의 호출 : 함수를 실행하려면 호출이 필수
        // 함수이름()
        makeJuice()

        // (3) 매개변수를 활용한 함수
        function makeAnyJuice(fruit){
            console.log('--주스 만들기 시작!--')
            console.log(fruit+'를 다진다, 짠다')
            console.log('컵에 담는다')
            console.log('--주스 완성--!')
        }

        makeAnyJuice('레몬')
        makeAnyJuice('자몽')

        // (4) return을 이용한 함수
        function makeToast(sc){
            return sc+'토스트'
        }

        console.log(makeToast('햄치즈'))

        // (5) 화살표 함수 (Arrow Function)
        // 기존 함수 function 함수이름(){}
        // 화살표 함수 const 함수이름 = ()=>{}
        const makeCoffee = (menu)=>{
            console.log(menu='라떼')
        }
        
        makeCoffee('바닐라')

    </script>
</body>

▶ 예제

사용자에게 숫자를 두 개 입력 받고, plus라는 함수를 이용해 두 개의 숫자를 더하기

결과는 팝업창으로 띄우기

<body>
    <script>

    let num1 = parseInt(prompt('첫 번째 숫자를 입력하세요.'))
    let num2 = parseInt(prompt('두 번째 숫자를 입력하세요.'))

    plus = (num1, num2)=>{
        return num1+num2
    }

    alert('두 값의 합은 '+plus(num1,num2)+'입니다.')
    
    </script>
</body>
</html>

▶ 실습

햄버거 만들기

① 사용자에게 먹고 싶은 햄버거의 종류를 입력 받기

② 사용자에게 세트메뉴인지 단품메뉴인지 입력 받기

③ 사용자가 입력한 햄버거를 제작하는 함수를 생성

console.log('빵깔기')
console.log('토마토올리기')

console.log(menu+'패티올리기')
console.log('빵닫기')
console.log(menu+'버거완성')

④ 햄버거의 가격은 무조건 5000원, 5000 데이터를 반환

⑤ 콜라를 만드는 함수 생성, 가격 2000원

⑥ 감자튀김을 만드는 함수 생성, 가격 1500원

⑦ 사용자가 단품을 입력하면 햄버거를 만드는 함수만 호출, 세트를 입력하면 햄버거, 콜라, 감자튀김 모두 호출

⑧ 최종적으로 지불 가격 출력

<body>
    <script>
        
        // 사용자에게 먹고싶은 햄버거의 종류를 입력 받습니다.
        // 세트메뉴인지 단품메뉴인지 입력받습니다.

        let menu = prompt('햄버거를 주문하세요')
        let choice = prompt('단품, 세트를 선택하세요 (단품, 세트)')

        // 사용자가 입력한 햄버거를 제작하는 함수를 작성 - makeBurger 

        const makeBurger = (menu)=>{
            console.log('방깔기')
            console.log('토마토올리기')
            console.log(menu+'패티올리기')
            console.log('빵닫기')
            console.log(menu+'버거완성')
            
            return 5000
        }
        // 콜라, 감자튀김 함수 

        const makeCoke = ()=>{
            console.log('콜라 완성')
            return 2000
        }
        const makePotato = ()=>{
            console.log('감자튀김 완성')
            return 1500
        }

        // 단품, 세트 가격 설정
        let price = 0
        
        if (choice === '세트') {
            price = makeBurger(menu)+makeCoke()+makePotato()
        } else if (choice === '단품') {
            price = makeBurger(menu)
        }

        // 금액 출력
        console.log('지불하실 가격은'+price+'원입니다.')
        
    </script>
</body>

저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

자바스크립트 DOM (JavaScript Document Object Model) (0)	2023.01.15
자바스크립트 객체 (JavaScript Object) (0)	2023.01.15
자바스크립트 배열 (JavaScript Array) (1)	2023.01.14
자바스크립트 연산자, 조건문, 반복문 (JavaScript Operator, Conditional Statements, Loop) (0)	2023.01.14
자바스크립트 자료형, 형 변환 (JavaScript type, type casting) (0)	2023.01.11