JavaScript - Function / Arrow Function

Function / Arrow Function

개인 프로젝트를 진행하다가 문득 일반 함수와 화살표 함수의 차이점이 뭔지 궁금해서 작성하는 글입니다 개발을 하다보면 필연적으로 함수를 사용할 수 밖에 없는데요, ES6에서 등장한 화살표함수가 일반함수와 어떻게 다르고 무엇이 좋은지에 대해 정리해 보겠습니다

1. 일반함수

문법

function func1() {}
function func2(a) { return a * 2 }

특징

• Javascript에서 모든 함수는 실행될 때 함수 내부에 this객체가 추가 된다.
• 함수 내부에 생성 된 this객체는 window(전역)를 가리킨다.
• 메소드로 사용될 때는 메소드를 포함하고 있는 객체를 가리킨다.
• 생성자로 사용될 때는 새롭게 만들어진 인스턴스를 가리킨다.

1, 2번
function() {
	// window(전역)을 가리키는 this객체 생성 됨
}

3번
const obj = {
	name: "gildong",
    sayName: function () {
    	console.log(this.name); // 여기서 this는 obj를 가리킴
    }
}

4번
function Person(name) { // 생성자 함수는 대문자로 시작한다
	this.name = name;
}

const student = new Person("gildong"); // this는 student를 가리킨다

2. 화살표함수

문법

() => {}
(a) => { return a * 2 }
위 문법은 이렇게도 사용가능
a => a * 2 // 매개변수가 1개일 때 () 생략 가능, 한줄로 표현이 가능할 때 중괄호와 return 생략 가능

특징

• 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
• 화살표 함수의 this는 상위 스코프의 this를 가리킨다. (Lexical this)
• 상위 스코프의 this를 가리키기때문에 메소드로 사용할 수 없다. (this는 전역을 가리키기때문)
• call, apply, bind메소를 사용하여 this를 변경할 수 없다.
• arguments가 존재하지 않는다.
• constructor가 존재하지 않기 때문에 생성자 함수로 사용할 수 없다.

3. 일반함수와 화살표 함수 차이점

1) this

일반함수
function func() {
	this.test = "a";
    return {
    	test: "b",
        say: function () {
        	console.log(this.test); // "a"
        }
    }
}

화살표함수
function func() {
	this.test = "a";
    return {
    	test: "b",
        say: () => {
        	console.log(this.test); // "b"
        }
    }
}

일반함수는 자신이 종속된 객체를 this로 가리키고
화살표 함수는 자신이 종속된 인스턴스를 가리킨다

2) 생성자 함수

일반함수
function Func() {
	this.a = "a"
}

const test = new Func();
test.a; // "a"

화살표함수
const Func = () => {
	this.a = "a";
}

const test = new Func(); // Uncaught TypeError: test is not a constructor

화살표 함수는 constructor가 존재하지 않기때문에 생성자 함수로 사용할 수 없다

3) arguments

일반함수
function test() {
	console.log(arguments);
}
test(1,2,3) // Arguments(3) [1,2,3 ..]

화살표함수
const test = () => {
	console.log(arguments);
}
test(1,2,3) // Uncaught ReferenceError: arguments is not defined

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

위 처럼 화살표 함수는 일반 함수를 대체할 수 있는 문법이 아닙니다 적절하게 잘 사용하면 득이지만 잘못사용한다면 독이 될 수도 있겠다는 생각이 듭니다. 용도를 잘 알고 사용하는것이 가장 좋은 사용법이지 않을까 싶습니다.

참고

• https://codingapple.com/unit/es6-3-arrow-function-why/
• https://hhyemi.github.io/2021/06/09/arrow.html