Javascript - 화살표 함수

1. 화살표 함수

• 화살표함수는 ES6 기반에서 처음으로 등장한 새로운 함수 선언 방법을 말한다(즉, 화살표 연산을 사용해서 나타내는 함수를 말하는 것이다.)
  • ES6란?
    • 2009년에 ECMAScript 5(ES5 또는 ES2009) 버전을 발표했던 Ecma International은 2015에 ECMAScript 6 개정판을 발표하는데 이를 줄여서 ES6 라고 부른다. (ES6 = ECMA Script6)
• 화살표 함수 선언방법

  // 일반함수 선언 예
  function sum(numA,numB) {
      return numA + numB;
  }
  
  // 화살표함수 선언 예
  const sum = (numA, numB) => {
      return numA + numB;
  }

  • 화살표함수는 함수와 함수명을 제거하고 사용하지만 선언하는 방식이 다를 뿐이지, 대체적으로 일반함수와 같은 기능을 수행한다.
    • 다만, 화살표함수는 일반함수와 다르게 함수를 식별할 수 있는 식별자가 없기 때문에 함수를 호출하기 위해선 함수 표현식을 이용해서 함수를 작성해주어야 한다.
      • 일반 함수(함수 표현식)

        // 일반 함수(함수 표현식)
        function sum(numA, numB){
            return numA + numB;
        }
        
        const result = sum(30,40);
        console.log(result); // 70

      • 화살표 함수(함수 표현식 = return 키워드 사용 O)

        // 화살표 함수(함수 표현식)
        const num1 = (numC, numD) => {
            return numC + numD;
        }
        
        const result1 = num1(40, 50);
        console.log(result1); // 90

      • 화살표 함수(함수 표현식 = return 키워드 사용 X)

        const sumB = (num3, num4) => num3 + num4
        const resultC = sumB(90, 40)
        console.log(resultC) // 130

      • 화살표 함수(함수 표현식 = 매개변수가 1개일경우 : 소괄호 생략 O)

        const sumC = x => x * x;
        const resultD = sumC(10)
        console.log(resultD) // 100

        • Tip.
          • 만약에 전달하고 싶은 매개변수 값이 한개일경우 소괄호를 생략 할 수 있으며, 소괄호를 추가하고 싶다면 소괄호를 사용할 수 있다.
      • 화살표 함수(함수 표현식 = 매개변수가 없을경우)

        const printPie = () => 3.14;
        
        const resultE = printPie();
        console.log(resultE) // 3.14

        • 만약 전달하고 싶은 매개변수가 없을 경우에는 소괄호를 사용해서 다음과 같이 3.14라는 값을 그대로 출력해 사용할 수 있다.
      • 화살표 함수(함수 표현식 = 객체를 사용해 반환할경우)

        // 1) return 키워드 사용시
        const getObject = () => {
            return {
                name : "명수",
                age : 27
            }
        }
        
        const obj = getObject();
        console.log(obj.name) // 명수
        console.log(obj.age) // 27
        
        // 2) return 키워드 사용하지 않을시
        const getObject = () => ({
            name : "명수",
            age : 27
        })
        
        const obj = getObject();
        console.log(obj.name) // 명수
        console.log(obj.age) // 27

      • 화살표 함수(함수 표현식 = 내부함수형태 반환방법)

        // 1) 내부함수형태 반환(일반함수)
        function outer(x1){
            return function inner(){
                return x1 * x1;
            }
        }
        
        const innerFuc = outer(10)
        const resultF = innerFuc();
        console.log(resultF) // 100
        
        // 2) 내부함수형태 반환(화살표함수)
        const outer = (x2) => {
            return function inner(){
                return x2 * x2;
            }
        }
        
        const innerFucB = outer(30)
        const resultG = innerFucB();
        console.log(resultG) // 900
        
        // 3) 내부함수형태 반환(화살표함수 return 간소화)
        const outer = (x3) => function inner() {
            return x3 * x3;
        }
        
        const innerFucC = outer(20)
        const resultH = innerFucC();
        console.log(resultH) // 900
        
        // 4) 내부함수형태 반환(화살표함수 return 제거)
        const outer = (x4) => () => x4 * x4;
        
        const innerFucD = outer(50)
        const resultI = innerFucD();
        console.log(resultI) // 2500