[JavaScript] 일반 함수 vs 화살표 함수

Array Function? 

화살표 함수는 ES6에서 새롭게 추가되었다. 

function fun () {         // 일반 함수
	// ...
}

const arrFun = () => {    // 화살표 함수
	// ...
}

 

화살표 함수 vs 일반 함수 

1. this 

여기서 바인딩이란 말이 많이 나올텐데, 바인딩이란 함수 호출과 실제 함수를 연결하는 방법이다. 

동적 바인딩과 정적 바인딩으로 구분이 가능한데, 

동적 바인딩은 실행 시간에 이루어지거나 실행 시간에 변경된다. 

정적 바인딩은 실행 시간 전에 일어난다. 실행 시간에는 변하지 않는 상태로 유지된다. 

 

일반 함수 

자바스크립트에서 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 

일반 함수에서 this가 바인딩 되는 상황이 3가지가 있는데, 

 

1. 함수 실행 시 

자바스크립트에서 함수를 호출하면 this는 전역 객체(window)에 바인딩 된다. 

let test = 'This is Test';
console.log(test);          // This is Test

function func() {
    console.log(this.test); // This is Test
}

func()

 

2. 메소드 실행 시

객체의 속성이 함수일 경우 메소드라고 부르는데, 이런 메서드를 호출 시, this는 호출한 객체에 바인딩된다. 

let testObject = {
    name: 'foo',
    sayName: function() {
    	console.log(this.name);  // foo
    }
}

testObject.sayName()

3. 생성자 함수 실행 시

기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 

생성자 함수가 실행되면 함수의 프로토타입 객체를 자신의 프로토타입 객체로 설정한다. 

let Person = function (name) {
    this.name = name
}

let foo = new Person("foo");
console.log(foo.name);      // foo

 

화살표 함수 

화살표 함수는 선언할 때 this에 바인딩할 객체를 정적으로 결정한다.

this를 바인딩할 때, 언제나 상위 스코프의 this를 가리킨다. 

function fun() {
    this.name = "하이";
    return {
    	name: "바이",
        speak: function () {
            console.log(this.name);
        },
    };
}

function arrFun() {
    this.name = "하이";
    return {
    	name: "바이";
        speak: () => {
            console.log(this.name);
        },
    };
}

const fun1 = new fun();
fun1.speak();          // 바이

const fun2 = new arrFun();
fun2.speak();          // 하이

일반 함수를 사용했을 때는 this가 객체에 바인딩 되기 때문에 " 바이 " 가 출력되고, 

화살표 함수는 this가 상위 스코프의 this를 가리키기 때문에 " 하이 " 가 출력된다. 

 

2. 생성자 함수 사용 가능 유무 

일반 함수의 경우에는 생성자 함수를 사용할 수 있다. 

하지만 화살표 함수의 경우 prototype 프로퍼티를 가지고 있지 않기 떄문에 생성자 함수를 사용할 수 없다. 

function fun() {
    this.num = 1234;
}
const arrFun = () => {
    this.num = 1234;
};

const funA = new fun();
console.log(funA.num);     // 1234

const funB = new arrFun(); // Error

 

3. arguments 사용 가능 여부 

일반 함수에는 실행될 때 arguments 변수가 전달되어 사용이 가능하지만, 

화살표 함수는 arguments 변수가 전달되지 않는다. 

function fun() {
    console.log(arguments); // Arguments(3) [[1, 2, 3, ... ]]
}

fun(1, 2, 3);

const arrFun = () => {
    console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};

arrFun(1, 2, 3);