본문 바로가기

Web/JavaScript

[Function Declaration] 함수표현식, 콜백함수

728x90

 

function sayHi() {
  alert( "Hello" );
}

는 아래와 같다

let sayHi = function() {
  alert( "Hello" );
};

let func = sayHi; //함수 복사


func();
sayHi();
// 둘다 같은 함수로 동작한다




###참고###
세미콜론 차이 꼭 알아둘 것

function sayHi() {
  // ...
}

let sayHi = function() {
  // ...
};

 

 

 

콜백함수

 

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}


### question 이 들어 왔을 때 -> 결과에 따라yes 또는 no 호출


function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);







더 코드 줄이기
function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

 

 

 

함수 표현식과 함수 선언문의 차이

 

설명을 살펴보니 시각적으로 제일 큰 차이는 "=" 의 좌항 우항이 있느냐인 것 같다

// 함수 선언문
function sum(a, b) {
  return a + b;
}

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

 

두번째 차이는 언제 js 엔진이 함수를 생성하는지 이다.

함수 표현식은 해당 함수 도달 시에 생성하고

함수 선언문은 정의 전에 호출이 가능하다

 

 

 

  • 함수는 값이다. 할당, 복사, 선언이 모두 가능하다.
  • “함수 선언(문)” 방식으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재한다.
  • “함수 표현식” 방식으로 함수를 생성하면, 함수가 표현식의 일부로 존재한다.
  • 함수 선언문은 코드 블록이 실행되기도 전에 처리된다. 따라서 블록 내 어디서든 활용 가능하다.
  • 함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어진다.
728x90

'Web > JavaScript' 카테고리의 다른 글

[기본] garbage collection  (0) 2023.10.26
[nullish] 병합 연산자 '??'  (0) 2023.10.25
[기본] type of 및 자료형 요약정리  (0) 2023.10.23
[기본] 자료형 - 객체  (1) 2023.10.23
브라우저 이벤트 정리 3. drag and drop  (0) 2023.10.22