'자바스크립트 익명 함수' 태그의 글 목록

자바스크립트 익명 함수

[JavaScript] 함수 ( 익명 함수, 즉시 실행 함수 ) 2024.03.25

[JavaScript] 함수 ( 익명 함수, 즉시 실행 함수 )

전영호 2024. 3. 25. 11:37

2024. 3. 25. 11:37

함수 ( function )

- function 으로 정의한다.

funtion 함수명(){실행할 코드}

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log("프로그램 시작!!!");
      function test() {
        console.log("test 함수 시작!!");
      }
      console.log("함수 지나옴");
      test();
      console.log("프로그램 종료!!!");
    </script>
  </body>
</html>

함수 부분은 호출이 이루어지기 전까지 실행되지 않음 ( 선언된다고 실행되지 않음, 반환타입을 java 처럼 따로 지정하진 않는다 )

( 자바의 변수와 동일하게 자바스크립트의 변수는 지역변수, 전역변수 등 어디서 선언되느냐에 따라 변수의 소멸 시점이 존재한다 )

함수에 매개변수를 넘겨주기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
      sumFunc();
      function sumFunc() {
        const n1 = prompt(`수 입력`);
        const n2 = prompt(`수 입력`);
        const sum = Number(n1) + Number(n2);
        document.write(`${n1} + ${n2} = ${sum}<br>`);
      }
      */

      /*
      const n1 = prompt(`수 입력`);
      const n2 = prompt(`수 입력`);
      sumFunc(n1, n2);
      function sumFunc(n1, n2) {
        const sum = Number(n1) + Number(n2);
        document.write(`${n1} + ${n2} = ${sum}<br>`);
      }
      */

      const n1 = prompt(`수 입력`);
      const n2 = prompt(`수 입력`);
      const sum = op(n1, n2);
      sumFunc(n1, n2, sum);
      // 계산부분
      function op(n1, n2) {
        const sum = Number(n1) + Number(n2);
        return sum;
      }
      // 출력부분
      function sumFunc(n1, n2, sum) {
        document.write(`${n1} + ${n2} = ${sum}<br>`);
      }
    </script>
  </body>
</html>

코드 실행

여러개의 값을 리턴하고자 할때

- 배열을 사용

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // return 값을 하나만 전달 가능
      function testFunc01() {
        let num = 95;
        let txt = "안녕하세요";
        return num, txt;
      }
      const result = testFunc01();
      document.write(result + "<hr>");

      // 배열로 담아서 return 값을 여러개 전달
      function testFunc02() {
        let num = 95;
        let txt = "안녕하세요";
        const arr = [num, txt];
        return arr;
      }
      const result2 = testFunc02();
      document.write(result2 + "<hr>");
      document.write(result2[0] + "<hr>");
      document.write(result2[1] + "<hr>");

      // Object 타입으로 return 값을 여러개 전달
      function testFunc03() {
        let num = 95;
        let txt = "안녕하세요";
        const arr = { num: num, txt: txt };
        return arr;
      }
      const result3 = testFunc03();
      // 콘솔에서 result3 이 가지고 있는 키와
      // 키에 담긴 값을 확인한 뒤 사용
      console.log(result3);
      document.write(result3 + "<hr>");
      document.write(result3["num"] + "<hr>");
      document.write(result3.txt + "<hr>");
    </script>
  </body>
</html>

매개변수의 갯수가 다르거나 가변적일 경우 함수에서 처리하는 방법

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function test01(x, y) {
        console.log("첫번째 함수 실행!!!");
      }
      function test01(x) {
        return x;
      }
      document.write("함수 호출 인자 없음 : " + test01() + "<br>");
      document.write("함수 호출 인자 1 : " + test01(10) + "<br>");
      document.write("함수 호출 인자 2 : " + test01(10, 20) + "<br>");
      // 오버로딩 불가능....!!! 무조건 나중에 선언된 함수로 적용됨

      function test02(x, y, z) {
        document.write(`${x}, ${y}, ${z}<br>`);
        if (z == undefined) {
          // 매개변수가 갯수가 부족할 경우의 로직 생성
          sum = x + y;
        } else {
          sum = x + y + z;
        }
        return sum;
      }
      let r1 = test02(10, 20);
      let r2 = test02(10, 20, 30);
      document.write(`매개변수 2개 : ${r1}<br>`);
      document.write(`매개변수 3개 : ${r2}<br>`);

      // arguments 를 사용하여 여러개의 가변적인 매개변수 받기
      function test03() {
        console.log(arguments.length);
        let i,
          sum = 0;
        for (i = 0; i < arguments.length; i++) {
          sum = sum + arguments[i];
          document.write(arguments[i]);
        }
        return sum;
      }
      let r3 = test03(10, 20);
      let r4 = test03(10, 20, 30);
      document.write(`매개변수 2개 : ${r3}<br>`);
      document.write(`매개변수 3개 : ${r4}<br>`);
    </script>
  </body>
