화살표 함수

Question

화살표함수 사용할때 꼭 변수에 담아야 하나요?기본 사용법이 let user=()=>{} 이런식인데콜백함수로 사용할때let btn = document.queryselecter(“button”)btn.addEventListener(“click”,()=>{alert(“클릭!”)})실행되던데..변수로 안담아도 되는건가요?

Accepted Answer

변수에 담는건 재사용을 위해서 담는겁니다. let 으로 함수를 만드는건 상당히 위험하며, 함수를 만들어서 꼭 변수에 할당할 필요는 없습니다.

Answer

콜백함수같은 곳에 쓰이는 그 함수를 익명하수라고 부릅니다. 콜백함수로 간단하게 사용할 때 활용하는 수법입니다. 재사용은 고려하지 않은거죠. 그리고 함수와 같이 변해서는 안되는 것들은 let이 아닌 const로 만들어 재할당이 불가능하도록 하는 게 좋습니다.

함수까지 가셨으니 변수를 왜 쓰는지는 아실텐데, 변수에 담는 행위는 재사용을 위한 것입니다. 재사용하지 않을거면 변수에 담는 것은 의미가 없습니다. 변수에 담는 행위 자체가 "나중이 됐든 지금이 됐든 참조해서 쓰겠다"입니다.

꼭 화살표함수가 아니더라도 비슷합니다. 간단하게 클릭 이밴트를 걸때, 익명함수를 많이 씁니다.

document.querySelector(".btn-ok").addEventListener("click",function(){}); // arrow function : document.querySelector(".btn-ok").addEventListener("click",()=>{});

function 키워드로 만든 함수와 화살표 함수의 차이는 변수에 담아서 쓰냐 정도가 아닙니다.

기본적으로 아주 큰 두개의 차이점이 있습니다.

첫째로, this 바인딩입니다.

기본적으로 Javascript의 함수는 함수가 호출됐을 때 대상 위치를 this로 바인딩합니다. 즉,

document.querySelector(".btn-ok").addEventListener("click",function(){ console.log(this); });

이렇게 찍어보면 콜백으로 불러와진 버튼 자기자신이 console에 찍힌걸 볼 수 있습니다.

반면, 화살표 함수를 쓰면, 최상위 스코프 객체를 가리킵니다. 즉, Window 객체를 가리키게 됩니다.

class나 function으로 만들어진 생성자 객체를 new로 생성했을 때, 생성자 함수 안에서 화살표함수를 실행하면, 해당 생성자를 가리키게 됩니다.

둘째로는 호이스팅입니다.

function name(){ }

function 키워드를 통해 위 형식으로 만들어진 함수는 호이스팅이 발생하여 스코프 블럭 내에 맨 위로 올려지게 됩니다. 반면에 변수로 담아놓은 화살표 함수는 호이스팅이 일어나지 않습니다.

function으로 함수를 아래에 선언하고, 선언 전에 해당 함수를 써도 Javascript에서 실행이 가능한 이유입니다.

화살표 함수

변수에 담는건 재사용을 위해서 담는겁니다.

let 으로 함수를 만드는건 상당히 위험하며, 함수를 만들어서 꼭 변수에 할당할 필요는 없습니다.

Javascript 람다함수와 화살표 함수

자바스크립트 화살표함수

화살표 함수 호이스팅!!!

자바스크립트의 화살표 함수 괄호

자바스크립트 map사용시 화살표함수 질문

함수, 매크로 문의합니다(화살표 함수 관련)

React.js setState 화살표 함수 관련...

자바스크립트 화살표 함수 질문합니다

자바스크립트 화살표 함수

함수 화살표