[JavaScript] 익명 함수

전우석·2024년 3월 29일

JavaScript / jQuery

목록 보기
6/8

JavaScript 익명 함수

익명 함수는 이름이 없는 함수이다.

  • 익명 함수는 함수를 사용할 때 유연성을 제공해준다
    • 일회성 작업, 콜백 함수, IIFE 등 ..

익명 함수 특징

익명 함수는 일반 함수와 유사한 속성(properties)을 가진다.

  • 익명 함수는 변수에 할당되어 사용될 수 있으며, 이때 변수명이 함수를 호출하는데 사용된다.
  • 콜백 함수로 넘겨지거나, 다른 함수의 반환값으로 사용될 수 있다.
  • key-value 형태의 객체의 메서드로도 사용될 수 있다.
  • 익명 함수 내에서 this 키워드를 사용할 수 있다. 그러나 화살표 함수의 경우, this는 상위 스코프의 this를 가리킨다.

익명 함수 사용

익명 함수 선언

익명 함수는 이름 없이 함수 키워드와 매개변수, 실행 블록으로 정의된다.

// greet 변수에 익명함수 할당
const greet = function() {
    console.log("Hello, World!");
};

익명 함수 호출

익명 함수를 호출하기 위한 방법

// greet에 할당된 익명함수 호출
greet(); // "Hello, World!"
  • 익명 함수는 선언될 때 변수에 할당되며, 이 변수를 통해 함수를 호출한다.

익명 함수 활용

객체 내 메서드

익명 함수는 객체의 동작(behavior)을 구현하는 메서드로 사용될 수 있다.

  • 객체의 속성 중, 속성값이 익명 함수인 경우를 메서드라고 할 수 있다.
  • 이 메서드를 통해 객체와 관련된 작업을 수행할 수 있다.
// 객체 내부에 메서드의 형태로 존재하는 익명함수
const person = {
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

콜백 함수

다른 함수의 인자로 넘겨지는 함수로, 특정 이벤트가 발생했을 때 실행된다.

// setTimeout 함수에 인자로 넘겨지는 익명함수
setTimeout(function() {
    console.log("3초 후 실행");
}, 3000);

IIFE (Immediately Invoked Function Expression)

선언과 동시에 실행되는 함수

// 선언과 동시에 함수 실행
(function() {
    console.log("즉시 실행 함수");
})();

이벤트 핸들러

HTML 요소의 이벤트에 반응하는 함수로, 주로 익명 함수 형태로 사용된다.

// "myButton" 요소를 "클릭"했을 때, 콘솔에 "버튼 클릭!" 출력하도록 하는 익명 함수
document.getElementById("myButton").addEventListener("click", function() {
    console.log("버튼 클릭!");
});

0개의 댓글