함수리턴강의 질문

Question

const counterMaker = function () { const targetDateInput = dateFormMaker(); const nowDate = new Date(); const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); 위 함수에서 dateFormMaker()의 리턴값을 const targetDateInput 로 선언해서 targetDate 를 new Date(targetDateInput)로 선언해주셨는데 이 경우 new Date(dateFormMaker())처럼 리턴값을 바로 이용하는것 과 다른점이 무엇인가요?

otter · Answer

안녕하세요 흥불님! 좋은 질문 감사합니다! 우리가 작성하는 로직에서는 두가지 방식이 큰 차이를 보이지는 않습니다만, 엄밀히 말하자면 차이점은 존재합니다! 자바스크립트의 코드는 위에서부터 한줄씩 읽어 내려가며 실행됩니다. 따라서 강의에서 설명 드리는 방식은 counterMaker 함수가 실행되면, dateFormMaker 함수를 실행하고 targetDateInput 에 값이 담기게 된 후, nowDate , targetDate 에 차례대로 값이 담기도록 설명 드리고 있죠. const dateFormMaker = function () { console.log('dateFormMaker called'); // console.log const inputYear = document.querySelector('#target-year-input').value; const inputMonth = document.querySelector('#target-month-input').value; const inputDate = document.querySelector('#target-date-input').value; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; return dateFormat; }; const countMaker = function () { console.log('A'); // console.log const targetDateInput = dateFormMaker(); console.log('B'); // console.log const nowDate = new Date(); const targetDate = new Date(targetDateInput); // A => dateFormMaker called => B 순으로 출력 그렇다면 흥불님이 질문에 언급해 주신 방식은 어떨까요? 아마 dateFormMaker 함수의 실행 시점이 달라지게 되겠죠? 먼저 nowDate 에 현재 날짜가 담기게 되고 new Date 를 통해 targetDate 에 담길 값을 생성하고자 할 때, 그때, dateFormMaker 함수가 실행되겠죠. const dateFormMaker = function () { console.log('dateFormMaker called'); // console.log const inputYear = document.querySelector('#target-year-input').value; const inputMonth = document.querySelector('#target-month-input').value; const inputDate = document.querySelector('#target-date-input').value; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; return dateFormat; }; const countMaker = function () { console.log('A'); // console.log // const targetDateInput = dateFormMaker(); console.log('B'); // console.log const nowDate = new Date(); const targetDate = new Date(dateFormMaker()); // A => B => dateFormMaker called 순으로 출력 이렇듯 자바스크립트의 실행 관점에서 보자면 위와 같은 차이점이 발생하게 됩니다. 어떠한 방식이 더 낫다. 라고 이야기하긴 어렵겠지만, 이러한 차이점이 존재한다는 것을 알고 코드를 작성하신다면 로직을 구성하는데 도움이 되리라 생각됩니다!