[JavaScript] 화살표함수 vs 일반함수

 

✅ 일반 함수

• this는 마지막으로 자신을 품고있는 scope로 항상 변함 (❌어디서 선언했느냐❌ ⭕어디서 호출했느냐⭕)

const example = {
	name: "world",
	speak: function() {
		function getName() {
			return `${this.name}`;
		}
		return `Hello ${getName()}`;
	}
};
example.speak(); // Hello

 

//이를 해결하려면..
const example = {
	name: "world",
	speak: function() {
		//여기까지는 this에 객체 example이 bind돼있음
		const self = this; // self를 선언해서 결합시킴
		function getName() {
			return `${self.name}`;
		}
		return `Hello ${getName()}`;
	}
};
example.speak(); // Hello world

코드 출처

 

✅ 화살표함수 (Arrow Function)

• ES6에 등장^^...ㅎㅋ
• 상위 컨텍스트가 전역 = window
• () ⇒ {} 모양을 하고있음
• self 안써도 됨 (처음 바인딩 된 스코프 안에서 가리키는 this가 변하지 않음)

//위랑 같은 코드임
const example = {
	name: "world",
	speak: function() {
		const getName = () => {
			return `${this.name}`; //this를 정적(lexically)으로 결합시킴
		}
		return `Hello ${getName()};
	}
};
example.speak(); // Hello world

 

😨 화살표 함수 쓸 때 주의점!

• prototype 속성이 없음❌
• 생성자의 new 키워드와 같이 사용될 수 없음❌
• 메소드로 사용하면 안됨❌
• addEventListener 함수의 callback 함수로 사용하면 안됨❌ (내부에서 this를 사용하는 경우)

 

🤔 그리고 또 다른 차이점은?

• 기존의 function은 함수의 이름 자체를 지정해 줄 수 있지만,
  화살표 함수는 변수에 담아서 사용해야 함 (함수 자체의 호이스팅 불가)

function example() { console.log("function"); }
const example = () => { console.log("arrow function"); }

• 기존의 함수는 arguments를 사용해서 받아오는 인자들을 배열로 다음과 같이 사용 가능했으나,
  화살표 함수에서는 argument 대신 rest parameter 사용

💡 arguments 
arguments 객체는 함수에 전달되는 인수의 배열 집합. 아래와 같이 배열로 변환이 가능함.
let args = Array.prototype.slice.call(arguments);

const funcName = (...arg) => { console.log(arg) } // [1, 2, 3]
funcName(1, 2, 3);

 

 

 

😏 같이 보면 좋을지도 모르는 글

[JavaScript] JS의 Implicit Return (암시적 반환)

 

 

👀참고 (감사합니다)

https://kim-solshar.tistory.com/57

[자바스크립트] arrow function과 this

 

https://medium.com/@shlee1353/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-arguments-arrow-function-ba97bb84854e

자바스크립트 (arguments 객체, arrow function 화살표함수)

 

https://bluayer.com/25

[JavaScript] Arrow function과 this 키워드

 

https://helloinyong.tistory.com/74

[2019.04.17] ES6 문법 - arrow Function과 일반 function의 차이

 

https://velog.io/@modolee/javascript-function-vs-arrow-function

JavaScript - Function vs Arrow Function