[JavaScript] ECMA6, normal function vs Arrow function 비교

 

 

ecma6에서는 함수를 사용하는 방법이 추가되었습니다.

화살표를 사용하는 방법인데 코드의 길이도 짧아지고 개인적으로는 직관적이라서 애용하고 있습니다.

 

 

바로 예제 들어가겠습니다.

let cnt = 1;

// 1. 기본 작성법
let function_normal = function(num) {
	let result = num * cnt;
	return result;
}

// 2. arrow function 작성법
let function_arrow = (num) => {
	let result = num * cnt;
	return result;
}

// 3. arrow function을 더 짧게 작성
let function_arrow_short = (num) => cnt*num;

console.log('normal function > ' + function_normal(2))
console.log('Arrow function > ' + function_arrow(2))
console.log('Arrow function short > ' + function_arrow_short(2))

파라미터의 값과 cnt 변수를 곱해서 리턴하는 단순한 함수입니다.

저는 3가지 방법으로 만들어 보았는데

 

1. 기본적인 function 작성법

2. arrow function 작성법

3. arrow function을 더 짧게 작성

 

3가지 방법으로 작성을 해봤습니다.

실제로 동작을 시켜보시면 같은 결과값을 보여줍니다.

코드의 길이로 보면 3번이 압도적으로 짧고 기본 작성법인 1번에 비해 2번도 짧아 진 것을 확인 하실 수 있습니다.

위의 예시를 보시고 앞으로 더 깔끔한 코드를 원하신다면 arrow function을 활용해 보시면 어떠실까요