[JavaScript] 함수(선언적

by

함수는 무엇인가

  • 일반적으로 사용되는 블록 단위의 실행 가능한 코드의 집합입니다.

  • 기능 단위로 재사용하는 역할을 합니다.

  • 함수를 선언하려면 function 키워드 또는 화살표 함수(화살표 함수 =>)를 사용합니다.

  • 호출: 정의된 함수가 호출되는 동안 함수가 실행됩니다.

자바스크립트 기능거의

  1. 선언적 기능 : 이름으로 정의
    • JavaScript를 읽을 때 먼저 읽습니다.

    • 통화 위치는 무료입니다.

  2. 익명 기능 : 이름 없이 정의된 함수 – 콜백 함수 – 이벤트 처리에 사용
    • 자체적으로 호출할 수 없음
    • 함수 이름 대신 변수에 익명 함수를 할당하거나 특정 이벤트 객체에 할당하여 호출 – 할당 유형 함수
    • 익명 함수의 소스 코드는 변수 값이므로 세미콜론 ; 쓰다
  3. 프리미엄 및 우수한 기능
  4. 즉각적인 기능 : 함수가 자신을 정의하자마자 즉시 자신을 호출합니다.

1. 선언적 함수

선언적 함수는 어디에서나 호출할 수 있습니다.

'추천 관련글,

리프팅 문제로 인해 선언적 함수는 일반적으로 사용되지 않습니다.

sayHello();   //오류 없이 실행됨

function sayHello(){
	console.log('Hello')
}

sayHello();   //오류 없이 실행됨

2. 익명함수(할당함수)

익명 함수는 한 줄씩 읽어서 만듭니다.

코드에 도달하면 생성됩니다.

sayHello();   //에러발생

let sayHello = function(){
	console.log('Hello')
}

sayHello();   //오류없이 실행됨

선언적 함수와 익명 함수는 실행 순서가 다릅니다.

함수()

함수=function(){     // 2. 나중에 실행됨
  console.log("익명함수 입니다")
}

function 함수(){    // 1. 먼저 만들어짐
  console.log("선언적 함수입니다")
}
함수()


결과 화면 예

3. 최고 수준의 기능

함수는 값으로 사용됩니다(함수는 자신을 객체로 취급함).

  1. 변수에 넣을 수 있습니다.

    매핑 기능 (예시 2 참조)
  2. 인수로 전달할 수 있습니다.

    콜백 함수
function sayHello() {
   return "Hello, ";
}
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}
// `sayHello`를 `greeting` 함수에 인자로 전달
greeting(sayHello, "JavaScript!
");

3. 반환 값으로 전달할 수 있습니다.

고차 함수

function sayHello() {
   return function() {
      console.log("Hello!
");
   }
}

4. 즉시 실행 기능

선언과 동시에 호출되어 재사용하지 않을 때 사용하는 함수입니다.

ex) 변수를 초기화하는 함수

(function () {
    console.log("hello");
})();

// 화살표 함수로도 사용 가능하다
(() => {
    console.log("hello");
})();

자바스크립트 예

<!
DOCTYPE html>
<html lang="ko">
  <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 type="text/javascript">
      hap();
      function hap() {     //선언적 함수
        console.log("hap");
      }
      const minus = function (a=1,b=2) {    //일급합수
        const num1 = 2;
        const num2 = 1;
        document.write(num1 + num2);
        document.write("<br />");
        document.write(a + b);
      };
      minus(5, 7);
      function sayHello() {
        return "Hello, ";
      }
      function greeting(helloMessage, name) {
        console.log(helloMessage() + name);
      }
      // `sayHello`를 `greeting` 함수에 인자로 전달
      greeting(sayHello, "JavaScript!
");
    </script>
  </body>
</html>

간단한 함수 사용 예

//함수 사용 예제 - 값 추출하기

//변수를 선언합니다
let nums =(1,2,3,4,5,6,7,8,9,10)
//홀수만 추출
nums = nums.filter((value)=>value%2 === 1)
    console.log(nums)

//5 이하의 수만 추출
nums = nums.filter((value)=>value<=5)
    console.log(nums)
//5로 나눈 나머지가 0인 수만 추출
nums = nums.filter((value)=>value%5===0)
    console.log(nums)