면접-JavaScript #01 | 함수 선언식과 함수 표현식

function foo() {
  구현 로직
}

var foo = function () {
  구현 로직
};
//또는 (아래 권장)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  구현 로직
};

// 실행 전
logMessage();
sumNumbers();

function logMessage() {
  return 'worked';
}

var sumNumbers = function () {
  return 10 + 20;
};

// 실행 시
function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};

/* 정상 동작 */
var sumNumbers = function (num1, num2) {
  return num1 + num2;
};

printSumNumbers(sumNumbers, 10, 20);

function printSumNumbers(fn, num1, num2) {
  console.log(fn(num1, num2));
}

/* 오류 */
printSumNumbers(sumNumbers, 10, 20);

var sumNumbers = function (num1, num2) {
  return num1 + num2;
};

function printSumNumbers(fn, num1, num2) {
  console.log(fn(num1, num2));
} //sumNumbers가 선언식이었다면 정상동작

/* 클로저 없이 */
var tabs = document.querySelectorAll('.tab');
var i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = function (event) {
      console.log(i); // 어느 탭을 클릭해도 항상 tabs.length가 출력
    };
}

/* 클로저로 사용 */
function tabsHandler(index) {
    return function tabClickEvent(event) {
        console.log(index);
    };
}

var tabs = document.querySelectorAll('.tab');
var i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}