[JavaScript] Arrow function expressions 화살표 함수

MDN문서 기반으로 공부한 내용 중 이해한 부분을 정리한 포스트입니다.

Arrow Function Expression

✿  ECMAScript 6 이후 등장

      ❀  ES6는 2015년에 개정된 문법(ES6는 매년 6월에 개정되고 있음, 현재 ES11까지 나옴)

      ❀  ES6는 현재 자바스크립트 프로그래밍의 이해에 중요한 요소가 되기 때문에 계속 언급될 예정
           (ES6에서 그 전까지 문제가 되었던 부분들이 해결되었고, 기능들이 상당히 추가되었다.)

---

기존 함수 표현에 비해 구문이 짧아질 수 있다.

const number = [1,2,3,4,5,6,7,8,9,10]

//1) 기존 function 방식
number.filter(function(el) {
  return el % 2
}); 
//[1 ,3, 5, 7, 9]

//2) 화살표 함수 사용
number.filter(el => el % 2)
//[1, 3, 5, 7, 9]

---

항상 익명함수로 쓰인다. (함수 선언식 X)

//1) 매개변수가 없을 경우, 괄호가 반드시 필요, 그래야 함수라는걸 알릴 수 있음
() => { statements }

//2) 매개변수가 한 개인 경우, 괄호는 선택사항
(a) => { statements }
a => { statements }

//3) 매개변수가 두개 이상인 경우
(a, b, c) => { statements }

//4) return 사용
a => { return a * a }
a => a * a //중괄호를 생략하면 화살표 함수가 return을 포함하게 되므로, return 을 사용하면 syntax error 발생
a => ({a: 1}) //하지만 반환하는게 객체라면 반드시 괄호를 사용

//5) rest parameter, destructuring assignment, default parameter 지원
(a, b, ...c) => { statements }
let foo = ([a,b] = [1,2], {x: c} = {x: a+b}) => a + b + c; 
foo(); //6
(a, b = 0) => { statements }
['JavaScript', 'is', 'a', 'programming', 'language'].map(({length}) => length);
//[10, 2, 1, 11, 8]

---

this 를 바인딩 하지 않는다.

function Clock() {
  this.time = 0;
  
  setInterval(function tiktok() {
    this.time++;
  }, 1000);
}
let clock = new Clock();
clock.time = 0;
//Person() 생성자에 정의된 this와 tiktik() 함수의 this(전역 객체로 정의)는 다르기 때문에 실행되지 않음

function Clock2() {
  let realThis = this;
  realThis.time = 0;
  
  setInterval(function tiktok() {
    realThis.time++;
  }, 1000);
}

let clock2 = new Clock2();
clock2.time = //1초에 하나씩 증가함
//Clock2에서 정의한 this를 함수 안 변수에 할당하여 해결

function Clock3() {
  this.time = 0;
  
  setInterval(() => {
    this.time++; //얘는 Clock3 객체의 this
  }, 1000);
}
//화살표 함수는 자신을 둘러싸는 lexical scope의 this를 사용한다. 
//현재 범위에서 this가 없을 때, 바로 바깥 범위에서 검색한다.
//따라서 위의 Clock3()은 setInterval을 포함하는 범위기 때문에 this 값이 동일

---

function Hello(msg) {
  this.msg = msg;
}

Hello.prototype.nameArray = function(arr) {
  return arr.map(function(el) {
  	return this.msg + ' ' + el;
  });
}

let hi = new Hello('Hey');
hi.nameArray(['kko', 'Park']); //["undefiend kko", "undefiend Park"]

//1) this 따로 선언해주기
function Hello1(msg) {
  this.msg = msg;
}

Hello1.prototype.nameArray = function(arr) {
  let that = this;
  return arr.map(function (x) {
    return that.msg + ' ' + x;
  });
};

let hi1 = new Hello1('Hey');
hi1.nameArray(['kko', 'Park']); //["Hey kko", "Hey Park"]

//2)map에 This 넣기
function Hello2(msg) {
  this.msg = msg;
}

Hello2.prototype.nameArray = function(arr) {
  return arr.map(function (x) {
    return this.msg + ' ' + x;
  }, this);
};

let hi2 = new Hello2('Hey');
hi2.nameArray(['kko', 'Park']); //["Hey kko", "Hey Park"]

//3)Function.prototype.bind()로 this 바인딩
function Hello3(msg) {
  this.msg = msg;
}

Hello3.prototype.nameArray = function(arr) {
  return arr.map(function (x) {
    return this.msg + ' ' + x;
  }.bind(this));
};

let hi3 = new Hello3('Hey');
hi3.nameArray(['kko', 'Park']); //["Hey kko", "Hey Park"]

//4)화살표 함수로 this 가져오기 
function Hello4(msg) {
  this.msg = msg;
}

Hello4.prototype.nameArray = function(arr) {
//위에서 언급했듯 여기서의 this는 nameArray 메소드 내의 this를 가리킨다.
  return arr.map(x => this.msg + ' '+  x)
};

let hi4 = new Hello4('Hey');
hi4.nameArray(['kko', 'Park']); //["Hey kko", "Hey Park"]