JavaScript - arrow function & function

본 필자(?)는 언어를 독학할 때 이론은 스킵때리고 사용법과 응용법을 익히며 코드를 짜왔다.

그로 인해 놓쳤던 부분이 많은데, 의도치 않게끔 알게되는 이론들을 조금씩 끄적여 본다..

 

arrow function

arrow function 즉 화살표 함수는 언제 추가됐는지 모른다.

정확히는 까먹었다.

뭐... 딱히 쓰이는 곳도 업고 해서 까먹었는데 나로썬 화살표 함수를 애요하게 됐다.

이유야 뭐 별거 없이 그냥 깔끔하게 보기 좋은 함수 사용법인 것 같기 때문이었다.

async await같은 고론 느낌?

근데 이번에 알게된 사실은 arrow function != callback function 이라는 것!

 

 What's different?

this나 super를 통한 바인딩이 불가능 하다.

어려워 보이지만 그냥 this, super라는 문법을 사용할 수 없다는 것 뿐이다.

 

먼저 this!

this문은 사용처에 따라 약간씩 역할이 바뀐다.

함수에서 사용될땐 window를 가져다 준다.

최 상위 값을 주는거다.

 

메소드에서 작동된다면 해당 메소드를 가진 객체를 가져다 준다.

const obj = {
	a: function() {},
    b: "b",
    c: "c"
}

function main() {
	obj.a()
}

위와 같은 코드에서 this를 뽑아보면 "obj"가 나오는 것이다.

 

마지막으론 생성자 실행시 해당 생성자를 갖다준다.

근데 화살표 함수는 이런 this문을 사용할수 없다.

그래서 보통 callback함수에 사용하는데 애시당초 콜백 함수는 this를 바인딩 해주기 때문이다.

 

호이스팅!

호이스팅이란 무엇인가!

 

이것도 별거 없다.

기존에 쓰던 코드에 var를 통한 변수 선언식을 많이 봐왔을 것이다.

하지만 여러 곳에서 "var를 써선 안된다. let, const를 써야 한다." 고 할 것 이다.

그 이유가 호이스팅에 있는데

왜 이렇게 만들었는지 의문이지만 호이스팅이란?

변수 선언식을 코드의 최 상당으로 끌어 올리는 작업이다.

전역 변수 같은 것들이면 뭐가 문제냐? 라고 할 수 있는 부분이다.

하지만 이상하게 if나 for문 안에서 선언되는 변수도 끌고 나온다.

이게 뭔 상황인지;;

const callA = a()

console.log(typeof callA)

function a() {    
    console.log("a")
}

이런 코드가 실제 호이스팅이 적용된다면

var callA;

function a() {    
    console.log("a")
}

callA = a()

console.log(typeof callA)

이런식으로 바뀌게 되는 것이다.

그럼 화살표 함수랑 호이스팅이 뭔 상관이냐?

 

아래 코드를 살펴 보자.

 function main() {
	console.log(findName) // undefinded == 호이스팅으로 선언은 됐으나 할당이 안됨.
    
    const result = fileName() // ERROR!! 함수가 선언은 안됐기에 에러가 뜬다.
    
    const findName = () {
    	blabla...
    }
}

이렇게 오류가 뜬다.

 

이부분만 주의해서 써도 좋은 문법임은 틀림 없는 사실인 것 같다.