Arrow function - 화살표 함수

크롱·2023년 8월 10일
0

JavaSrcipt

목록 보기
38/53

🌈 소괄호/중괄호 생략 가능

파라미터가 하나라면 소괄호 생략가능

var 두배만들기 = x => { return x * 2 }

중괄호 안에 return 한줄 뿐이라면 중괄호와 return도 생략가능합니다.

var 두배만들기 = x => x * 2 ;

⚡ 예시

this에 대해 다시 알아봅시다.


--html
<button id='버튼'>버튼</button>



---
document.getElementById('버튼').addEventListener('click', 
(e)=>{
  console.log(this); 
  
  //window 
  바깥의 this값이기때문!
  
});  
  
 만약 화살표함수가넘 편하면,this 대신e.currentTarget쓰면됨.
  
 
 
 --화살표 함수 말고 일반 함수쓸땐 

document.getElementById('버튼').addEventListener('click', 
function(e){
  console.log(this); 
  
  //<button id='버튼'>버튼</button>
  //e.currentTarget 이랑 똑같음
});
  
  

오브젝트에서도 마찬가지입니다.


var obj ={
	함수:()=>{
    	return this
    }
}

obj.함수() // window객체.

obj 오브젝트 보다 더 위에잇는 상위 this를 가져오기때문에 
window 객체를 가져옵니다.
this값은 함수를 만나면 항상 변하는데 
arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 씁니다.

(오브젝트 밖에 있던 this는 window입니다.)  
profile
👩‍💻안녕하세요🌞

1개의 댓글

comment-user-thumbnail
2023년 8월 10일

훌륭한 글 감사드립니다.

답글 달기