자바스크립트에 화살표 함수와 일반 함수에 몇 가지 차이가 있다고 하는데 한번 알아보겠습니다.

| this

1. 일반함수

함수를 호출할 때 this 결정

일반적으로 함수를 실행하면 전역 객체인 window를 가리킴
객체의 메서드로 함수를 실행하면 해당 메서드를 소유한 객체를 가리킴
생성자로 실행하면 생성자로 만들어진 객체를 가리킴

function func() {

console.log(this);

}

const object = {

name: "Yi",

func1: func,

};

func(); // 전역객체 window

object.func1(); // 해당 object객체

const nFunc = new func(); // 생성된 객체인 nFunc

2. 화살표 함수

함수를 선언할 때 this 결정

화살표 함수의 this는 함수가 선언된 시점 상위 스코프의 this를 가리킴 (Lexical this)

const object = {

age: 25,

aFunc: () => {

console.log(this.age); // this 가 선언 시 결정

},

rFunc() {

console.log(this.age); // this 가 호출 시 결졍

},

Func() {

const aFunc = () => {

console.log(this.age);

};

aFunc();

},

};

object.aFunc(); // this는 선언 시 결정 된 window이므로 window.age는 undefined

object.rFunc(); // this는 호출 시 결정된 object이므로 따라서 object.age는 25

object.Func(); // this는 선언 시 결정된 object이므로 따라서 object.age는 25

| arguments의 사용

1. 일반함수

arguments 사용 가능

function func() {

console.log(arguments[0], arguments[1]);

}

func(1, 2); // 1 2 출력

2. 화살표 함수

arguments 사용 불가

const func = () => {

console.log(arguments[0], arguments[1]);

};

func(1, 2); // 에러 발생

| 생성자로 사용

1. 일반함수

생성자로 사용 가능

function Func(name) {

this.name = name;

}

const nFunc = new Func("Yi");

console.log(nFunc.name); // "Yi" 출력

2. 화살표 함수

생성자로 사용 불가

const Func = (name) => {

this.name = name;

};

const nFunc = new Func("Yi"); // 에러 발생

console.log(nFunc.name);

| call, apply, bind 메서드의 사용

1. 일반함수

사용가능

const object = {

age: 25,

func: function () {

console.log(this.age);

},

};

const func1 = object.func.bind({ age: 30 });

func1(); // 30 출력

2. 화살표 함수

사용 불가

const object = {

age: 25,

func: () => {

console.log(this.age);

},

};

const func1 = object.func.bind({ age: 30 });

func1(); // undefined 출력

[Java Script] 화살표 함수와 일반 함수 차이