[JavaScript] 기존 function과 Arrow function 의 차이

 

기존의 함수 표현식  function(){}  보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다.

바로 화살표 함수(arrow function)  ()=>{}  를 사용하는 것입니다.

 

 

 

기존 함수 사용방법

function fc1(){ // 함수 사용 방법1
}

var fc2 = function(){ // 함수 사용 방법2
}

fc1(); // 함수 실행
fc2(); // 함수 실행

 

화살표 함수(Arrow Function)

var fc = () => { // arrow function
}

fc(); // 함수 실행

 

 

 

기존 함수만 사용하던 개발자들에게는 화살표 함수가 익숙치않아 새로운 프로젝트를 진행하더라도 기존의 함수 사용방식으로 개발을 지속하는 경우가 많습니다. 하지만 화살표 함수가 가진 장점들이 있습니다.

 

함수를 만드는 이유

1. 코드들을 기능으로 묶고 축약할 때 사용
2. 입출력을 위한 함수를 만들 때 사용

 

Arrow Function의 장점

1. 입출력을 위한 간단한 함수를 만들 때 보기 쉽다.
2. 소괄호를 생략 가능하다.

 

// num값을 넣으면 num+10을 출력해주는 함수

var fc = function(num){
	num + 10;
};

fc(5); //15


// 화살표 함수 방법
var fc = num => num + 10; // 한줄의 코드로 만들 수 있으며 이 때 소괄호의 생략이 가능하다

fc(5); // 15


---------------------------------


// forEach 예시
// 기존 방법
[1, 2, 3, 4].forEach(function(num){
	console.log(num);
});


// 화살표 함수 방법
[1, 2, 3, 4].forEach(num => console.log(num));


---------------------------------


// eventListner에서 화살표 함수
document.getElementById('btn').addEventListener('click', (e) => {
	e.currentTarget;
});

// Object안에서의 화살표 함수
var Obj = {
	fc : () => {
    	return;
    }
}