[JavaScript] 자바스크립트 익명 함수(Anonymous Function)

오늘은 자바스크립트의 익명 함수(Anonymous Function)에 대해 알아보는 시간을 가져보자

 

1. 익명 함수(Annoymous Function)의 개념과 기본 구조

---

익명 함수는 함수의 이름 없이 정의되는 함수이다. 다양한 상황에서 사용될 수 있으며, 코드의 모듈화, 비동기 작업 처리, 이벤트 핸들링, 클로저(Closure) 생성 등 다양한 목적으로 활용된다. 익명 함수의 사용은 코드를 더 모듈화 하고 유지보수하기 쉽게 만들어주기 때문에 흔하게 쓰이는 함수이다. 다음은 익명 함수의 주요 특징들이니 한 번 살펴보자.

 

특징	내용
이름이 없음	익명 함수는 함수명을 가지고 있지 않다. 따라서 함수를 호출하거나 참조할 때 함수 이름을 사용하지 않는다.
함수 표현식	익명 함수는 함수 표현식(Function Expression)을 통해 정의된다. 이것은 함수를 변수에 할당할 수 있는데, 변수를 통해 함수를 참조하거나 호출할 수 있다.
콜백 함수	익명 함수는 다른 함수에 인자로 전달되어 사용된다. 이를 통해 함수의 동작을 다른 함수에게 위임하거나 비동기 작업을 처리할 수 있다.
스코프 제한	익명 함수는 자체 스코프를 생성하며, 외부 변수에 접근이 제한된다. 이것은 변수 충돌을 방지하고 데이터를 캡슐화하는 데 도움이 된다.
IIFE(즉시 실행 함수 표현식)	함수를 정의하자마자 즉시 실행하는 IIFE 패턴을 구현하는 데 자주 사용된다.

 

일반 함수

---

function myFunction(){
	// code
}

일반적으로 자바스크립트에서 일반 함수라고 하면 위의 예시와 같은 구조를 갖는다. 함수의 이름이 있기 때문에 호출을 할 때도 이름으로 함수를 호출할 수 있다.

 

익명 함수

---

let fn = function(){
	// code
}

위의 예시는 변수에 익명 함수를 할당하는 방식이다. 함수의 이름이 없어 함수를 호출할 때도 이름으로 호출할 수 없으며 반드시 위의 예시처럼 변수에 할당하거나 혹은 다른 방법을 사용해서 호출해야 한다. 익명 함수를 호출하는 다양한 방법들은 아래에서 살펴보자.

 

 

2. 익명 함수(Annoymous Function)의 사용법

---

이제는 익명 함수를 사용할 수 있는 다양한 방법들에 대해 알아보자. 

 

2.1 변수 할당

---

JavaScript에서 익명 함수(Annoymous Function)를 변수에 할당하는 방법은 다음과 같다. 이것은 주로 함수 표현식(function expression)으로 알려져 있다.

 

예제 코드

let 변수명 = function() {
  // 함수 본문
};

// 예를 들어
let greeting = function() {
  console.log("Hello world!");
};

// 함수를 호출하려면
greeting(); // "Hello world!"가 출력됩니다.

익명 함수를 위의 예제와 같이 변수에 할당하면 해당 함수를 필요한 곳에서 호출할 수 있다. 함수 표현식은 주로 콜백 함수나 클로저 등의 다양한 상황에서 사용된다. 함수 표현식을 사용하면 함수를 값처럼 다룰 수 있어서 동적으로 함수를 생성하고 전달하는 데 유용하다.

 

 

2.2 콜백 함수

---

익명 함수를 콜백 함수로 사용하는 방법은 아주 일반적이다. 콜백 함수는 다른 함수에 전달되어 나중에 실행되는 함수다. 아래의 예제를 통해 익명 함수를 콜백 함수로 사용하는 방법을 살펴보자.

 

예제 코드

// 익명 함수를 변수에 할당하여 콜백 함수로 사용하는 예제
let myCallback = function() {
  console.log("콜백 함수가 호출되었습니다.");
};

// 다른 함수에서 콜백 함수를 사용하는 예제
function doSomething(callback) {
  console.log("작업을 시작합니다.");
  // 다양한 작업 수행
  callback(); // 콜백 함수 호출
}

// doSomething 함수를 호출하면서 myCallback을 콜백으로 전달
doSomething(myCallback); // "작업을 시작합니다."와 "콜백 함수가 호출되었습니다."가 순서대로 출력됩니다.

myCallback 변수에 할당된 익명 함수가 doSomething() 함수의 콜백으로 전달되고, doSomething() 함수 내에서 작업이 수행된 후에 콜백 함수가 호출된다. 이와 같이 익명 함수를 콜백으로 사용하면 비동기 작업, 이벤트 처리 등 다양한 상황에서 유용하게 활용할 수 있다. 

 

 

2.3 이벤트 핸들러로 사용

---

이벤트 핸들러로 익명 함수를 사용하는 방법은 간단하다. HTML 요소에 이벤트 핸들러를 추가하고 익명 함수를 이 핸들러로 전달할 수 있다. 아래의 이벤트 핸들러로 익명 함수를 사용하는 예제를 살펴보자.

 

예제 코드 - HTML

<button id="myButton">클릭하세요</button>

 

