화살표 함수 (Arrow function)

화살표 함수(Arrow function)

•  화살표 함수는 ES6문법이며 기존의 function 키워드 사용해서 함수를 만든 것보다 간단하고 편리하게 함수를 표현할 수 있도록 하는 함수입니다.

function add1(a,b){
	reutrn a+b;
}

//화살표 함수의 기본형태 
const add2(a,b) => {
	return a+b;
}

// 중괄호 return 생략
const add3(a,b) => a + b ;


add1(1, 2); // 3
add2(3, 4); // 7

• function 키워드를 생략하고 => 기호를 사용한다.
• 변수에 대입할 경우에 재사용이 가능하다.

 

---

화살표 함수(Arrow function)의 제한 ❗

• 화살표 함수에는 자체 바인딩 이 this에 없으며, 인수 또는 super로 사용해야 하며, 메서드로 사용하면 안 됩니다.
• 화살표 함수는 생성자로 사용할 수 없습니다.
• new로 호출하면 TypeError 가 반환됩니다.
• 화살표 함수는 함수 내부에서 yield를 사용할 수 없으며 제너레이터 함수로 생성할 수 없습니다.
• prototype 속성이 없기 때문에 prototype 메서드로 사용할 수 없다.

 

 

1. This가 없다.

화살표 함수 이외의 모든 함수는 자신을 가리키는 this를 사용했습니다. 하지만 화살표 함수에는 this가 존재하지 않는다. 그래서 화살표 함수에서 this 키워드로 접근하면, 자신이 아닌 외부에서 값을 가져오게 됩니다.

 

var name = "Global";

let user = {
  name: "ZINU",
  sayHi: function() { // 일반 함수
    console.log(this.name); 
  }
};

user.sayHi(); // ZINU

var name = "Global";

let user = {
  name: "ZINU",
  sayHi: () => { // 화살표 함수
    console.log(this.name); 
  }
};

user.sayHi(); // ZINU

 

일반 함수의 this는 함수 호출 방식에 따라 값이 동적으로 결정되지만, 화살표 함수의 this는 함수를 선언할 때에 값이 정적으로 결정됩니다.

즉, 일반 함수와 달리 화살표 함수의 this는 언제나 상위 스코프의 this를 가리키게 되는 것입니다.

 

따라서 JavaScript에서 this 키워드를 조작하는 대표적인 방법인 call, apply, bind 함수를 사용할 수 없습니다.

 

const obj1 = { message: 'Hello from obj1' };
const obj2 = { message: 'Hello from obj2' };

// 일반 함수
function normalFunction() {
  console.log(this.message);
}

// 화살표 함수
const arrowFunction = () => {
  console.log(this.message);
};

// 일반 함수에서 this 변경
normalFunction.call(obj1); // 'Hello from obj1'
normalFunction.call(obj2); // 'Hello from obj2'

// 화살표 함수에서 this 변경 (변경이 되지 않음)
arrowFunction.call(obj1); // undefined
arrowFunction.call(obj2); // undefined

---

2. new와 함께 사용할 수 없다.

생성자 함수란 JavaScript에서 new 연산자와 함께 호출되어 객체를 생성하기 위해 사용되는 특수한 함수입니다.

 

// 생성자 함수
function UserInfo() {
  this.name = 'ZINU';
  this.age = 20;
  this.phone = '010-1234-1234';
}

// 객체 생성
let userInfo = new UserInfo();

console.log(userInfo); // UserInfo {name: 'ZINU', age: 20, phone: '010-1234-1234'}

 

 

// 생성자 함수
let UserInfo() => {
  this.name = 'ZINU';
  this.age = 20;
  this.phone = '010-1234-1234';
}

// 객체 생성
let userInfo = new UserInfo();

console.log(userInfo); // // TypeError: User is not a constructor

 

위와 같이 화살표 함수는 this가 존재하지 않기 때문에 생성자 함수처럼 new와 함께 실행할 수 없습니다. 따라서 화살표 함수는 객체를 생성하는 용도로 사용할 수 없기 때문에 다음과 같은 경우에 주로 사용합니다.

 

1. 간단하고 짧은 함수 작성
2. 콜백함수 (Callback Function)

let numbers = [1, 2, 3, 4, 5];

let oddNumbers = numbers.filter(number => number % 2);

console.log(oddNumbers);    // [1, 3, 5]

 

---

2. prototype 메서드로 사용 X

 

일반함수는 prototype 속성이 존재하지만, 화살표 함수는 prototype 속성을 가지고 있지 않습니다.

그렇기 때문에 생성자로 사용할 수도 없으며, 일반 객체의 메서드처럼 사용한다면  일반 객체의 메서드처럼 메서드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역객체 window를 가리키게 됩니다.

const Zinu = () => {};

console.log(Zinu.hasOwnProperty('prototype')); // false

const foo = new Zinu(); // TypeError: Foo is not a constructor

---

 

화살표 함수는 ES6에서 새롭게 도입된 방식으로 간단하고 간결한 문법을 빠르게 작성할 수 있지만 일반 함수와 다른 점이 많기 때문에 사용자의 의도와 다르게 작동할 수도 있으므로 주의할 필요가 있다. 적절한 상황에 맞게 화살표 함수와 일반함수를 선택하고 활용하는 것이 가장 중요하다.

 

 

Reference

• Mdn web docs
• 모던 JavaScript
• Inpa Dev