함수 선언식 & 함수 표현식

Function Declaraions (함수 선언식)

Syntax

function 함수명() {
	// 구현 로직
};

Function Expressions (함수 표현식)

Syntax

let 함수명 = function() {
	// 구현 로직
};

차이점

선언식은 Hoisting에 영향을 받지만, 표현식은 영향을 받지 않는다.

hey();

// 선언식
function hey() {
	alert('Hello..!');
};

함수 호출이 선언보다 앞에 있어도 호이스팅(함수가 파일의 맨 앞에 정의된 것처럼 처리) 되기 때문에 위 코드는 제대로 작동한다.

hey();

// 표현식
const hey = function () {
	alert('Hello..!');
};

TypeError: hey is not a function

함수 표현식의 장점

클로저로 사용

다른 함수의 스코프에 있는 변수에 접근 가능한 함수
함수를 실행하기 전에 해당함수에 변수를 넘기고 싶을때

• 인수가 있는 클로저

function greet(name) {
  const greeting = 'Hello, ';

  function sayHello() {
    console.log(greeting + name + '!');
  }

  return sayHello;
}

const sayHelloToJohn = greet('John');
sayHelloToJohn(); // Output: 'Hello, John!'

greet() 안 sayHello() 는 greet() 안 greeting 과 greet()가 매개변수로 받은 name에 접근함

• 비동기 함수를 사용한 클로저

function getData(url) {
  let data = null;

  fetch(url)
    .then(response => response.json())
    .then(json => data = json);

  return function() {
    console.log(data);
  }
}

let getDataFromAPI = getData('https://example.com/api/data');
setTimeout(function() {
  getDataFromAPI(); // Output: JSON data retrieved from API
}, 1000);

1초 지연 후 getDataFromAPI() 가 실행되면 API통신을 통해 받은 데이터가 콘솔에 찍힘

콜백으로 사용(다른 함수의 인자로 넘길 수 있음)

콜백함수

let click = () => {
	alert('click..!');
};

document.getElementById('myid').addEventListener('click', click);

.addEventListener() 의 인자로 표현식을 넘겨 주었다.