[Javascript]화살표 함수(Arrow Function) 사용하기

화살표 함수(Arrow Function) 사용하기

 이번 포스팅에서 다룰 화살표 함수(Arrow Function)는 ES6부터 함수를 만들 수 있는 새로운 문법으로 등장했습니다. 이러한 문법이 왜 등장하였고, 원래의 함수 생성 방식과 어떤 점이 다른지에 대해 알아보도록 하겠습니다.

 

일반 함수 생성 방식

//1번
function moonstar() { 
  console.log("티스토리 블로그입니다.") 
};

//2번
var moonstar = function() {console.log("티스토리 블로그입니다.")}

 

화살표 함수(Arrow Function) 사용

var moonstar = () => console.log("티스토리 블로그입니다.");

  화살표 함수(Arrow Function)를 사용하면 기존의 함수 생성 방식보다 눈으로 보기에도 훨씬 간결해 보입니다. 그렇다면 여기서 한 가지 궁금한 건 모든 function으로 생성된 함수를 화살표 함수(Arrow Function)로 만들면 되지 않나? 사실 그렇지는 않습니다. 이것에 대한 이해를 위해서는 function 문법을 사용하는 이유를 알아야 합니다.

 

일반 함수를 사용하는 이유

• 재사용성 : 함수를 선언해놓으면 언제든지 필요할 때 호출하여 재사용이 가능하다.
• 가독성 : 정의가 잘 된 함수일수록 함수명만으로도 기능을 알 수 있으며, 함수를 사용함으로써 간단한 코드 구현이 가능하다.
• 모듈화 : 대규모의 프로젝트 진행 시 기능별로 구성하여, 프로그램의 문제 발생 시 유지보수가 용이하다.

---

화살표 함수(Arrow Function) 특징

• this를 가지지 않는다 - 외부의 this를 그대로 화살표 함수 내부에서 사용 가능함.

var moonstar = {
  blog : () => { console.log(this) }
}

moonstar.blog()

//결과 = window

• arguments 사용할 수 없다.

const moonstar = () => {
	try{
    	const args = arguments;
    }catch(err){
    	console.log("argumentsX");
    }
}
moonstar(1, 2); 
//결과 : argumentsX

• 인스턴스를 생성할 수 없다.

var moonstar = () => {};
var blog = new moonstar(); // TypeError: moonstar is not a constructor

---

화살표 함수는 일반 함수의 대체 문법이 아니다. 따라서 각각의 함수를 적합한 위치에 사용해야 할 것이다.