JavaScript

[JavaScript] 함수 기초

퓨어맨 2022. 5. 27. 02:11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex01함수기초</title>
</head>
<body>
    <script>

        // 호이스팅(Hoisting) 끌어올리기
        // 함수를 실행하기 전에 함수 안에 있는 모든 선언들을
        // 전역으로 끌어올려서 전체 영역에서 사용가능하게 끔 만들어주는 것
        // --> 최상단에 선언해주는 것
        addNum(5,6)

        // 자바스크립트에서 함수를 만드는 방법
        // 1. 함수 선언문(function declarations)
        // : 호이스팅(최상단으로 끌어올려지는 것)이 가능하다.
        function addNum(num1, num2){
            console.log(num1+num2)
        }

        // 함수 호출(사용)
        addNum(4,5)

        // addNum2(4,5)
        // 2. 함수 표현식(function Expressions)
        // : 호이스팅이 불가능하다.
        let addNum2 = function(num1, num2){
            console.log("두번째 함수",num1+num2)
        }
        addNum2(4,5)


        // 3. Arrow function(화살표 함수)
        // : ES6 version 지원가능한 함수
        // : 호이스팅 불가능하다.
        let addNum3 = (num1, num2) => {console.log('화살표 함수',num1+num2)}
        addNum3(1,2)

        // 매개변수가 하나인 화살표 함수
        // : 소괄호 생략 가능하다.
        let temp1 = num1 => {console.log('매개변수 하나',num1)}
        temp1(4)

        // 매개변수가 아무것도 없는 화살표 함수
        let temp2 = () => {console.log('비어있는 매개변수')}
        temp2()

        // 한줄로 작성하는 화살표 함수
        // 매개변수가 하나이고 로직도 한줄이라면
        // : 중괄호 생략가능하다.
        let temp3 = num1 => console.log("한줄로 작성",num1+num1)
        temp3(4)

        // 함수 수행 후 값을 되돌려주고 시을 때
        let temp4 = num1 => {return num1}
        console.log(temp4(4))

        // 함수 수행 후 값을 되돌려주는데 return 키워드 생략해보기
        let temp5 = num1 => num1;
        console.log("retunn 생략",temp5(5))

    </script>
</body>
</html>