[Javascript] 화살표 함수(=>)

화살표 함수는 ES6문법이다. function키워드를 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있다. 화살표 함수는 항상 익명이기 때문에 메서드가 아닌 함수에 사용하는 것이 적절하다. 또한 자신의 this, arguments, super 또는 new.target을 바인딩하지 않는다. 그래서 생성자로서 사용할 수 없다.

function키워드는 2가지 방법으로 함수를 생성할 수 있다.

// 함수 선언(Function Declaration)
function sayHi(){ 
  console.log("hi!");
}

// 함수 표현(Function Expression)
var sayHi2 = function(){
  console.log("hi!");
};

이 중 함수 표현 방법으로 함수를 생성할 때 화살표 함수를 사용하여 함수를 생성할 수 있다.

var sayHi2 = () => console.log("hi");

이와 같이 화살표함수는 무명 함수를 생성하는 방법 중의 하나로 기본형태는 (파라미터1, 파라미터2, ....) => {함수내용} 입니다.

1. 문법

기본문법

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression 
// 다음과 동일함: => { return expression; } 

// 매개변수가 하나뿐인 경우 괄호는 선택사항: 
(singleParam) => { statements } 
singleParam => { statements } 

// 매개변수가 없는 함수는 괄호가 필요: 
() => { statements }

// 함수 몸체 지정 방법
x => { return x*x }  //single line block
x => x*x            
// 함수 몸체가 한줄의 구문이라면 중괄호 생략 가능하며, 암묵적으로 return된다.

고급문법

// 객체 리터럴 식을 반환하는 본문(body)을 괄호 속에 넣음
params => ({foo: bar})

// 나머지 매개변수 및 기본 매개변수가 지원됨
(param1, param2, ...rest) => {statements}
(param1 = defaultValue1, param2, ..., paramN = defaultValueN) => {statements}

// 매개변수 목록 내 구조분해도 지원됨
var f = ([a, b] = [1, 2], {x: c} = {x: a+b}) => a + b + c;
f();  //6

2. 화살표 함수의 특징

코드의 간결성

// ES5버전 이전
setTimeout(function() {
  console.log("1");
}, 1000);

// ES6버전 이후
setTimeout(() => {
  console.log("2");
}, 2000)

콜백함수의 단점 중 하나로 인자로 들어가는 함수 내용이 들어가면서 코드가 지저분해진다는 단점이 있다. 화살표함수는 이러한 단점을 해소시켜준다.

//ES5버전 이전
var arr1 = [1, 2, 3, 4, 5, 6].map(function(val){
  return val * 2;
})
console.log(arr1);  //[ 2, 4, 6, 8, 10, 12 ]

//ES6버전 이후
let arr2 = [1, 2, 3, 4, 5, 6].map((val) => val*2);
console.log(arr2);  //[ 2, 4, 6, 8, 10, 12 ]
                                

위와 같이 return과 함께 적었던 반환문을 화살표함수를 사용하면 아주 간결하게 표현할 수 있다.

화살표함수와 this

함수가 어떻게 호출되었는지에 따라 바인딩할 객체가 결정되는 일반함수와 달리 화살표함수의 this는 화살표함수가 호출되는 시점과는 무관하게 선언되는 시점에 결정되며 언제나 상위 스코프의 this를 가리킨다.

왜냐하면, 화살표함수에는 this와 argument가 없기 때문이다.
그래서 일반적으로 this가 개입되는 경우라면 일반함수를 사용한다.

var myObj = { 
  myText: "hi!",
  myFunc2: () => {
    console.log(this.myText);
  }
};

myObj.myFunc2(); // undefined
//상위 스코프에 변수 myText가 존재하지 않으므로 undefined반환한다.

위 예제에서 콜백함수로 화살표함수를 사용하면 this는 상위 스코프인 전역스코프 또는 window객체가 된다.

window.myText="banana";
var myObj = { 
  myText: "hi!",
  myFunc2: () => {
    console.log(this.myText);
  }
};

myObj.myFunc2(); // "banana"

따라서 window객체에 myText의 값을 할당해주면 this는 myObj객체의 상위스코프의 this인 window객체가 된다.

---

참고사이트
https://beomy.tistory.com/19
https://www.a-mean-blog.com/ko/blog/%ED%86%A0%EB%A7%89%EA%B8%80/_/Javascript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-Arrow-Functions
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://velog.io/@grinding_hannah/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C%ED%95%A8%EC%88%98arrow-function-%EC%95%8C%EA%B8%B0