[JS 기본] 함수선언문 VS 함수표현식 / 콜백함수, 화살표함수 친해지기

 

[2.16] 함수선언문 VS 함수표현식 / 콜백함수

 

1) 함수 표현식

function ET() {
  alert( "E-T" );
}

- 이때 아래와 같이 ET함수를 ET()가 아닌 ET를 통해, 변수에 함수를 전달할 수 있다.

function ET() {
  alert( "E-T" );
}

let func=ET

func(); //E-T
ET(); //E-T

---

2) 함수 선언문

let ET = function() {
  alert( "E-T" );
};

- 함수에 변수를 할당한 것.

- 이때는 변수를 선언한 것과 마찬 가지임으로 블록 다음에 세미콜론을 붙여줘야함.

 

---

3) 함수표현식 VS 함수선언문 

함수 표현식	함수 선언문
표현식 안에 존재. 주로 할당 연산자 (=)와 함께	독자적인 구문 형태
실행 흐름이 해당 함수 부분에 도달했을 때 생성, 동시에 사용 가능	함수선언문이 정의되기 전에도 호출 가능 이유 : 스크립트 실행 전에 준비단계에서 전역에 선언된 함수를 찾고 생성해놓기 때문이다.
코드 블록 밖에 변수를 선언한 뒤, 코드 블록 안에서 미리 선언한 변수에 함수 표현식을 할당하면 밖에서도 사용 가능	함수 선언문이 위치한 코드 블록 내에서는 어디든지 접근 가능.  하지만 블록 밖에선 불가

 

---

4) 콜백함수

- 함수의 인수를 함수로 전달한 것을 콜백이라한다.

- 이때 함수 안에서 추후에 함수가 호출된다는 뜻으로 콜백은 '나중에 호출한다'라는 의미를 가진다.

- 아래 코드에서 like와 unLike 함수가 콜백함수가 된다.

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

function like() {
  alert( "저랑 같이 먹어요." );
}

function unLike() {
  alert( "안녕히 가세요." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("평냉을 조아합니까?", like, unLike);

- 위의 함수를 익명함수를 사용하면 더 짧게 표현할 수 있다.

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

ask("평냉을 조아합니까?",
	function() {alert( "저랑 같이 먹어요." );}:
    	function() {alert( "안녕히 가세요." );}
);

---

 

[2.17] 화살표 함수란?

 

- 아래와 같이 함수에 포함된 인자와 내용을 축약해서 적어주는 것.

- () 괄호 안에 인자가 없을 수도, 여러 개일 수도 있다.

- 또한 인자가 하나면 괄호가 없어도 된다.

- 본문이 여러줄이라면 {} 중괄호 사용!

let double = n => n*2;
let ET = () => alert("E-T");

let ask=(question, yes, no)=>{
  if (confirm(question)) yes()
  else no();
}

ask("평냉을 조아합니까?",
	()=>alert( "저랑 같이 먹어요." ):
    ()=>alert( "안녕히 가세요." );
);

 

---

💡 깨달은 점

- 화살표 함수와 콜백함수를 적절히 사용하면 간결하게 코드를 짤 수 있겠다.

- 함수 선언문을 사용하되, 특정 상황이 되면 적절히 함수 표현식을 만들어보자 :)

 

 

https://ko.javascript.info/arrow-functions-basics

화살표 함수 기본