[react,javascript] 화살표 함수를 알아보자 (arrow function)

함수를 간단하게 

 

써보자

 

---

화살표 함수(arrow function)은 ES6에 추가된 표현식을 사용하는 함수로 화살표 기로 => 를 사용한다

 

기존 함수 표현법:

function add(first, second){
  return first + second;
}

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

둘 다 add 라는 함수 명이며

 

first 와 second를 더한 값을 반환 한다.

 

---

 

 

화살표 함수는 익명 함수를 선언하여 변수에 대입하는 방법과 유사하다

 

let add = (first,second) => {    // () 안에 파라미터
  return first + second;         // first 더하기 second 바환
};

let add = (first,second) => first + second;   //바로 반환

let addAndMultiple = (first,second) => ({ add: first + second, multiply: first * second});
                                              //  객체 반환

 

쉽게 말해 () 안에는 기존 함수에서 사용하던 파라미터를,  => 다음 {} 안에는 return하고 싶은 내용을 적으면 된다

 

 

'계단형 함수 선언'과 같은 구조가 만들어지지 않게 해 줄 수 있다

function addNumber(num) {
  return function (value) {
    return num+value;
  };
}

// 

let addNumber = num => value => num + value;   

위의 함수를 아래의 함수로 간결하게 표현 할 수 있다

 

---

객체의 메소드 형태로 호출되는 경우 this 는 객체 인스턴스를 참조한다

 

화살표 함수는 콜백 함수의 this 범위로 생기는 오류를 피하기 위해 bind() 함수를 사용하여 this객체 전달하는 과정을 포함 한다

 

쉽게 말 해 this.bind 귀찮게 쓰지 않아도 된다

 

class ABC {
  constructor() {
    let add1= function (first, second) {
      return first + second;
    }.bind(this)                                //bind를 해줬다
    
    let add2 = (first,second) => first+second;  //arrow는 편하게 쓰면 됨
  }
}



ex)
this.handleClickIncrement = this.handleClickIncrement.bind(this);

 

---

개꿀

 

 

 

 

 

 

참고: '실리콘밸리개발방법으로배우는리액트프로그래밍정석'