Node.js-function화의 이해

첫번쨰

첫번째 시도

var template=`~~`가 있던 43번째줄을 통으로 templateHTML()이라는 함수로 대체하려고 해봤다

문제 발생

16번째 줄의 변수 title이 정의되지 않았다는 에러 발생

문제 발생원인

title은 41번째 줄에 정의 되어 있으나 변수선언의 호이스팅 원리에 따라

var title 이 맨 위로 올라가고

변수 할당인 title = 'welcome'이 41번째 줄에 남게 된다

따라서 순차적으로

var title

${title}

title = 'welcome'

순서가 되기 때문에 

${title}이 undefinded가 되는 것이다

문제 해결

teplateHTML()함수에 인자와 매개변수를 주자

43번째 줄에서 templateHTML(title, lits, data);와 같이 인자를 주게 되면 

각각의 인자들인 변수들이 모두 할당이 되어 있는 상태이기 때문에

11번째 줄의 templatedHTML(a, b, ,c){~~}와 연동이 되어 각 자리와 매개변수에 맞게 대입이 되어 함수가 작동하게 된다

 

 

두번째 시도

첫번째시도의 문제를 보완하여 매개변수와 인자를 주었다

문제 발생

45번째 줄의 template변수가 정의되지 않았다는 에러 발생

문제 발생 원인

12번째 줄의 var template는 선언한 templateHTML()함수 내에서 지역변수로 작동하기 때문에 외부에서는 변수가 정의 되어 있지 않는 상태인 것이다

문재 해결

1. var template = 를 template =로 바꿔주면 지역변수에서 전역변수로 변하기 때문에 문제가 해결된다

그러나 이는 함수내의 변수가 외부의 변수를 오염시켜 또다른 예상치 못한 결과를 가져올 수 있기 때문에 좋은 방법이 아니다

2. vat template = 를 43번째 줄에 남겨놓고 그 내용만 함수로 정의시킨다
*이때 그 내용을 리턴값으로 주어야 한다

 

 

최종본