리액트 ES6 문법 - 화살표 함수

아래 책을 읽고 정리한 내용입니다.

https://m.yes24.com/Goods/Detail/87631428

Do it! 리액트 프로그래밍 정석 - 예스24

화살표 함수

기본 자바스크립트의 함수 사용 방법 알아보기

function add(first, second) {
  return first + second;
}
// typeof add === 'function'

var add = function(first, second) {
  return first + second;
};
// typeof add === 'function'

• typeof 비교시 true BUT 위는 함수 이름이 있고 밑에는 함수 이름이 없다!
  • 크롬 브라우저 콘솔창에는 다르게 나온다! 즉 밑에는 익명 함수라는 소리

ES6의 화살표 함수 사용 방법 알아보기

var add = (first, second) => {
	return first + second;
};
var add = (first, second) => first + second;
var addAndMultiple = (first, second) => ({ add: first + second, multiply: first * second});

• 결괏값을 바로 반환하는 경우에는 중괄호 생략 가능!
• 반환값이 객체라면 괄호로 결괏값을 감싸 간결하게 표현 가능

function addNumber(num) {
  return function(value) {
    return num + value;
  };
}
// 화살표 함수로 변환한 예
var addNumber = num => value => num + value;

var addTwo = addNumber(2);
var result = addTwo(4); // 6

• 화살표 함수를 사용하여 간결한 코드로 함수를 반환할 수 있음
• 커링에서 사용되는 함수를 반환할 때 계단형 함수 선언과 같은 구조가 만들어지지 않게 해준다는 장점!
  • 계단형 함수 선언이란?
    • 커링을 사용하면 함수의 인자를 하나씩 받는 중첩된 형태로 함수를 선언하게 돼서 계단 형태가 됨

    / 커링을 사용하지 않은 함수
    function add(x, y, z) {
      return x + y + z;
    }
    
    // 커링을 사용한 함수
    function curryAdd(x) {
      return function(y) {
        return function(z) {
          return x + y + z;
        };
      };
    }
    
    // 사용 예시
    console.log(add(1, 2, 3));           // 6
    console.log(curryAdd(1)(2)(3));      // 6
    

// bind함수를 통해 this scope를 전달한 예
class MyClass {
  value = 10;
  constructor() {
    var addThis2 = function(first, second) {
      return this.value + first + second;
    }.bind(this);
    var addThis3 = (first, second) => this.value + first + second;
  }
}

• 콜백 함수의 this 범위로 생기는 오류를 피하기 위해 bind함수를 쓰기도 함!
  • addThis3은 화살표 함수이므로 this는 가까운 객체를 가르킴