[ JS ] 화살표 함수

🤍 화살표 함수

• ES6에서 새로 추가되었다.
• 함수 표현식에 비해 짧은 문법을 가지고 있다.
• 사전적으로 this 값을 묶는다.
• 익명 함수로, 이름이 없는 함수, 즉시 실행이 필요할 경우 사용하는 함수이다.

 

일반함수, 화살표 함수의 비교

function fun() { // 일반함수
	...
}

const arrFun = () => { // 화살표 함수
	...
};

화살표 함수 사용 예시

var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryl­lium"
];

var a2 = a.map(function(s){ return s.length });
console.log(a2); // logs [8, 6, 7, 9]

// 화살표 함수 사용
var a3 = a.map( s => s.length );
console.log(a3); // logs [8, 6, 7, 9]

//출처
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions#%ED%99%94%EC%82%B4%ED%91%9C_%ED%95%A8%EC%88%98

---

✉ 화살표 함수와 일반 함수의 차이

바인딩의 차이가 있다.

NOTE!
바인딩이란?
- 함수 호출과 실제 함수를 연결하는 방법.
- 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것.
- 바인딩은 정적 바인딩 ( static binding )과 동적 바인딩 ( dynamic binding )으로 구분할 수 있다.

정적 바인딩 ( static binding )	실행 시간 전에 일어남.  실행 시간에는 변하지 않는 상태로 유지.
동적 바인딩 ( dynamic binding )	실행 시간에 일어나거나 실행 시간에 변경됨

---

✉ 사전적 this

화살표 함수 이전까지 모든 함수는 고유한 this 값을 정의했다.

이런 방식은 객체 지향 프로그래밍 스타일과 맞지 않는다.

function Person() {
  // `Person()` 생성자는 `this`를 자신으로 정의합니다.
  this.age = 0;

  setInterval(function growUp() {
    // 느슨한 모드에서 `growUp()` 함수는 `this`를 전역 객체로 정의합니다.
    // 이는 `Person()` 생성자에 의해 정의된 `this`와 다릅니다. 
    this.age++;
  }, 1000);
}

var p = new Person();

//출처
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions#%ED%99%94%EC%82%B4%ED%91%9C_%ED%95%A8%EC%88%98

ECMAScript 3/5에서 이 문제는 this 안의 값을 뒤덮을 수 있는 변수에 할당하면서 해결했다.

function Person() {
  var self = this; // `self` 대신 `that`을 선택하는 사람도 있습니다.
                   // 어느 한 쪽만 선택하고 그것만 사용하도록 하죠.
  self.age = 0;

  setInterval(function growUp() {
    // 콜백은 기대하는 객체의 `self` 변수를 참조합니다.
    self.age++;
  }, 1000);
}

//출처
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions#%ED%99%94%EC%82%B4%ED%91%9C_%ED%95%A8%EC%88%98

---

✉ 화살표 함수는 이것이 다르다

• 화살표 함수에는 this 가 없다. 화살표 함수를 포함하는 객체 값이 사용된다.

아래 코드에서 setInterval 에 전달된 함수 내의 this 값은 화살표 함수를 둘러싼 함수의 this 와 같은 값을 갖는다.

function Person() {
  this.age = 0;

  setInterval(() => {
    // `this`는 person 객체를 가리킵니다.
    this.age++;
  }, 1000);
}

var p = new Person();

//출처
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions#%ED%99%94%EC%82%B4%ED%91%9C_%ED%95%A8%EC%88%98

---

∎ 1. this

일반 함수

자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.

- 일반 함수에서 this가 바인딩 되는 상황 -

1. 함수 실행 시에는, 전역 (window) 객체를 가리킨다.

2. 메소드 실행 시에는 메소드를 소유하고 있는 객체를 가리킨다.

3. 생성자 실행 시에는 새롭게 만들어진 객체를 가리킨다.

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 

화살표 함수

화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.

call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

function fun() {
	this.name = "하이";
    return {
    	name: "바이",
        speak: function () {
        	console.log(this.name);
        },
    };
}

function arrFun() {
	this.name = "하이";
    return {
    	name: "바이";
        speak: () => {
        	console.log(this.name);
        },
    };
}

const fun1 = new fun();
fun1.speak(); // 바이

const fun2 = new arrFun();
fun2.speak(); // 하이

//코드 출처
//https://velog.io/@yjh8806/%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-%EC%9D%BC%EB%B0%98-%ED%95%A8%EC%88%98%EC%9D%98-%EC%B0%A8%EC%9D%B4

일반 함수로 사용했을 경우.	바이가 출력. 자신이 종속된 객체를 this로 가리킴.
화살표 함수로 사용했을 경우.	하이가 출력. 자신이 종속된 인스턴스를 가리킴.

---

∎ 2. 생성자 함수로 사용 가능 여부

일반 함수

• 생성자 함수로 사용할 수 있다.

 

화살표 함수

• 생성자 함수로 사용할 수 없다.
  • prototype 프로퍼티를 가지고 있지 않기 때문이다.

function fun() {
	this.num = 1234;
}
const arrFun = () => {
	this.num = 1234;
};

const funA = new fun();
console.log(funA.num); // 1234

const funB = new arrFun(); // Error

//코드 출처
//https://velog.io/@yjh8806/%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-%EC%9D%BC%EB%B0%98-%ED%95%A8%EC%88%98%EC%9D%98-%EC%B0%A8%EC%9D%B4

---

∎ 3. arguments 사용 가능 여부

일반 함수

• 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용 가능하다.

 

화살표 함수

• arguments 변수가 전달되지 않는다.

//일반 함수
function fun() {
	console.log(arguments); // Arguments(3) [[1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}

fun(1, 2, 3);

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

fun(1, 2, 3);

//코드 출처
//https://velog.io/@yjh8806/%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-%EC%9D%BC%EB%B0%98-%ED%95%A8%EC%88%98%EC%9D%98-%EC%B0%A8%EC%9D%B4

일반 함수로 사용했을 경우.	arguments 변수가 전달되어 [1,2,3]이 찍힌다.
화살표 함수로 사용했을 경우.	arguments를 정의할 수 없다고 에러가 뜬다.

---

- 화살표 함수

https://developer.mozilla.org/

함수 - JavaScript | MDN

https://velog.io/

화살표 함수와 일반 함수의 차이