</html>

함수 표현식

익명함수 - 한번 사용되고 사라짐 ( 메모리공간에서 삭제 )

일반 함수 - 선언되면 메모리 공간을 미리 잡아먹고 사용할때 꺼내서 쓴다

즉시 실행 함수

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      (function test() {
        alert("즉시 실행 함수!!!!");
      })();

      let result = (function test1() {
        return "서버로부터 데이터를 받아와 화면에 보여줌";
      })();
      document.write(result + "<br>");

      // 초기화 해주는 함수
      let name = "홍길동";
      let result02 = (function test02(n) {
        let db = n + "님의 정보 입니다";
        return db;
      })(name);
      document.write(result02 + "<br>");
    </script>
  </body>
</html>

즉시 실행 함수 코드 실행

★ 익명 함수 ★

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function test(x, y) {
        return x + y;
      }
      document.write(test(1, 2) + "<br>");

      // 함수를 변수로 설정하고 1회만 사용하고 버리는 익명함수
      let sumFunc = function (x, y) {
        return x + y;
      };
      document.write(sumFunc(10, 20) + "<br>");

      // 함수를 변수로 설정하고 1회만 사용하고 버리는 익명함수
      // 더 간단한 표현식
      let sumFunc1 = (x, y) => x + y;
      document.write(sumFunc1(100, 200) + "<br>");

      // 여러 줄을 표현해야 할 땐 중괄호로 묶어서 표현해야 한다
      // 중괄호로 여러 줄을 표현하는 경우 무조건 return 이 들어가야 한다
      // 어떤 값이 반환 값인지 명시해줘야 함!!!
      let sumFunc2 = (x, y) => {
        let num = 100;
        return x + y + num;
      };
      document.write(sumFunc2(1000, 2000) + "<br>");

      // 중괄호로 묶었을때 리턴값이 없으면 undefined 를 반환
      const result01 = () => {
        10 + 20;
      };
      const result02 = () => 10 + 20;
      const result03 = () => (10 + 20);

      document.write("<hr>");
      document.write(result01() + "<br>");
      document.write(result02() + "<br>");
      document.write(result03() + "<br>");
    </script>
  </body>
</html>

실습 예제

예제 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 입력 함수
      let inputNum1 = (x) => Number(prompt(x));

      // 출력 함수
      let print = (x) => document.write(x);

      // 두 수를 입력받아 큰 수를 출력하는 함수
      let moreBig = (x, y) => {
        if (x > y) {
          return x;
        } else {
          return y;
        }
      };
      print(moreBig(inputNum1("첫번째 수 입력"), inputNum1("두번째 수 입력")));

      document.write("<hr>");

      // 입력 받은 값이 짝수인지 홀수인지 판별하는 함수
      let evenNum = (x) => {
        if (x % 2 != 0) {
          return "홀수";
        } else {
          return "짝수";
        }
      };
      print(evenNum(inputNum1("홀, 짝 판별할 수 입력")));

      document.write("<hr>");

      // 입력 받은 값이 3의 배수인지 판별하는 함수
      let multipleThree = (x) => {
        if (x % 3 != 0) {
          return `${x}는 3의 배수가 아닙니다`;
        } else {
          return `${x}는 3의 배수입니다`;
        }
      };
      print(multipleThree(inputNum1("3의 배수인지 판별할 수 입력")));

      document.write("<hr>");

      // 수를 입력 받아 소수인지 판별하는 함수
      let decimal = (x) => {
        var arr = [];
        for (var i = 1; i <= x; i++) {
          if (x % i == 0) {
            arr.push(i);
          }
        }
        if (arr.length == 2) {
          return `${x}는 소수 입니다.`;
        } else {
          return `${x}는 소수가 아닙니다.`;
        }
      };
      print(decimal(inputNum1("소수인지 판별할 수를 입력하세요")));

      document.write("<hr>");

      // 절댓값을 구하는 함수를 정의하시오
      let absolute = (x) => {
        if (x >= 0) {
          return x;
        } else {
          return x - x * 2;
        }
      };
      print(absolute(inputNum1("절댓값을 구할 수를 입력하세요")));
    </script>
  </body>
</html>

코드 실행

728x90

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

[JavaScript] setTimeout, setInterval, 자식요소 (추가, 삭제) (0)	2024.03.26
[JavaScript] 배열 (0)	2024.03.26
[JavaScript] 이벤트 ( 마우스 동작, 키보드 동작 시 함수 호출 ) (0)	2024.03.25
[JavaScript] 조건문, 반복문 (1)	2024.03.22
[JavaScript] 변수 선언, 형 변환, 연산자, 출력 (0)	2024.03.22

PREV 이전 1 NEXT 다음

전영호의 개발 블로그