자바스크립트에서 함수를 생성하기 위해서는 주로 function
키워드를 사용합니다.
function
키워드는 2가지 방법으로 함수를 생성할 수 있는데요,
// 함수 선언(Function Declaration) function sayHi(){ console.log("hi!"); } // 함수 표현(Function Expression) var sayHi2 = function(){ console.log("hi!"); };
이 중 함수 표현은 무명(anonymous:이름이 없음) 함수를 생성한 후 변수에 담는 방식입니다.
이 함수 표현 방법으로 함수를 생성할 때 화살표 함수를 사용하여 함수를 생성할 수 있습니다.
위 sayHi2를 화살표 함수로 생성하면 아래와 같습니다.
var sayHi2 = () => console.log("hi!");
이와 같이 화살표 함수는 무명 함수를 생성하는 방법 중의 하나로 기본 형태는 (파라메터1, 파라메터2,...) => { 함수내용 }
입니다.
화살표 함수의 형태상 특징은 다음과 같습니다.
{}
를 사용하지 않아도 됩니다.{}
가 없는 경우 해당 함수의 실행결과를 자동으로 이천 합니다.return
을 사용해서 결과를 리턴합니다.()
를 생략할 수 있습니다. (파라메터가 없는 경우에는 위의 sayHi2의 경우 처럼 파라메터 없이 빈 ()
를 표시하여야 합니다.)위 내용을 사용해서 함수 표현과 화살표 함수를 비교해 봅시다.
// 함수 표현 filteredArray = myArray.filter(function(element){ return element > 2; }); // 화살표 함수 filteredArray = myArray.filter(element => element > 2);
동일한 역할을 하는 코드지만 화살표 함수로 더 깔끔합니다.
화살표함수는 단순히 코드 수를 줄이는 역할이 아니라 일반 함수와 비교하여 this
가 바인딩하지 않는다는 기능상의 차이가 있습니다.
var myObj = { myText: "hi!", myFunc: function(){ setTimeout(function(){ console.log(this.myText); }, 1000) }, myFunc2: function(){ setTimeout(()=>console.log(this.myText), 1000); } }; myObj.myFunc(); // undefined myObj.myFunc2(); // "hi!"
function
으로 생성된 무명 함수가 들어갑니다. 이 경우에 this
는 새로 생성된 무명함수가 되어 this.myText는 undefined가 됩니다. 하지만 myFunc2처럼 화살표 함수를 사용하면 this
는 그대로 myObj로 남게 되고 myObj.myText 역시 "hi!"로 남게 됩니다. 이처럼 객체에서 무명 함수를 callback으로 사용하는 경우this
로 인해 헷갈리는 부분이 줄어들게 되었습니다.
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기