[JS ES6] Arrow function은 function을 대체하는 신문법 X

1️⃣ 함수 작성 방식 비교

기존 방식

• 함수 선언문

  function 예쁜함수() {
    // 어쩌구
  }
  

• 함수 표현식

  var 예쁜함수 = function() {
    // 어쩌구
  };
  

ES6 Arrow Function 방식

• Arrow Function 기본 문법

  var 예쁜함수 = () => {
    // 어쩌구
  };
  

• 기존의 function 키워드를 대체하는 새로운 문법이지만, 단순히 짧게 작성하는 것 이상의 특징이 있습니다.

---

2️⃣ Arrow Function의 장점과 문법적 특징

1. 함수의 입출력 기능을 직관적으로 표현

• 함수가 어떤 입력을 받아서 어떤 결과를 반환하는지를 한눈에 파악할 수 있습니다.
• 예제:

  var 두배만들기 = (x) => { return x * 2 };
  console.log(두배만들기(4)); // 8
  console.log(두배만들기(8)); // 16
  

2. 파라미터가 하나일 경우 소괄호 생략 가능

• 파라미터가 하나라면 아래처럼 간단하게 작성할 수 있습니다.

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

3. 함수 본문이 단일 return문이라면 중괄호와 return도 생략 가능

• 더욱 간결하게 표현할 수 있습니다.

  var 두배만들기 = x => x * 2;
  // 함수의 입력(x)이 곧 출력(x * 2)을 의미함
  

4. this 바인딩의 변화 (핵심 포인트)

• 전통적인 함수는 호출되는 위치에 따라 내부의 this 값이 달라집니다.
• Arrow Function은 자신만의 this를 생성하지 않고, 외부(상위 스코프)의 this를 그대로 사용합니다.
  • 예시 1 – 일반 함수 사용

    var 오브젝트1 = {
      함수: function() { console.log(this); }
    };
    오브젝트1.함수();  // 출력: 오브젝트1
    

  • 예시 2 – Arrow Function 사용

    var 오브젝트1 = {
      함수: () => { console.log(this); }
    };
    오브젝트1.함수();  // 출력: arrow function은 외부 this를 사용하므로 예상과 다를 수 있음
    

• 이 때문에 arrow function은 항상 기존의 this 값을 유지하지만, 원하는 동적 this를 얻지 못할 수도 있습니다.

---

📌 정리

• Arrow Function은 function을 완전히 대체하는 문법이 아닙니다.
  • 함수의 본질(입출력 기능)을 명확하게 표현하는 장점이 있지만, 모든 상황에서 전통적 함수의 역할을 대신할 수는 없습니다.
  • 특히, this 바인딩이 필요한 상황에서는 전통적인 함수와 arrow function의 차이를 명확히 인지해야 합니다.
• 용도에 맞게 선택적으로 사용하여 코드의 가독성과 의도를 명확하게 표현하는 것이 중요합니다.