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

별고리·2021년 9월 2일

JavaScript function this 바인딩 자바스크립트 화살표 함수

javascript & node.js

목록 보기

2/6

1. 함수 선언

function 함수 표현

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

// 또는 익명함수 선언

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

화살표 함수 표현

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

참고!!

함수 내용이 한 번으로 끝날 경우 아래와 같이 선언도 가능합니다.
const add = (x,y) => x + y; 

2. 화살표 함수 표현의 특징

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

익명함수

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

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

3. 화살표 함수 바인딩

바인딩

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

// 입력한 값과 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
*/