[Javascript] 화살표 함수(Arrow Function)

화살표 함수

• ES5(ES2015) 에 새로 도입된 함수 작성법, 표현식 함수의 간략한 버전
• function 키워드 대신 화살표를 사용
• this 바인딩 주의
• new 연산자로 인스턴스 생성 불가, new 생성자와 함께 호출 할 수 없음

사용 주의점

주의사항	설명
this를 가지지 않음	메서드로 사용 X, 이벤트 핸들러로 직접 사용 시 주의
arguments 객체 없음	function에서는 사용 가능하던 arguments 사용 불가
생성자 함수로 사용 불가	new ArrowFunction()

---

문법

• 화살표 함수 정의가 한 줄인 경우 {} 와 return 생략 가능
• 파라미터가 1개인 경우 () 생략 가능

// 기본 문법
(매개변수) => {} 

// 한 줄일때 표현 ({}와 return 생략 가능)
const func = (a) => a+2

// 파라미터(매개변수)가 1개 인 경우 () 생략 가능
const func = a => ()

// 다른 선언 방법
const func = x => y => z => `${x], ${y}, ${z}`
// 일반 함수로 표현하면 아래오 같음
function func(x){
	return function(y){
    	return function(z){
        	return `${x], ${y}, ${z}`
        }
    }
}
func(2)(4)(8)




// (key,value) object 반환 시 소괄호 사용
let get = param => ({sport:'soccer'})

// bool
(매개변수) => {
} bool 표현식 || boolean 값이 거짓을 떄 실행할 문장

---

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

구분	화살표 함수	일반 함수
this	외부 스코프 상속 - 자신이 this를 가지지 않음    자신이 정의 된 외부 스코프의 this를 그대로 사용 - this를 묶는 것이 가능 - property에 화살표 함수를 연결하면 화살표 함수 블록에서  this가 인스턴스를 참조하지 못함 - 내부 콜백에서 this가 바뀌는 문제를 피하고 싶을때, 화살표 함수를 사용	호출 방식에 따라 결정 호출된 문맥에 따라 "this"가 바뀜
arguments	사용 불가	사용 가능
생성자 (new)	불가능	가능
메서드 정의에 적합	❌	⭕

const box = document.querySelector('.box')

// 일반함수에서 this
box.addEventListener('click', function(){
	this.style.color="red" // box를 가리킴
})
// 화살표 함수에서 this
/*
 - 화살표 함수는 자신만의 this를 가지지 않음
 - 대신 함수가 정의된 시점의 this(상위 스코프의 this) 를 그대로 상속받음
 - 해당 this의 상위스코피는 window(브라우저 전역 객체)
*/
box.addEventListener("click", ()=>{
	this.style.color='red' // this가 Window 객체로 설정되어 property ~~ undefined 에러 발생
})


// 화살표 this의 적절한 활용
/*
- 여기서 addEventListener는 일반함수로 등록되어 this는 box를 가리킴
- setTimeout 함수를 화살표 홤수로 사용하여 외부의 this를 그대로 가져옴 
  (※setTimeout은 비동기적으로 실행되는 함수이기 때문에
   여기서 setTimeout(function(){..} 처럼 일반함수를 사용했다면, this는 window를 가리킴
   
   !" 내부 콜백에서 this가 바뀌는 문제를 피하고 싶을때, 화살표 함수를 사용 "
   
   function()은 this를 "호출하는 방식"에 따라 정함
   - 첫 번째 function()은 addEventListener가 box 기준으로 호출해줌
     → 그래서 this === box
    - 두 번째 function()은 1초 뒤에 setTimeout이 직접 호출
     → 이때 **일반 함수는 전역 객체(window)**를 this로 바꿈
     → 따라서 this === window
   - setTimeout(함수, 시간)은 1초 뒤에 함수만 따로 전역 컨텍스트에서 호출함
   - 이때 일반 함수는 주변 문맥을 기억하지 못하고, 자기만의 this를 다시 설정해버림 → window

  
*/
box.addEventListener("click", function () {
	this.style.color = "red";
	setTimeout(() => { 
		this.style.color = "black"; // 이 this는 상위스코프에 상속되어 box를 가리켜 정상 작동
	}, 1000);
});

 

 

구분	일반함수	화살표 함수
this 결정 방식	호출 시점에 결정됨	정의된 시점의 this를 상속
setTimeout 내부에서 this	window (전역 객체)	바깥의 this (예: box)
시간 때문인가요?	X 시간보단 호출 방식 때문!	O

---

객체에서 화살표 함수의 this

const obj1 = {
	num: 1,
	test: function () {
		this.num++; // obj1.num을 가리켜 정상 구현
		console.log(this.num);
	}
};

obj1.test(); // 2

const obj2 = {
	num: 1,
	test: ()=> {
		this.num++; // this가 window 객체를 가리켜 오류 발생
		console.log(this.num); 
	}
};
obj2.test(); // NaN

 

---

화살표 함수에서  arguments

• arguments 객체는 함수 내부에서 접근할 수 있는배열 객체로 해당 함수에 전달돼 인수의 값을 담고 있음
• 일반함수에서 arguments는 배열 표기법을 사용하여 해당 인수에 접근 가능
• 화살표 함수에서 arguments는 스프레드 문법을 활용하여 해당 인수에 접근 가능

 

// 일반함수의 arguments 활용
function test(){
	 console.log(arguments[0])
 }
test(1,2) // => 1

// 화살표 함수의 arguments의 잘못된 사용
const show=()=>{
	const name = arguments[0]
	console.log(`name : ${name}`)
}
show('j','a','b') // 오류 :arguments is not defined 

// 화살표 함수의 arguments 적절한 사용(스프레드 문법 활용)
const show2 = (...args) => {
	const name = args[0]
	console.log(`name : ${name}`)
}
show2('a','b','c') // name:a