함수

[함수]
쓰는이유: 기능을 담으려고, 유지보수 편하게 하려고

함수의 종류
1) 함수 선언문
2) 함수 표현식
3) 화살표 함수

1) 특징: 호이스팅이 된다
- 호이스팅 : js 엔진이 실행되면서 함수가 위로 끌어올려지는 현상

함수
왜? 내가 편하려고! 기능을 블록으로 묶어서 사용
- input(매개변수) / output(반환데이터)

- 1. 함수선언문
(선언) function hello(매개변수) {
   console.log('안녕');
           }
(호출) hello();

- 2. 함수표현식
hello = function(매개변수) {
           console.log();
   }
함수선언문은 인자값으로 전달이 가능하다!!
setTimeout( hello , 3000 );

- 3. 화살표함수
let hello = () => {
   console.log();
      }
매개변수가 하나일 때 소괄호 생략 가능
let hello = name => { 기능 }

결과가 반환될 때 한줄일 경우 return, {} 생략 가능
let hello = name => console.log();

<!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>Document</title>
</head>
<body>
    <script>
        // 함수
        // : 특별한 목적의 작업을 수행하기 위해서 독립적으로 설계된 블록
        // - "내가 편하게 사용하기 위해서 만드는 기능"
        // - 함수를 정의할 때 input(입력, 매개변수), output(출력, 반환데이터)를 고려해야 함
        // 함수선언방식 : 함수선언문, 함수표현식, 화살표함수

        // 함수선언방식
        // 1. 함수선언문
        // - 함수선언문으로 정의한 후 함수호출 시 어디에서든 호출 가능!
        // - JS엔진이 자바스크립트 내용 중에서도 선언된 부분들을(var, 함수선언문)
        //   위로 끌어올려서 먼저 실행되는 방식

        // ★ 함수 호이스팅 ★ : 함수선언문이 자바스크립트 엔진에 의해서 먼저 실행되는 방식
        //                      원하지 않은 실행결과가 나올 수 있기 때문에
        //                      최근 트렌드는 함수표현식(+화살표함수)를 자주 사용

        greet();
        // 함수 정의
        function greet() {
            console.log("안녕하세여");
        }

        // 함수 호출
        greet();


        // 2. 함수표현식 (ES6문법)
        // - 함수를 값으로 취급
        // - 다른 함수의 인자값으로 전달이 가능

        // greet2는 변수이고, 초기화하기 전에 호출 -> 오류!
        // greet2(); => 오류코드

        greet2 = function() {
            console.log("hi");
        }

        greet2();

        // console.log(name);
        // var name = "꼬기";

        greet3 = function greet3(name) {
            console.log(name);
        }

        greet3("꼬기");


        // 다른 함수의 인자값으로 전달 예시
        const message = function() {
            console.log("이 메시지는 3초 이후에 보여집니다.");
        }
        setTimeout(message, 3000); // 3초 이후에 실행
        

        // 3. 화살표함수(ES6문법)
        // let greet4 = (name) => {
        //     console.log("내 이름은 "+name);
        // }
        
        // return 사용해보기
        let greet4 = name => {
            return("안녕 I wanna eat "+name);
        }
        console.log(greet4("꼬기"));

        // 실행 결과를 반환할 때 실행문이 한 문장일 경우 return, {} 생략가능
        let greet5 = (name) => console.log(name+"내놔");
        console.log(greet5("꼬기"));

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

예제 1)

<!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>Document</title>
</head>
<body>
    <script>
        // 두 정수를 입력받은 수의 합을 반환하는 addNumber() 함수 구현
        let num1 = Number(prompt("첫 번째 정수 입력"));
        let num2 = Number(prompt("두 번째 정수 입력"));

        // 화살표함수
        let total = (total) => console.log("두 숫자의 합은 "+total+"입니다.");
        console.log(total(num1+num2));

        let addNumber = (n1, n2) => {
            return n1+n2;
        }

        // 함수선언문
        function total3() {
            console.log("두 숫자의 합은 "+(num1+num2)+"입니다.");
        }
        total3();
        
        function addNumber(n1, n2) {
            return n1+n2;
        }
        
        // 함수표현식
        total2 = function total2(a, b) {
            console.log("두 숫자의 합은 "+(a+b)+"입니다.");
        }
        total2(num1, num2);

        let addNumber = function(n1, n2) {
            return n1+n2;
        }


        // 함수 호출
        let result = addNumber(num1, num2);
        console.log("두 숫자의 합 : "+result);
        
    </script>
</body>
</html>

예제 2)

<!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>Document</title>
</head>

<body>
    <script>
        // 문제. 이모지🍖와 숫자를 입력받은 후 피라미드 모양 출력
        // 1. 이모지랑 숫자를 입력받는다.
        // 2. 두 입력값을 pyramid() 전달
        // 3. 전달받은 값을 이용해서 피라미드 모양 출력

        let img = prompt("이모지를 입력하세요");
        let num = Number(prompt("몇 줄을 출력할지 입력하세요"));

        // 함수표현방식
        let pyramid = function (a, b) {
            for (let i = 1; i <= b; i++) {
                for(let j = 1; j <= i; j++) {
                    document.write(`<span>${a}</span>`);
                }
                document.write("<br>") 
            }
        }

        // 함수선언방식
        function pyramid(a, b) {
            for (let i = 1; i <= b; i++) {
                for(let j = 1; j <= i; j++) {
                    document.write(a);
                }
                document.write("<br>") 
            }
        }


        pyramid(img, num);

        



    </script>
</body>

</html>