함수 표현식

함수 표현식.

함수 선언식에 대해서는 앞서 다뤄보았다.
이번에는 표현식에대해 알아본다.

자바스크립트에서는 함수를 특별한 종류의 값으로 취급한다.

함수 선언식

function say(){
  alert("Hi!");
}

표현식

let say = function(){
  alert("Hi!");
}

표현식을 살펴보니 함수가 변수에 할당된 모양이다.
함수가 어떤 방식으로 만들어 졌는지에 관계없이 함수는 값이 되고, 따라서 변수에 할당이 가능하다.

자바스크립트에서 함수를 호출할 시에는 반드시 뒤에 소괄호를 붙일것.

함수는 say() 처럼 호출할 수 있다는 점 때문에 일반적인 값과는 다르다.
따라서 특별한 종류의 값이라고 불린다.
그러나 본질은 뭐라해도 값이기 때문에 값에 할 수 있는 일을 함수에도 할 수 있다.

변수를 복사해 다른 변수에 할당하는 것처럼 ,
함수를 복사해 다른 변수에 할당할 수 있다.

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

let func = sayHi;

func(); // Hello => 복사된 함수가 실행된다.
sayHi(); // Hello => 원래 함수가 실행

먼저 함수 선언 방식에 의해 함수가 생성되었다.
생성된 함수는 sayHi라는 변수에 저장이 된다.
이것을 새로운 변수 func에 담는데 이때 sayHi라는 함수에는 소괄호 없이 변수처럼 사용되어 담긴다.
괄호가 있는것이 담겼다면 함수 그 자체가 아니라 함수의 실행결과가 func이라는 변수에 저장된다.

이렇게 함수를 복사하니 func을 실행하면 sayHi라는 함수가 복사되었기에 sayHi를 실행했을때와 동일한 결과를 내보인다.

함수 sayHi를 표현식으로 작성한다면 아래와 같다.

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

함수 표현식에는 선언식의 끝에 안붙는 세미콜론이 붙은다.
이유는 중괄호로 만든 코드 블록 끝에는 세미콜론이 없어도되지만,
함수 표현식에서는 let sayHi =...;과 같은 구문의 값의 역할을한다. 이것은 코드블록이 아니고 값처럼 취급이 되어 변수에 할당이되는것이다.
다시말해 구문의 끝이기에 세미콜론이 붙은 것이다!!

---

콜백 함수

함수를 값처럼 전달하는것이다.

매개변수가 3개 있는 함수 ask(question,yes,no)를 작성해서 살펴보도록 하자.

question이라는 매개변수는 질문이
yes는 yes라고 답했을때 실행되는 함수가
no는 no라고 답했을때 실행되는 함수가 들어가게된다.

함수는 반드시 question을 해야하고 답변에 따라 실행되는 함수가 다르다.

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

function showOk(){
  alert("동의함");
}

function showCancel(){
  alert("취소함");
}

ask("동의하십니까?",showOk,showCancel);

함수 ask에 들어가는 인수들중, showOk와 showCancel이라는 함수들을 콜백함수, 또는 콜백이라고 부른다.

함수를 함수의 인수로 전달하고 매개변수로 받음. 이 매개변수로 받은 함수를 나중에 호출하는 것이 콜백함수의 개념!!

함수 표현식을 사용하면 코드를 더 짧게 작성할 수 있다.

function ask(question,yes,no){
	if(confirm(question)) {
  		yes()
	}
		else {
 		  no()
		};
};
	
ask{
  "동의하십니까?",
    function(){alert("동의함")},
    function(){alert("취소함")}
}

ask안에 인수로 함수가 선언되었다.
이렇게 이름없이 선언된 함수를 익명함수 라고 부른다.
익명함수는 변수에 할당하지 않은 것이기에 ask밖에서는 접근이 불가하다.

---

함수는 동작을 나타내는 값이다.
동작을 대변하는 값인 함수를 변수 간 전달하고 동작이 필요할때 이 값을 실행할 수 있다.

함수 표현식과 선언문

• 첫번째 차이 -문법

함수 선언문은 함수 주요 코드 흐름 중간에 독자적인 구문형태로 존재한다.

function sum(a, b){
  return a + b;
}

함수 표현식은 구문 구성 내부에 생성된다.
함수가 할당 연산자를 이용해 만든 할당 표현식 우측에 생기는 등...

let sum = function(a, b){
  return a + b;
}

• 두번째 차이 -언제실행하는가

함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을때 함수를 생성.
따라서 함수에 도달했을 때부터 함수를 사용할 수 있다.

=> 도달하면 함수가 생성되고 이때 이후부터 함수를 사용할 수 있다.

함수 선언식은 함수 선언문이 정의되기도 전에 호출이 가능하다.
자바스크립트는 스크립트를 실행하기 전에 전역에 선언된 함수 선언문을 찾고 해당 함수를 생성한다. => 이 단계를 미리 읽는다고 표현하자.
미리 읽어서 저장을 해 놓았고, 스크립트는 함수 선언문이 모두 처리된 후 실행되기에 스크립트 어디에서든 함ㅁ수 선언문으로 선언한 함수에 접근이 가능하다.

표현식의 경우에는 함수가 선언되기 전 접근하는 것이 불가능하다.

• 세번째 -스코프
  엄격모드에서 함수 선언문이 코드블록 내에 위치하면 해당함수는 블록 내 어디에서는 접근이 가능하다. 다만 블록 밖에서는 접근이 불가능하다.

함수 표현식에서는 변수에 할당하기 떄문에 접근할 수 있다.

---

정리

• 함수는 값. 따라서 함수도 값처럼 할당, 복사, 선언이 가능
• 함수 선언문 방식으로 함수를 생성한다면 함수가 독립된 구문 형태로 존재하게 됨.
• 함수 표현식 방식으로 함수를 생성한다면 함수가 표현식의 일부로 존재..
• 함수 표현식은 실행 흐름이 표현식에 다다랐을때 만들어짐.
• 함수 선언문은 코드 블록이 실행되기도 전에 함수를 활용할 수 있음.