자바스크립트 function 함수와 화살표 함수

자바스크립트 function 함수와 화살표 함수

 

---

함수 선언

#1 function 함수 선언

function add(x,y){
    return x + y;
}

// 또는 익명함수 선언

const add = function (x, y){
  return x + y;
}

 

 #2 화살표 함수 표현

const add = (x,y) => {
    return x + y;
}

 

함수 내용이 한 번으로 끝날 경우 아래와 같이 선언도 가능합니다.

const add = (x,y) => x + y;

---

화살표 함수 표현의 특징

  화살표 함수(Arrow function)는 ES 2015 버전에서 처음 등장한 표현 방식으로 기존 function 함수 선언보다 간단하게 함수를 선언할 수 있습니다. 화살표 함수는 언제나 익명 함수로 선언되며, 별도 변수에 할당하는 것은 가능합니다.

 

익명 함수: 이름이 없는 함수로 바로 호출을 실행하거나 변수에 함수를 담아서 사용할 수 있습니다.

 

  그중에서도 화살표 함수가 function 함수 선언과 가장 다른 점은 자신의 this, argument 등에 바인딩하지 않는다는 점입니다.

 

---

화살표 함수 바인딩

바인딩: 바인딩은 프로그램에 사용된 구성 용소의 실제 값을 결정하는 행위로, 함수 설명하면 함수가 호출할 때 함수가 위치한 메모리를 연결하는 것도 바인딩이라고 합니다.

// 입력한 값과 addData를 더하는 예제

const calc = {
    addData: 10,
    add: function (x){
        return x + this.addData;               
    } 
}

console.log(calc.add(1)); // output: 11

  위에 예제처럼 function 함수를 사용하면 this에 바인딩되어 addData의 값을 가져와 입력 값이 1과 더하여 11을 출력하였습니다.

 

// 입력한 값과 addData를 더하는 예제

const calc = {
    addData: 10,
    add: (x) => {
        return x + this.addData;               
    } 
}

console.log(calc.add(1)); // output: NaN

  반면 화살표 함수를 사용할 경우 this에 바인딩되지 않아 addData의 값을 가져오지 못하고 NaN을 출력합니다.

 

 

  이런 화살표 함수의 특징은 다음과 같이 사용할 수 있습니다.

// addList와 addData를 더하는 예제

const calc = {
    addData: 10,
    addList: [1, 5, 7],
    add: function (x){
        this.addList.forEach((x) => {
            console.log(x+this.addData);
        }) 
    }
}
    
calc.add();
/*
output:
11
15
17
*/

 

  위의 예제처럼 화살표 함수의 바인딩되지 않는 특징을 이용하여 기존 addData를 가져와 더하는 것이 가능합니다.

 

---

참고 페이지:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function

함수 표현식 - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

http://tcpschool.com/php/php_oop_binding

코딩교육 티씨피스쿨