자바스크립트 화살표함수 정리

매번 함수를 사용할때 function 함수명 () {}; 이런식으로 사용했었는데, 배열메서드라던지 리액트를 공부할때 화살표 함수도 자주 사용하게 되어서 한번 정리해놓을 필요가 있다고 생각이 들었다.

• 화살표 함수는 기존의 함수 정의 방식보다 간편하게 작성이 가능한 함수다.

• 매개변수가 여러 개인 경우 소괄호 () 안에 매개변수를 선언한다.

const multiply = (x, y) => x * y;
multiply(2, 3); //6

• 매개변수가 한 개인 경우 소괄호 ()를 생략할 수 있다.

const arrow = x => {...};

• 매개변수가 없는 경우 소괄호 () 를 생략할 수 없다.

const arrow = () => {...};

• 함수 안의 내용이 하나의 문으로 구성이 된다면 중괄호 {}를 생략할 수 있다. 함수 안의 문이 값으로 평가 될 수 있는 표현식인 문이라면 암묵적으로 반환된다.

const power = x => x * 2;
power(2) // 4

//밑의 코드와 동일하다.
const power = x => { return x * 2};

이 규칙때문에 좀 헷갈렸는데 1개의 표현식인 문은 return을 안써주어도 되고, 2개이상부터는 return값을 꼭 명시해주어야 한다. 1개의 표현식인 문을 적을 일이 많지는 않겠지만 오류를 방지하기 위해서 () => { return 값}; 을 고정적으로 사용해야겠다는 생각을 했다.

• 화살표 함수도 일급 객체이므로 map, filter, reduce 같은 배열 고차 함수에 인수로 전달할 수 있다.

const array = [1, 2, 3, 4, 5];

const newArr = array.map((i) => {
  return i * 2;
});

console.log(newArr); //[2, 4, 6, 8, 10]

• 화살표 함수는 this 바인딩을 갖지 않기때문에, 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다.

function Circle (radius) {
    this.radius = radius;
    console.log(this); // Circle {radius: 5}
VM974:10 10
  this.getDiameter = () => {
        return 2 * this.radius;
    };
}

const Circle1 = new Circle(5);
console.log(Circle1.getDiameter(5)); // 10

getDiameter()에 this는 생성자 Circle함수 this에 바인딩 된걸 볼 수 있다.

그렇기 때문에 화살표 함수로 메서드를 정의하는 것은 피해야한다.

• addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리키게 된다.

// 안좋은 예

const button = document.getElementById('myButton');
 
button.addEventListener('click', () => {
  console.log(this === window); // => true, this가 window를 가리키게 되어서 혼동이 일어날 수 있음
  this.innerHTML = 'Clicked button';
});

// 좋은 예

const button = document.getElementById('myButton');
 
button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});