Arrow function을 왜,언제,어떻게 쓰는가?

ES6 이후부터는 자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했다.

arrow function이라는 문법인데 이걸 사용하면 함수를 만들 수 있다.

 

 

기존 자바스크립트에서 함수를 만드는 방법

// 1. 함수 선언문
function 함수1() {
  // 코드~
}

// 2. 함수 표현식
let 함수2 = function () {
  // 코드~
};

 

 

Arrow function 문법으로 함수를 만드는 방법

let 함수3 = () => {
  // 코드~
};

function이라는 긴 키워드 대신에 => 이런 화살표를 사용해서 함수를 만들어내는 문법이다.

기존에 함수를 만드는 방법이 있는데 왜 Arrow function이라는 문법을 쓰는걸까?

 

 

Arrow function 을 쓰는 이유

1. 함수 본연의 입출력기능을 아주 직관적으로 잘 표현한다.

 

프로그래밍할 때 function 문법은 왜 사용하는가?

a. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 사용 (묶어두면 나중에 재사용하기도 편함)

b. 입출력기능을 만들 때 사용

그리고 Arrow function을 사용하면 함수 본연의 입출력기능을 아주 직관적으로 잘 표현한다.

 

입출력기능이란?

함수는 수학에서 온 개념이다.  원래 함수는 숫자를 집어넣으면 뭔가 다른 숫자를 배출하는 블랙박스같은 역할을 한다.

위 그림처럼 input을 집어넣으면 output을 출력해주는 박스가 바로 함수이다.

 

그럼 프로그래밍에선 함수를 어떻게 만들까?

function add(x){
  return x + 2
}

add(2);

이런 문법을 이용해서 만들어 사용한다.

함수의 소괄호안에는 input역할을 하는 파라미터(매개변수)가 있고

함수내에 return이라는 것은 output역할을 하는 키워드이다. 

그럼 이제 add(2); 이렇게 사용하면 4가 그 자리에 남는것이다.

소괄호에 뭔가 넣으면 return을 이용해 뭔가 뿜어내는 것 

이게 바로 함수의 입출력 기능이다.

 

 

그래서 Arrow function을 쓰면 입출력기능을 아주 직관적으로 잘 표현한다.

let 두배만들기 = (x) => { return x * 2 }

console.log(두배만들기(4)); // 8
console.log(두배만들기(8)); // 16

 

직접 기존 함수와 비교하여 뭐가 입출력기능을 더 직관적으로 잘 표현하는지 비교해봐라. 당연히 Arrow function일 것이다.

이게 Arrow function을 쓰는 첫번째 이유이다.

 

 

2. 파라미터 1개면 소괄호 생략 가능

let 두배만들기 = x => { return x * 2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

 

 

 

3. 중괄호 다음에 return 이면 중괄호 return 생략 가능

let 두배만들기 = x => x * 2 ;

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

생략하니 이제 x가 어떻게 변하는 함수인지 입출력기능이 더욱 더 직관적으로 표현해준다.  

 

 

4. 코드 한줄이면 중괄호도 생략 가능

굳이 return문이 있지 않아도 코드가 한줄이면 중괄호가 생략 가능하다.

[1, 2, 3, 4].forEach(a => console.log(a));

 

 

 

⭐️ 5. Arrow function을 쓰면 내부에서 this 값을 쓸 때 밖에 있던 this값을 그대로 사용한다.

2023.03.27 - [Front end/JavaScript] - 자바스크립트 this (2) 이 포스팅을 참고하면 

this값이 함수가 쓰인 위치에 따라서 내부의 this 값이 변한다고 했었다.

그러나 Arrow function은 어디서 쓰든간에 내부의 this 값을 변화시키지 않는다.

그러니까 바깥에 있던 this의 값을 내부에서 그대로 사용하는 함수가 바로 Arrow function 이다.

이게 5번째 장점이자 Arrow function을 쓰는 가장 큰 이유이다.

 

 

Arrow function 내부의 this 예제 1

(1)
document.getElementById('버튼').addEventListener('click', function (e) {
  console.log(this); // <button id="버튼">버튼</button>
});

(2)
document.getElementById('버튼').addEventListener('click', (e) => {
  console.log(this); // window
});

(1) (2) 코드를 비교해보면 function 키워드와 => 키워드 차이 밖에 없다.

arrow function을 사용한 내부의 this 값은 바깥에 있던 this값을 그대로 사용해서 window가 출력되는걸 볼 수 있다. 

 

 

Arrow function 내부의 this 예제 2

(1)
let obj1 = {
  함수: function () {
    console.log(this); // {함수: f}
  },
};

obj1.함수();

(2)
let obj2 = {
  함수: () => {
    console.log(this); // window
  },
};

obj2.함수();

(1) (2) 코드를 비교해보면 function 키워드와 => 키워드 차이 밖에 없다.

obj1의 메소드 안에서의 this는 obj1 을 가르키고

obj2의 메소드 안에서의 this는 바깥에 있던 this값을 내부에서 그대로 사용하니까 window가 출력되는걸 볼 수 있다. (obj2의 바깥에 있던 this는 window이다.)

 

 

 

 

🌈 정리 

- Arrow function을 사용하면 바깥에 있던 this값을 내부에서 그대로 사용한다.

- this값은 함수를 만나면 항상 변한다.

- function 키워드를 쓴 함수와 arrow function은 완전 같지 않다. 

- Arrow function은 함수 본연의 입출력기능을 직관적으로 잘 표현한다.

 

why?

- 1. 함수 본연의 기능인 입출력기능을 직관적으로 잘 표현한다.

- 2. 소괄호 , 중괄호 , return 생략가능 

- 3. ⭐️ 이전 this값 재사용 가능!

 

how?

- let 작명 = () => {};

 

when?

- 이전 this값을 그대로 재사용 하고 싶을 때 쓰면 Good!