예제 코드 - JavaScript

// 버튼 요소를 가져오기
let button = document.getElementById("myButton");

// 이벤트 핸들러를 추가하고 익명 함수를 사용
button.addEventListener("click", function() {
  console.log("버튼이 클릭되었습니다.");
});

// 이벤트 핸들러로 익명 함수를 사용하는 다른 예제
let inputElement = document.getElementById("myInput");
inputElement.addEventListener("input", function() {
  console.log("입력값이 변경되었습니다.");
});

addEventListener 메서드를 사용하여 버튼과 입력 요소에 각각 클릭 이벤트와 입력 이벤트의 핸들러를 추가했다. 핸들러로 전달한 함수는 익명 함수로 정의되어 있으며, 해당 이벤트가 발생할 때 실행된다. 이렇게 익명 함수를 이벤트 핸들러로 사용하면 요소에 이벤트를 동적으로 추가하고, 해당 이벤트가 발생할 때 원하는 동작을 실행할 수 있다.

 

 

2.4 즉시 실행 함수 표현식(IIFE)

---

즉시 실행 함수 표현식(IIFE, Immediately Invoked Function Excpression)은 익명 함수를 정의하고 즉시 실행하는 패턴이다. 이를 사용하면 함수 내부의 코드가 한 번만 실행되고, 함수 내에서 정의한 변수들은 외부 스코프와 격리된다. IIFF를 사용하여 익명 함수를 즉시 실행하는 예제 코드를 살펴보자.

 

예제 코드

(function() {
  // 익명 함수 내부 코드
  console.log("이 함수는 즉시 실행됩니다.");
})();

익명 함수는 괄호를 둘러싸여 있으며 바로 뒤에 또 다른 괄호 쌍 ()가 있어 함수를 즉시 실행하도록 한다. 이렇게 하면 함수가 정의되자마자 즉시 실행되며, 함수 내부의 코드가 실행된다.

 

IIFE를 사용하면 외부 스코프와 격리된 지역 스코프를 생성할 수 있어 변수 충돌을 방지하거나 변수를 숨길 때 유용하다.

 

예제 코드

let outsideVar = "외부 변수";

(function() {
  let insideVar = "내부 변수";
  console.log(outsideVar); // 외부 변수에 접근 가능
})();

console.log(insideVar); // 오류: insideVar는 외부에서 접근할 수 없습니다.

insideVar는 IIFE 내부에서만 접근 가능하며, 외부에서는 접근할 수 없다. 이를 통해 변수 이름 충돌을 방지하고 코드를 모듈화 하는 데 도움이 된다.

 

 

2.5 객체 메서드로 사용

---

객체의 메서드로 익명 함수를 사용하는 방법은 매우 간단하다. 객체의 속성에 함수를 할당하는 것과 마찬가지로 객체의 속성에 익명 함수를 할당할 수 있다. 

 

예제 코드

let myObject = {
  myMethod: function() {
    console.log("객체 메서드로 익명 함수 사용");
  }
};

// 객체 메서드 호출
myObject.myMethod(); // "객체 메서드로 익명 함수 사용" 출력

myObject 객체의 myMethod 속성에 익명 함수를 할당하고, 해당 메서드를 호출했다. 객체의 속성에 함수를 할당하는 것은 객체지향 프로그래밍에서 일반적으로 사용되며, 객체의 동작을 정의하는 데 유용하다.

 

또한 ES6에서는 객체 리터럴 내에서 메서드를 더 간결하게 정의할 수 있는 방법이 제공된다. 

 

예제 코드

let myObject = {
  myMethod() {
    console.log("ES6 문법으로 객체 메서드 정의");
  }
};

// 객체 메서드 호출
myObject.myMethod(); // "ES6 문법으로 객체 메서드 정의" 출력

 

 

2.6 클로저(Closure) 사용

---

클로저(Closure)를 사용하여 익명 함수를 생성하고 사용하는 방법은 JavaScript에서 자주 사용되는 기술 중 하나이다. 클로저는 함수가 자신의 외부 스코프에 있는 변수에 접근할 수 있게 하는 메커니즘을 나타낸다. 이를 통해 익명 함수가 외부 스코프의 변수를 사용할 수 있게 된다. 

 

예제 코드

function outerFunction() {
  let outerVariable = "외부 변수";

  // 내부 함수 (클로저)
  function innerFunction() {
    console.log(outerVariable); // outerVariable은 외부 스코프에서 가져옵니다.
  }

  // 내부 함수 반환
  return innerFunction;
}

// outerFunction을 호출하고 그 결과로 innerFunction을 얻습니다.
let closureFunc = outerFunction();

// 클로저 함수를 호출합니다. 이때 outerVariable에 접근합니다.
closureFunc(); // "외부 변수" 출력

outerFunction은 innerFunction을 반환하고, 이 반환된 함수가 클로저이다. closureFunc 변수에 클로저 함수를 저장하고 호출하면, 클로저 함수 내에서 outerVariable에 접근하여 외부 스코프의 변수에 접근할 수 있다. 클로저를 사용하면 함수 내에서 비공개 상태를 유지하고 데이터 은닉을 구현하는데 유용하다. 이를 통해 모듈 패턴 및 정보 은닉과 같은 디자인 패턴을 구현할 수 있다.