JavaScript 일반 함수와 화살표 함수의 차이와 문법

 

자바스크립트에서 함수를 정의하는 방법은 크게 두가지이다. 일반 함수를 사용하는 방법과 화살표 함수를 사용하는 방법이다.

 

일반 함수

function 키워드를 사용하는 일반 함수는 함수 선언식과 함수 표현식이 있다.

 

함수선언식

함수 선언식은 자바스크립트에서 함수를 선언하는 가장 기본적인 방법이다.

function main() {
	console.log("Hello")
}

main() //함수 호출

 

function 키워드 뒤에 필수적으로 함수 이름을 적고 블럭 안에 함수 내용을 적으면 된다. 함수를 호출하기 위해선 이름을 적으면 된다.

함수 선언식으로 작성된 작성된 함수의 특징은 호이스팅이 된다는 것이다. 호이스팅이 되기 때문에 함수 선언보다 호출이 먼저 되어도 에러가 생기지 않고, 결과가 나온다. 호이스팅이 됐기 때문에 함수를 최상단으로 올리기 때문이다.

foo()

function foo() {
  console.log('foo');
}

// 이렇게 해도 foo 가 잘나온다.

 

이름을 가지 않는 함수를 만들기 위해선 함수 선언식이 아니라 함수 표현식을 사용하면 된다.

 

함수 표현식

함수 표현식은 함수 선언식과 매우 유사하지만, 이름이 없는 함수인 익명 함수를 만들 수 있다. 똑같이 function 키워드를 사용하여 함수를 정의하지만 아래와 같이 이름이 생략이 가능하다.

익명 함수를 main 이란 변수에 할당해주었기 때문에 변수 이름을 함수 이름처럼 사용하여 함수 호출이 가능하다.

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

main() //hello

 

함수 표현식의 특징은 함수 선언식과 다르게 호이스팅이 되지 않는다.

main() //Uncaught ReferenceError 발생

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

 

화살표 함수

화살표 함수는 ES6 버전에서 등장한 문법이다. 기존의 함수 표현식을 훨씬 더 간단한 문법으로 작성할 수 있게 해준다.

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

main()

 

1. return 생략

const add = (a + b) => {
	return a + b // 코드가 단 한 줄존재.
}

add()

// 코드가 한줄만 존재할 시 아래와 같이 변경 가능하다.

const add = (a + b) => a + b

add()

 

2. 매개변수 소괄호 생략

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

print("hi")

// 매개 변수가 하나일 경우 매개변수를 감싸는 소괄호도 생략이 가능하다.

const print = (text) => console.log(text)

print("hi")

//소괄호 생략

const print = text => console.log(text)

print("hi")

 

매개변수가 복수개 이거나, 하나도 없을 시엔 매개변수의 소괄호가 필요하다.

 

3. 객체는 소괄호로 한 번 감싸준다.

const getObject = () => {
	return {name: "hello"}
}

getObject()


// 객체의 중괄호와 함수의 중괄호가 헷갈릴 수 있으므로 객체는 소괄호로 한번 감싸준다.
const getObject = () => ({name: "hello"})

console.log(getObject()) // hello

 

4. 화살표 함수에서 가변인자

function 키워드를 사용한 일반함수에선 매개변수로 따로 명시하지 않아도 arguments 변수를  암묵적으로 전달 받는다.

arguments  변수는 함수가 전달받은 인자를 담고 있는 배열형태의 객체이다.

arguments  변수는 인자의 갯수가 정해지지 않은 가변인자가 전달되는 함수를 쓸 때 유용하게 사용할 수 있다.

하지만 화살표 함수는 일반 함수와 다르게 arguments 를 전달 받지 않는다.

화살표 함수에서 가변인자를 처리하기 위해선 나머지 매개변수 구문을 활용하면 된다.

function main() {
	arguments // 함수가 전달받은 인자를 담고 있는 배열형태의 객체이다.
    console.log(arguments[1]) //2
}

main(1, 2, 3)

//화살표 함수는 arguments를 받지 않는다.

const main = () => {
	console.log(arguments) // Uncaught ReferenceError 가 발생한다.
}
main(1, 2, 3)

//화살표 함수에서 가변인자를 처리하고 싶으면 매개변수에 나머지 매개변수구문을 활용한다. 

