function(){} 과 ()=>{} 차이 질문

[임호균]

수업 매우 매우 잘 듣고있습니다.

질문이 있어 남깁니다.

이 부분은 chatroom.html에서 '안삼' 적고 전송버튼 누를때 firebase 메세지 컬렉션에 추가하는 부분입니다.

 

db.collection("chatroom")
.where("who", "array-contains", 내uid)
.get()
.then((result) => {
result.forEach((a) => {
var template = `<li class="list-group-item">
<h6>${a.data().product}</h6>
<h6 class="text-small">${a.id}</h6>
</li>`;
$(".chat-list").append(template);

$(".list-group-item").click(() => {
chatRoomId = $(this).children(".text-small").text();
console.log("채팅방 선택됨", chatRoomId);
});
});
});
var chatRoomId;

//send 누를 시 채팅 내용 남기기
$("#send").click(() => {
var 데이터 = {
content: $("#chat-input").val(),
date: new Date(),
uid: 내uid,
};
db.collection("chatroom")
.doc(chatRoomId)
.collection("messages")
.add(데이터)
.then(() => {
console.log("채팅 추가함");
});
});

 

------여기까지 제가 수업들으면서 짠 코드인데 arrow function 으로 짯을때 chatRoomId를 가져오지 못하더라구요.

한참을 작성하신 코드와 비교하며 뭐가 다른가 보다 보다,, 결국 찾은게  ()=>{} 이걸 function(){}으로 바꿨더니 가져오더라구요..

arrow function에서는 this를 다르게 처리 해줘야하는건가요? 아니면 못받으니 그냥 function을 써야하나요?

$(".list-group-item").click(() => {
chatRoomId = $(this).children(".text-small").text();
console.log("채팅방 선택됨", chatRoomId);

왜 arrow function 은 안되고, function(){}은 되나요...? 

[임호균]

한참 삽질하고 this 바인딩 이슈인걸 알고 찾아보니.. 상위 스코프에 this를 가져온다고 잘 설명된 글을 보았습니다.

답은 삽질에 있었네요...

https://velog.io/@wiostz98kr/JavaScript-this%EC%9D%98-4%EA%B0%80%EC%A7%80-%EB%B0%94%EC%9D%B8%EB%94%A9-%EC%BC%80%EC%9D%B4%EC%8A%A4%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98Arrow-Function

[codingapple]

arrow function 안에서 this 쓰면 함수 바깥에 있던 this를 그대로 사용합니다

그냥 함수안에서 this쓰면 상황에맞게 this를 정의해줍니다 

[글쓴이]

글