화살표 함수 & 일반 함수

일반 함수

---

함수는 함수 선언식과 함수 표현식으로 선언할 수 있습니다.

선언 방식

함수 선언식

함수 선언식은 호이스팅으로 코드 최상단에서 실행

main();

function main (a, b) {
	return a + b
};

함수 표현식

함수 표현식으로 익명함수를 만들 수 있음

const main = function (a, b) {
	return a + b
};

main();

arguments 객체

arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.

일반함수의 경우 함수로 전달한 인자가 arguments변수에 배열 형태로 들어있습니다.

function main() {
	console.log(arguments);
};

main(1, 2, 3);
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

따라서 전달받은 인자를 arguments를 통해 배열 형태로 접근할 수 있습니다.

function main() {
	console.log(arguments[1]);
};

main(1, 2, 3);
// 2

this

일반함수의 this는 호출된 방법과 실행 시점에 따라 결정됩니다.
(dynamic binding, runtime binding)

function main() {
	console.log(this);
}

const object1 = {
	name: 'zima',
  	main: main,
};

const object2 = {
	name: 'ruel',
  	main: main,
};

object1.main();
// {name: 'zima', main: f}

object2.main();
// {name: 'ruel', main: f}

명시적으로 this를 바인딩

this 바인드 함수 사용시 this를 바꿀 수 있습니다.

const object = {
	name: 'zima',
  	main: function () {
    	const innerFunction = function () => {
          	console.log(this);
        }.bind({ hello: 'world' });
		innerFunction();
    },
};

object.main();
// { hello: 'world' }

제어권을 가진 함수의 콜백

setTimeout 내부에 지정된 this 바인드를 따라갑니다.

const object = {
	name: 'zima',
  	main: function () {
    	setTimeout(function () {
          	console.log(this);
        }, 1000)
    },
};

object.main();
// Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

화살표 함수

---

ES6에서 등장한 함수를 정의하는 또 다른 문법입니다.
기존의 문법보다 간결하게 작성할 수 있습니다.

선언 방식

함수 표현식

화살표 함수는 함수 표현식으로만 작성 가능

const main = (a, b) => {
	return a + b
};

main();

한 줄만 return 할 경우 아래와 같이 중괄호와 return을 생략할 수 있음

const main = (a, b) => a + b

main();

매개변수가 하나일 경우 아래와 같이 매개변수를 감싸는 소괄호를 생략할 수 있음

const main = a => a

main();

객체를 return 할 때는 소괄호 사용

const main = a => ({ a: "Hello, World!"})

main();

arguments 객체

일반함수와 다르게 arguments를 사용할 수 없습니다.
매개변수에 spread 연산자를 사용하여 인자에 접근할 수 있습니다.

const main = (...args) => {
	console.log(args[2])
};

main(1, 2, 3);
// 3

this

화살표 함수의 this는 함수가 정의되는 시점에서의 위치에 의해 결정됩니다. (static binding)
화살표 함수의 this는 스코프 체인을 통해 상위 스코프의 this를 참조합니다.

const main = () => {
	console.log(this);
}

const object1 = {
	name: 'zima',
  	main: main,
};

const object2 = {
	name: 'ruel',
  	main: main,
};

object1.main();
// Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

object2.main();
// Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

화살표 함수는 new 생성자로 인스턴스를 생성할 수 없습니다.
화살표 함수 내부에서 this, arguments, super, new.target을 참조하면 스코프 체인을 통해 상위 스코프의 this, arguments, super, new.target을 참조합니다.

명시적으로 this를 바인딩

화살표 함수는 this 바인드 함수를 사용해서 원하는 this로 바꿀 수 없습니다.

const object = {
	name: 'zima',
  	main: function () {
    	const innerFunction = (() => {
          	console.log(this);
        }).bind({ hello: 'world' });
		innerFunction();
    },
};

object.main();
// {name: 'zima', main: f}

제어권을 가진 함수의 콜백

setTimeout 내부에 지정된 this 바인드를 따라가지 않고 선언된 위치에 의해 결정됩니다.

const object = {
	name: 'zima',
  	main: function () {
    	setTimeout(() => {
          	console.log(this);
        }, 1000)
    },
};

object.main();
// {name: 'zima', main: f}

요약

화살표 함수와 일반함수의 차이를 설명해보세요.

선언방식, arguments 객체의 사용 여부, this binding 의 차이가 있습니다.

1. 일반함수는 함수 선언식와 함수 표현식으로 함수를 선언할수 있고 화살표 함수는 함수 표현식으로만 선언할 수 있습니다.

2. 일반함수는 arguments 객체를 사용할 수 있고 화살표 함수는 사용할 수 없습니다.

3. 일반함수의 this는 호출된 방법과 실행 시점에 따라 결정되지만 화살표 함수는 함수가 정의되는 시점에서의 위치에 의해 결정됩니다.