const main = (...args) => {
	console.log(args) //[1, 2, 3]
}
main(1, 2, 3)

 

5. 화살표 함수에서 this

화살표 함수에서 this 는 일반 함수에서 this 와 다르게 동작한다.

 

일반함수

일반함수의 this는 자신만의 this를 갖고 있고,(실행 컨텍스트에서 this 바인딩을 하기 때문) 함수를 호출한 시점에서 결정이 된다. 

즉, 일반 함수의 this는 함수의 선언위치에 상관 없이, 함수를 호출하는 방법에 따라 달라진다. 

(일반 함수의 this는 함수를 호출한 객체를 가르킨다.)

const object = {
	name: '코딩',
    main: function () {
    	console.log(this);
    },
};

object.main();
// 일반 함수에서 this 는 함수를 호출한 객체이다.
// main 함수를 호출한 객체는 object이므로 this 는 object가 된다.

 

화살표 함수

화살표 함수는 자신만의 this 를 갖고 있지 않다. 화살표 함수에서 this에 접근하면 외부로부터 this를 가져와서 사용하게 된다.

즉, 화살표 함수의 this 는 함수의 호출 방법에 상관없이, 함수를 선언한 위치에 의해 결정된다.

화살표 함수의 this는 함수를 감싸는 상위 스코프의 this를 그대로 가져와서 사용한다.

const object = {
	name: '코딩',
    main: function () {
    	console.log(this);
    },
    mainArrow: () => {
    	console.log(this);
    }
};

object.mainArrow(); // window 
// 화살표 함수는 자신만의 this를 갖지 않기 때문에 밖에 있는 this를 가져오게 되고,(바깥 스코프)
// 밖에 있는 this 는 전역 객체인 window가 나타나게 된다.

const object2 = {
	name: '코딩',
    mainArrow: object.mainArrow,
};

object2.mainArrow(); // object2의 내용이 아닌, window 객체 내용이 나오게 된다.
// 화살표 함수의 this는 함수가 선언된 위치에 의해 정의된다.
// 함수가 호출된 방법과는 무관하다.

 

 

const object = {
	name: '코딩',
    main: function () {
    	const innerFunction = function() {
        	console.log(this)
        };
        innerFunction()
    },
};

object.main() // window 객체가 나온다.
//innerFunction() 은 어떤한 객체 없이 호출되기 때문이다.

const object = {
	name: '코딩',
    main: function () {
    	const innerFunction = () => {
        	console.log(this)
        };
        innerFunction()
    },
};

object.main() // object 객체가 나온다.
// 화살표 함수인 innerFunction() 의 this 는 겉에 감싸고 있는 main 함수의 this를 가져오게 되고 
// 이는 object 이기 때문이다.

 

6. 화살표 함수는 bind 사용 불가

일반 함수에선 bind를 활용해 this 값을 명시할 수 있다. 하지만 화살표 함수에선 this를 사용하지 못한다. 왜냐하면 바인딩할 자신만의 this 가 없기 때문이다.

const object = {
	name: '코딩',
    main: function () {
    	const innerFunction = function() {
        	console.log(this);
        }.bind({hi: 'hi'});
        innerFunction()
    },
};

object.main(); // {hi: 'hi'}

 

화살표 함수의 this 값은 화살표 함수가 정의 되는 시점에서 정의되는 위치에 의해 결정이 되고 이후에는 변경되지 않기 때문이다. 따라서 아무리 bind 로 this를 정해주더라도 무시하게 된다.

const object = {
	name: '코딩',
    main: function () {
    	const innerFunction = (() => {
        	console.log(this)
        }).bind({hi: 'hi'});
        innerFunction()
    },
};

//object.main() // {name: '코딩', main: f} object 객체가 나온다.

 

7. 화살표 함수 외부 함수의 영향을 받지 않는다.

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

object.main();
//1초 후 window 객체 출력 - setTimeout 함수에 this는 window 객체로 설정돼 있음.

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

object.main();
// {name: '코딩', main: f} object 객체가 나온다.
// 화살표 함수는 자신을 감싸는 스코프의 this 를 가져오기 때문에 
// setTimeout 내부 구성에 상관없이 만들어준 object 객체가 나온다.