[JavaScript] function, function() 차이

JS에서는 함수를 주고 받는 과정이 빈번하다.

그러다보면 function, function()을 쓰게 된다.

 

addEventListenr('click', function)이 맞지, addEventListenr('click', function())이 아니다.

function()를 해버리면, 코드를 실행시킬때 'click'여부와 관계없이 함수가 실행된다.

 

우리가 원하는 것은 'click'했을 때, function이 실행되는 거지

click 여부와 상관없이 함수가 실행되는 것이 아니다.

 

const modal = document.querySelector('.modal');
// console.log(modal);

const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelectorAll('.show-modal');
// console.log(btnOpenModal);

const openModal = function () {
  console.log('Button Clicked');
  // class name 더 구체화 가능함
  // 단 selector가 아니기 때문에 '.' 찍지 말 것!!
  // ex) 'hidden test' -> modal.classList.remove('hidden', 'test')
  // remove는 특정 태그이름을 지워주는 것이므로, 그 이름을 가지고 있는지 확인하는 과정이 필요함.
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

// python은 for문이 끝나야 다음 줄로 넘어 간다.
// 이럴 경우 js에서 만약 click이 발생하지 않아도 반복문이 끝나는건지?
for (let i = 0; i < btnOpenModal.length; i++) {
  btnOpenModal[i].addEventListener('click', openModal);
}

// closeModal()이 아니라 closeModal인 이유? 80강 12분40초
// closeModal()하면 자바스크립트줄이 실행되면 바로 closeModal 함수 실행됨
// 우리가 원하는 건 자바스크립트가 아니라 click 될 때 closeModal이 실행되길 원함.
btnCloseModal.addEventListener('click', closeModal);
// 닫기가 아니라 바깥 창 눌러도 원상복구 되도록
overlay.addEventListener('click', closeModal);