본문 바로가기

WEB/JavaScript

Js - 함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 함수</title>
</head>
<body>
    <h1>자바스크립트 함수</h1>
    <h2>개요</h2>
    <p>특정 작업(코드블럭)을 여러번 반복해야 하는 경우
        해당 작업을 재사용 가능한 구조로 만들때 사용 </p>
    <p>즉, 어떤 작업을 수행하기 위해 필요한 코드들의 집합을 의미,
        이것들을 재사용하기 위해 모듈형태로 작성한 것 </p>
    <p>함수를 만들기 위해서는 function이라는 키워드 사용</p>

    <script>
        // 함수 선언문
        function sayHello() {
            document.write('Hello, World!!<br>');
        }

        sayHello();  // 함수 호출 : 함수명

    </script>



    <script>
        //함수 표현식 : 1급 시민, 함수를 변수처럼 취급
        // function add(x,y) {
        //     return x+y;
        // }
        //
        // document.write(add(10,10),'<br>');


         let sum = function (x,y) {
            return x+y;
        }

        document.write(sum(20,10),'<br>');   // 함수를 변수처럼 쓸때는 이름을 정의하지 않음
                                            // 익명 anonymous 함수
    </script>


    <h2> arrow function - 함수의 간단 생성 (파이썬의 람다)</h2>
    <p>ES6에서 추가된 기능으로 함수 선언을 간단하게 작성가능</p>

    <p>즉, function이라는 키워드 대신 =>을 이용해서 함수 선언할 수 있음</p>
    <p>코드가 한줄이면 중괄호{}도 생략가능</p>


    <script>
        let sayHello2 = () => document.write('Hello, again <br>');

        sayHello2()
    //변수명=()=>{코드}
    //변수명=()=>코드
    </script>


    <script>
        // 변수명 = (매개변수) => 매개변수연산
        // let multify = (x,y) => {return x * y}
        let multify = (x,y) => x * y
        document.write(multify(10,10), '<br>')
    </script>


<!--    <script>-->
<!--        // 부가세 계산 함수-->
<!--        // 금액을 입력하면 부가세 계산하여 결과 출력-->
<!--        // 부가세 계산용 함수 : coumputeVat-->

<!--        let don = parseInt(prompt('금액을 입력하세요'))-->
<!--        let computeVat = (don,y) => don - (don * y)-->
<!--        document.write(computeVat(don, 0.1))-->
<!--    </script>-->

<!--    <script>-->
<!--        let don2 = parseInt(prompt('금액을 입력하세요'))-->
<!--        let tax = function (x,y) {-->
<!--            return x - (x * y);-->
<!--        }-->

<!--        document.write(tax(don2,0.1),'<br>');-->
<!--    </script>-->

    <hr>
    <script>
        // 부가세 계산 함수-->
       // 금액을 입력하면 부가세 계산하여 결과 출력-->
       // 부가세 계산용 함수 : coumputeVat-->

        function computeVat(price) {
            return price * 0.1;
        }

        let computeVat2 = function (price) {
            return price * 0.1;
        }

        let computeVat3 = (price) => price * 0.1;

        let price = parseInt(prompt('금액을 입력하세요'));

        document.write(`${price}의 부가세는 ${computeVat(price)}입니다.<br>`);
        document.write(`${price}의 부가세는 ${computeVat2(price)}입니다.<br>`);
        document.write(`${price}의 부가세는 ${computeVat3(price)}입니다.<br>`);

    </script>



<hr>
    <script>
        //년도를 입력하면 윤년여부를 계산하여 출력
        // 윤년여부를 계산하는 함수 : computeLeapYear
    // 1. 년도가 4로 나누어 떨어지는 해는 윤년(2000, 2004, 2008, 2012, 2016, 2020…)
    // 2. 그 중에서 년도가 100으로 나누어 떨어지는 해는 평년(2000, 2100, 2200...)
    // 3. 그 중에서 년도가 400으로 나누어 떨어지는 해는 윤년(2000, 2400, 2800...)

        let year = parseInt(prompt('연도를 입력하세요'))
        function computeLeapYear(year) {

            if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
                document.write(year + ' is a leap year');
            } else {
                document.write(year + ' is not a leap year');
            }
        }

        computeLeapYear(year);

    </script>










</body>
</html>

'WEB > JavaScript' 카테고리의 다른 글

Js - 내장 함수 2  (0) 2022.06.10
Js - 내장 함수 1  (0) 2022.06.09
Js - 객체  (0) 2022.06.08
Js - 조건문, 반복문  (0) 2022.06.08
Js - 연산자, 성적 프로그램  (0) 2022.06.08