그냥 함수? 화살표 함수? 뭐가 다를까

오늘 조사를 해볼 내용은 ES6 문법에 나온 arrow function이 기존에 있던 일반 함수인 function과

어떠한 점이 다를지 궁금해서 블로그로 작성을 하게 되었습니다. 

지금도 제 주변에서 개발하는 친구들을 보면 그냥 function을 선호하는 경우도 있고 화살표 함수를

사용하는 친구들도 많습니다. 대체 어떤 것이 다르고 개발자들은 어떤 함수 표현법을 더 선호할까요?

함수 선언법

화살표 함수는 기존에 있던 일반 함수에 비해서 더 단순하고 간결하게 작성하는 문법입니다.
작성 방법은 아래와 같은 방법으로 사용합니다. 

화살표 함수는 일반 함수에 있는 function이라는 구문과 다르게 익명으로 사용을 할 수 있습니다.
즉 function이라는 이름 없이 선언된 함수를 할당하면 원하는 곳에서 호출이 가능하다는 것입니다!!

 

그러면 기존에 있던 일반 함수인 function은 어떨까요?

많이들 사용을 해봤을 것 같은데 아주 기본적인 함수 선언 방법이죠??
네 바로 function이라는 키워드를 반드시 붙혀야 사용이 가능한 방법입니다.

 

화살표 함수

화살표 함수는 (Arrow Function)은 ES6 문법에서 처음 소개가 된 함수 선언 방법입니다.
위에서 이야기를 한대로 이전의 함수 표현식보다 더 간결한 문법으로 작성하게 해 줍니다.

 

일반 함수와 화살표 함수의 가장 큰 차이점은 무엇일까?

가장 큰 차이점은 arguments와 가변 인자라는 것입니다.

 

 

그러면 예시와 함께 설명을 해보겠습니다.

function Taerang(){
   console.log(arguments);
}

Taerang(1,2,3);

자 이렇게 다른 함수 밖에 부분에서 Taerang이라는 함수를 호출하면 어떻게 될까요??

 

함수에서 매개변수를 따로 정의를 해주지 않아도 함수 내에서 arguments라는 변수를 전달받습니다.

자 보이시나요?? 위와 같이 선언을 할 경우에는 저렇게 배열 형태로 담겨있는 것을 알 수 있습니다.
arugument 변수는 Taerang() 함수가 전달받은 인자를 담고 있는 배열 형태의 객체인 것을 알 수 있습니다.

 

하. 지. 만.

화살표 함수는 arguments라는 변수를 전달받지 못합니다.

그러면 화살표 함수는 가변 인자를 처리하지 못할까?

No.

가능합니다.
사용하고 싶은 매개변수로 아무 단어를 넣으면 사용이 가능합니다.

const Taerang = (...args) => {
  console.log(args);
};
Taerang(4,5,6);

 

이렇게 하면 4 5 6이 배열에 저장이 되는 것을 알 수 있습니다!!

대충 어떤 느낌인지 확 오시나요?

 

This

일반 함수와 화살표 함수의 특징이자 차이로 볼 수 있는 개념은 바로 this이다!

 

화살표 함수는 함수를 선언을 할 때 this에 바인딩할 객체를 결정을 해줍니다.

this ⭐️
자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 식별자

바인딩 ⭐️
식별자과 값을 연결하는 과정

일반 함수는 자신만의 this를 가지고 있지만, 하지만 화살표 함수는 자신만의 this를 가지고 있지 않습니다.

this를 감싸고 있는 스코프의 this를 가지고 오게 되는데

 

즉, 화살표 함수 내부에서 this를 접근하게 된다면 외부로 this를 가져와서 사용을 하게 됩니다.

const Main = {
  name: 'taerang',
  main: function () {
    console.log(this);
  },
  mainArrow: () => {
    console.log(this);
  },
};

Main.mainArrow(); // window

Main.mainArrow() 함수를 호출하면 Main 객체가 아니라 window를 가리키게 됩니다!

엥? this는 어떻게 window를 가지게 되는 것일까?

 

Main 객체에 mainArrow: this로 console을 찍으면 window 상태가 나오게 됩니다.

화살표 함수는 함수가 선언이 된 위치에서 this가 결정이 된다고 하였는데 () => {}를 감싸고 있는
스코프, 즉 선언한 위치 this가 window이기 때문에 window가 나온다고 합니다..

➡️ "여기 개념은 조금 많이 어려워서 저도 조사하면서 헷갈린 부분도 많네요.."

 

화살표 함수로 메서드 정의를 하게 되면 생성한 객체를 접근하기가 어렵네요..

 

여기 아래의 블로그는 더 추가적으로 공부하고 싶은 내용을 접근하면 좋을 것 같아요!!
진짜 좋은 내용들이 많은 것 같은데 저는 아직 어렵게 느껴지네요..

Javascript 화살표 함수는 왜, 어떻게 사용하는가?

느낀 점

내가 조사하면서 느낀 점은 지금은 확실히 화살표 함수를 사용하는 것이 더 익숙하고 더 간결해서 많이 사용을

하는 것 같은데 객체 접근이나 이런 문제를 보면 또 function이 좋은 것 같기도 하다.

추가적으로 내부함수를 지정해서 사용하면 화살표 함수도 접근이 가능하게 만들 수 있는데 그것도 해봐야겠다.