[javascript] 쉽게 이해하는 화살표 함수와 람다 함수 (익명함수)

개발 언어를 공부하다 보면, 람다 함수를 만나게 된다. 자바스크립트에서의 람다는 무엇인지 알아보자. 그리고 일반 함수와 익명 함수의 차이를 이해하고 익명 함수를 포함하는 람다 함수를 비교해 보자.

 

 

 

---

 

람다 함수

람다 함수(=람다 식)은 프로그래밍 언어에서 사용되는 개념이다. 프로그래밍 언어학 적으로 공부를 하면, 한 달 내내 공부해도 습득하기 어렵다. 여기서는 Javascript에서의 람다 함수에 대해 핵심만 파악해 보도록 하자.

 

자바스크립트에서 람다 함수를 알기위해서는 우선 일반 함수와 익명함수를 알아야 한다.

 

일반 함수 기본형

아래의 코드를 보면 함수명이 포함되어 있는 것을 알 수 있다.

function 함수명(){
  함수 로직
}

 

익명 함수 기본형

function() {
  함수로직
}

 

위의 일반함수와 익명 함수를 비교해 보면 함수 명의 유무의 차이인 것을 알 수 있다. 익명이라는 이름과 같이 메모리를 차지하지 않는다. 따라서 람다로 코딩을 하면, 메모리가 사용되지 않으므로 재사용하지 않고 일회용으로 많이 사용된다. 이러한 이유 때문에 익명 함수는 아래와 같이 변수에 담아서 많이 사용한다.

 

const 변수 = function() {
  함수로직
}

 

위와 같이 익명함수를 변수에 저장하는 방식을 리터럴 방식이라 한다. 리터널은 코드 상에서 데이터를 표현하는 방식( ex let hanpy = 123 )으로, 변수를 선언함과 동시에 그 값을 저장해주는 방식이라고 생각하면 된다. 일반 함수와 익명 함수를 조금만 더 살펴보자.

 

// 일반함수
function hanpy1(){
  console.log("hi");
}

// 익명함수
const hanpy2 = function (){
  console.log("hi");
}

 

위의 예시에서 일반함수는 함수에 이름을 붙여준 것이고 익명 함수의 경우는 변수에 저장이 된 것이다. 이때 익명 함수는 호이스팅 시 위로 올라가지 않고 익명 함수를 저장한 변수만 올라가게 된다. 이 말은 위의 hanpy2 변수가 호이스팅 시 선언부에서 const hanpy2;로만 올라가게 된다. 따라서 아래의 코드는 에러가 발생한다.

 

hanpy2()

// 익명함수
const hanpy2 = function (){
  console.log("hi");
}

hanpy2()

첫 번째 hanpy2()에서 에러 발생

ReferenceError: Cannot access 'hanpy2' before initialization

 

하지만, 아래와 같이 일반 함수로 실행을 하면 호이스팅되어 에러가 발생하지 않는다. 

 

hanpy1()

// 일반함수
function hanpy1(){
  console.log("hi");
}

hanpy1()

 

 

위의 예시만 보면, 익명함수는 별로 안 좋아 보인다. 하지만, 한 번만 사용하고 쓰지 않을 함수에 대해서는 익명 함수를 사용한다면, 불필요한 메모리를 줄일 수 있다.

 

기본 개념을 익혔으니 본격적으로 람다 함수에 대해 알아가보자. javascript에서는 람다 함수를 화살표 함수라 부른다. 따라서 화살표 함수에 대해 알아보자.

 

화살표 함수(= 람다함수)

화살표 함수의 기본형은 아래와 같다.

 

// 일반함수
function hanpy1(){
  console.log("hi");
}

// 화살표함수
const hanpy3 = () => {
  console.log("hi");
}

 

직관적으로도 알 수 있지만, 화살표 함수는 짧아서 사용하기가 쉽다. 위의 예시를 보면 화살표 함수는 함수 명이 없다. 따라서 화살표 함수를 익명 함수라고 부르기도 한다. (화살표 함수는 익명 함수로만 사용 가능) 이 말은 익명 함수에서 배운 것처럼 메모리 관리가 효율적이다. 화살표 함수가 한 줄인 경우는 아래와 같이 더 짧게 사용하는 것도 가능하다.

// 화살표함수
const hanpy3 = () => console.log("hi");

 

 

 

---

 

화살표 함수에서의 this

다음의 예시를 통해서 위의 이해를 높여보자. 우선은 일반 함수로 확인을 해보자.

target = 'global hanpy';

function test(){
	console.log(this.target);
}

const object = {
	target: 'local hanpy',
	action: test
}


object.action();

 

위의 결괏값은 local hanpy가 발생한다.(첫 번째 줄의 target은 전역 변수로 설정을 한 것이다.) 위의 this가 object를 가리키므로, 상식적인 코드가 출력된다. 반대로 아래와 같이 화살표 함수로 만들자.

 

 

target = 'global hanpy';

const test = () => {
	console.log(this.target);
}

const object = {
	target: 'local hanpy',
	action: test
}


object.action();

 

위의 결괏값은 global hanpy가 발생한다. 화살표 함수의 경우는 내부의 this는 선언한 시점에서 호출한다. 따라서 target 변수는 전역 설정한 값들이 들어오게 되는 것이다.

 

 

---

함수의 메모리 관점

익명함수의 경우는 다시 실행이 불가능한 일회성 함수이기 때문에 사용하는 그 시점에서만 메모리를 차지하고 없어지기 때문에, 메모리를 절약할 수 있다. 그렇다고 반드시 익명함수가 메모리를 절약한다고는 할 수 없다. 왜냐하면, 버튼 이벤트에 익명함수를 변수에 지정하여 사용한다고 하자. 일반 함수의 경우에는 참조값이 생겨 브러우저 힙 메모리에 하나만 저장이 되지만, 익명함수의 경우에는 매 경우 새로운 메모리를 만들기 때문에 메모리 누수의 위험이 있다고 할 수 있다. 따라서 반드시 익명함수만 쓴다고 좋은 것은 없으며, 상황에 따라 사용하면 좋을 것 같다.

 

 

 

정리

사실 화살표 함수와 람다 함수의 사용은 메모리 관리라고 할 수 있다. 함수의 사용방법에 따라 1회성 함수인지, 재활용하는지에 대한 결정을 하고 사용을 할 수 있다면, 조금 더 좋은 개발자로 다가갈 수 있을 것이다.