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

Arrow Function

• 함수를 간략히 정의할 수 있음
• 익명함수임
• function 키워드 대신 화살표를 사용    
• this를 묶는것이 가능
• new 연산자로 인스턴스 생성 불가
• new 생성자와 함께 호출 할 수 없다

---

실행문법

• 화살표 함수 정의가 한 줄인 경우 {} 와 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를 묶는것이 가능
• property에 화살표 함수를 연결하면 화살표 함수 블록에서 this가 인스턴스를 참조하지 못함

 

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

// 일반함수에서 this
box.addEventListener('click', function(){
	this.style.color="red" // box를 가리킴
})
// 화살표 함수에서 this
box.addEventListener("click", ()=>{
	this.style.color='red' // this가 Window 객체로 설정되어 property ~~ undefined 에러 발생
})


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

객체에서 화살표 함수의 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