개발 공부중

[JavaScript] 함수(선언적 함수/익명 함수/대입형 함수/즉시실행 함수) 본문

JavaScript

[JavaScript] 함수(선언적 함수/익명 함수/대입형 함수/즉시실행 함수)

개발자 leelee 2023. 2. 16. 02:35

함수란,

  • 자주쓰는 실행코드를 블록단위로 묶어놓은 것이다.
  • 기능단위로 재사용하기 위해서 사용한다.
  • 함수 선언은 function키워드 사용하거나 arrow function(화살표 함수=>)를 사용한다.
  • 호출 : 정의되어있는 함수는 호출해야 비로서 기능이 실행된다.

  JavaScript 함수의 종류

  1. 선언적함수 : 이름을 붙여서 정의한 함
    • 자바스크립트를 읽을 때 우선적으로 읽어준다.
    • 호출위치가 자유롭다
  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");
})();

JavaScript 예제

<!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)

 

'JavaScript' 카테고리의 다른 글

[JavaScript] 테이블 특정 값에 해당하는 행 숨기는 버튼 만들기  (0) 2023.11.12
[JavaScript] DataTable 간단한 예제 코드  (0) 2023.11.09
[javaScript] 구조분해할당  (0) 2023.02.15
[javaScript] 배열 메소드 정리  (0) 2023.02.13
[javaScript] 객체의 깊은 복사 / 얕은 복사  (0) 2023.02.10
'JavaScript' Related Articles more
Comments