자바스크립트 람다식(화살표 함수) 사용 방법 주의점

2023.08.09

자바스크립트 ES6에서 도입된 화살표(ARROW) 함수가 있습니다.

흔히 람다식이라고 합니다.

람다식 함수를 사용할 때 주의할 점이 있습니다.

일반적인 방법으로 작성한 함수와 람다식으로 작성한 함수를 비교해보면서 주의점을 보겠습니다.

 

일반 함수와 람다식 함수

람다식을 몰라도 누구나 사용할 수 있는 일반적인 함수와 람다식 함수를 비교해서 작성해보면 다음과 같습니다.

// 일반 함수
let normalFunc = function(x){
	console.log(x);
}

// 람다식 함수
let arrowFunc = (y) => {
	console.log(y);
}

normalFunc('일반 함수');
arrowFunc('람다식 함수');

 

결과

일반 함수
람다식 함수

 

normalFunc 함수는 기본적인 방법으로 작성한 함수이고 arrowFunc 함수는 람다식으로 작성했습니다.

람다식 함수를 사용하는 이유는 간략하게 작성할 수 있기 때문입니다.

위 예제에서 작성한 람다식 함수를 더욱더 간략하게 작성할 수도 있습니다.

 

람다식 생략 예제

let arrowFunc = (y) => console.log(y);

 

함수에서 단순히 return만 있는 경우라면 람다식을 사용해 간단하게 작성할 수 있고 소스도 보기 편해지기 때문에 많이 사용됩니다.

하지만 람다식은 소스를 간략하게, 짧게 바꾸기 위해서 사용하는 것은 위험할 수도 있습니다.

이유는 this 값을 고정하기 때문입니다.

자바스크립트에서 기본적을 this를 사용하면 자기 자신을 의미합니다.

 

일반 함수 this 예제

param = 'global param';

function printParam(){
	console.log(this.param);
}

let object = {
	param: 'object param',
	func: printParam
}
let object2 = {
	param: 'object2 param',
	func: printParam
}

object.func();
object2.func();

 

결과

object param
object2 param

 

결과를 보면 printParam 함수 안에서 사용하고 있는 this.param 값은 함수를 호출하고 있는 object와 object2 내에서 지정한 값을 출력하고 있습니다.

this 값은 함수를 호출한 곳에서 저장한 값이 됩니다.

printParam 함수를 정의한 지점에서는 this는 어떤 값인지 정해지지 않았다고 볼 수 있습니다.

이번에는 printParam 함수를 람다식으로 변경해서 실행해보겠습니다.

 

람다식 함수 this 예제

param = 'global param';

let printParam = () => {
	console.log(this.param);
}

let object = {
	param: 'object param',
	func: printParam
}
let object2 = {
	param: 'object2 param',
	func: printParam
}

object.func();
object2.func();

 

결과

global param
global param

 

결과 값이 달라졌습니다.

출력된 값은 제일 처음 선언한 변수 param 값이 출력됐습니다.

함수를 람다식으로 변경한 것뿐 다른 곳은 변경된 곳이 없습니다.

일반 함수에서 람다식으로 값을 변경했을때 결과 값이 달라진 이유는, 람다식 함수로 선언한 함수는, 선언한 시점에서 this를 확보해버립니다.

 

보충 설명

// JavaScript에서 var나 let을 사용하지 않고 선언한 변수는 전역 변수됨
param = 'global param';

// 함수를 호출한 오브젝트가 존재하지 않는 상태에서는 this는 전역변수를 가르킴
// printParam 함수 안의 this도 전역변수를 가르키게됨.
console.log(this.param);

 

따라서 람다식 함수로 선언한 printParam 함수는 선언된 시점에서는 this.param에 전역 변수인 global param이라는 문자열이 저장된 변수 param 값을 확보해둔 상태가 됩니다.

그리고 확보한 값은 고정으로 설정되어 변경되지 않습니다.

그렇기 때문에 다른 곳에서 printParam 함수를 호출해도 처음에 설정된 값이 계속해서 출력되게 됩니다.

 

정리

단순히 소스를 간략하게 정리하기 위해 기존에 작성한 함수를 람다식으로 변경하는 것은 위험할 수 있습니다.

함수 안에서 this를 사용하고 있는지 확인을 해야 합니다.

자바스크립트에서 람다식 함수는 지금까지 사용해 왔던 함수를 단순히 간단하게 작성해주는 기능이 아니라, 선언 시 this를 고정하는 기능을 가지고 있습니다. 

 

댓글