일반함수 vs 화살표 함수

오늘은 일반함수와 화살표 함수의 차이에 대해서 알아보려한다.

지금까지 일반함수만 사용하다가 화살표 함수의 등장에 혼란이 온 상황이라
어느정도 개념을 짚고 넘어가야 할 것 같아서
강의를 들어보았다.

강의 내용을 정리해보자면

• 일반함수: 함수 선언식과 함수 표현식으로 나뉜다.
• 화살표 함수의 문법 총 정리
• arguments와 가변인자

먼저 화살표 함수를 들어가기 전에 용어 정리를 해보자면

• Parameter : 매개변수 명
  함수와 메서드 입력 변수(Variable)명
• arguments : 전달인자, 인자
  즉, 함수와 메서드의 입력 값(Value)
• 가변인자 : 매개변수를 지정하지 않고 변할 수 있는 인자

arguments는 함수 내부적으로 가지고 있으며, 우리가 선언하지 않았음에도 동작한다.
arguments는 무엇일까

function sum() {
    let res = 0;
    for (let i = 0; i < arguments.length; i++) {
        res += arguments[i]; 
        // 선언하지 않은 arguments를 사용하고 있다. 
    }
    console.log(arguments);
    return res;
}
sum(1,2,3,4)

확인해보면 아래와 같이 출력된다.
[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

arguments는 객체다 이러한 형태의 객체를 유사 배열이라고도한다.

자 이제 본론으로
일반함수와 화살표 함수의 선언 방식을 간단하게 알아보자

일반함수

function main () {
	return "h1"
}

화살표 함수

const main = () => "h1"

일반함수에는 함수선언식, 함수 표현식 두가지 방법으로 선언할 수 있다.
함수 선언식은 자바스크립트에서 함수를 선언하는 가장 기본적인 방법이다.

함수 선언식과 함수 표현식의 선언 방식을 간단히 알아보자면

main이라는 함수를 함수 선언식으로 정의

function main() {
	console.log("hi");
}

특징:

• 함수 선언식으로 정의된 함수는 호이스팅이 가능하다
  즉, 함수의 선언을 코드의 최상단으로 끌어올려진다.
• 그래서 함수를 선언한것보다 윗줄에도 main함수를 호출할 수 있다.
• 익명함수를 만들 수 없다. (함수의 이름을 필수적으로 넣어줘야한다.)

main이라는 함수를 함수 표현식으로 정의

const main = function main() {
	console.log("hello");
}
또는 
const main = function() {
	console.log("hello");
}

익명함수를 선언함과 동시에 main이라는 변수에 함수를 할당
특징 :

• 변수의 이름을 함수의 이름으로 사용할 수 있다.
• 익명함수를 만들 수 있다.
• 호이스팅이 되지 않는다.
• 그래서 선언하기 윗줄에 main함수를 호출할 수 없다.

자 이제 화살표 함수에 대해 알아보자
화살표 함수는 ES6에 등장한 문법이다.
기존의 함수 표현식을 훨씬 간결한 문법으로 작성할 수 있게해준다.

화살표 함수의 사용법

const main () => {
	console.log("hello")
}

함수의 표현식과 마찬가지로 익명함수를 선언함과 동시에
main이라는 변수에 함수를 할당해준다.
또한 변수의 이름을 함수의 이름으로 사용할 수 있다.
또한 화살표 함수도 함수 표현식의 일종이기 때문에 호이스팅 되지 않는다。
즉、 화살표 함수를 정의하기 전에 호출하려고 하면 ReferenceError가 발생한다。

화살표 함수의 사용 사례
function add(a,b) {
return a+b;
};

const add = (a, b) => {
return a+b
}
한줄만 있을 경우에는 중괄호를 생략 가능하다.
const add = (a, b) => return a+b;

function print(text) {
console.log(text);
}
print("hi")

매개변수가 한개일 경우에는 소괄호 생략 가능하다.
const print = text => console.log(text);

매개변수가 없는 경우? 소괄호 생략 불가
const print = () => console.log("hi");

객체를 리턴할 경우
const getObjct = () => {return {name:"테스트"}}

객체를 리턴할 경우 한줄이였을때 문법에 혼란이 올 수 있기 때문에 소괄호로 감싸준다.
const getObject = () => (return {name:"테스트"})
console.log(getObject());
결과: {name: '테스트'}

function 키워드로 정의한 일반함수의 arguments

function main() {
	console.log(arguments);
};
main (1,2,3);

매개변수를 따로 명시하지 않아도 arguments를 암묵적으로 전달받는다.
결과: [Arguments] { '0': 1, '1': 2, '2': 3 }
배열형태의 객체이다.
그래서 전달한 인자를 배열형태로 접근할 수 있다.
arguments[0] = 1;
arguments[1] = 2;
arguments[2] = 3;

하지만 화살표 함수는 일반함수와 다르게 arguments라는 변수를 전달받지 않는다.
화살표 함수로 바꿨을 때

const main = (...args) => console.log(args);

이렇게 변경하여 각 배열에 접근할 수 있다.
args[0] = 1;
args[1] = 2;
args[2] = 3;

마지막으로 화살표 함수의 특징은
자신만의 ｔｈｉｓ를 가지지 않고 외부 스코프의 ｔｈｉｓ를 그대로 사용한다。
이는 콜백함수의 ｔｈｉｓ문제를 해결하는데 유용하다。

또한 arguments 객체가 없다。
인자 목록을 동적으로 다루기가 어렵다。

화살표 함수의 ｔｈｉｓ와 일반함수의 ｔｈｉｓ에 대한 자세한 내용은 길어질 것 같으니 다음 포스팅에서 작성해보려고한다。

정리
일반함수의 함수 선언식： 호이스팅 된다。
일반함수의 함수 표현식： 호이스팅 되지 않는다。
화살표 함수： 호이스팅 되지 않는다。