함수를 만드는 방법

함수

함수선언 (Function Declaration)

function 함수이름(파라미터) {
  동작부분
  
  return 리턴값
}

 

함수표현식 (Function Expression)

const printCodeit = function () {
  console.log('Codeit');
};

printCodeit(); // Codeit

const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', function () {
  console.log('button is clicked!');
});
/*
function () {
  console.log('button is clicked!')
}
-> 함수선언을 값처럼 사용
*/

 

 

함수선언 VS 함수표현식

함수선언

- 선언하기 전에 호출 가능

PrintCodeit(); // Codeit

function printCodeit() {
  console.log('Codeit');
}

// 호이스팅
// -> 선언문이 윗쪽으로 끌어올려지는 현상

 

- 함수수코프를 가짐

- 함수 안에 선언된 함수는 함수 밖에서 호출 불가능

function printCodeit() {
  function printJS() {
    console.log('JavaScript');
  }
  
  console.log('Codeit'); // Codeit
  printJS();
}

PrintCodeit(); // JavaScript
printJS(); // ReferenceError

 

함수표현식

- 선언이전에 표현 불가능

printCodeit(); // ReferenceError

const printCodeit = function () {
  console.log('Codeit');
}

 

- 할당된 변수에 따라 스코프 결정

var printJS = function () {
  console.log('JavaScript');
};

let printHi = function () {
  console.log('Hi');
};

const printCodeit = function () {
  console.log('Codeit');
};

 

QUIZ 01

다음 코드의 결과와 원인을 바르게 예측한 친구는 누구일까요?

const x = 5;

if (x < 5) {
  const printHi = function () {
    console.log('Hi');
  }; // false
}

printHi(); // Error

 

QUIZ 02

다음 중 에러가 발생하는 코드를 선택해주세요.

{
  function sayHi() {
    console.log('Hi!');
  }
}
sayHi();

{
  let sayHi = function () {
    console.log('Hi!');
  };
}

sayHi();

// Error -> let은 지역변수로 함수밖에서는 불가능

sayHi();

function sayHi() {
  console.log('Hi!');
}

const sayHi = function () {
  console.log('Hi!');
};

sayHi();