Javascript 기초 (15) 함수 표현식

❤️‍🔥들어가면서❤️‍🔥

왜 이렇게 공부를 대충할까?? ^^

➕ 함수를 만드는 방법

함수를 만드는 방법에는 두개의 방법이 있다.
저번 글에서는 함수 선언문방식을 사용했고 이번 글에서는 함수 표현식에 대해서 알아보겠다.

1. 함수 선언문 방식

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

2. 함수 표현식 방식

• 함수를 만들고 그 함수를 변수에 할당하기

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

📕 함수 표현식

"함수를 만들고 그 함수를 변수에 할당하기"
함수도 본질적으로는 값이기 때문에, 변수에 할당할 수 있고, 복사해서 다른 변수에다가 할당할 수 있다.
👉 함수를 값처럼 전달할 수 있다.

let function1 = function (){
  return 3;
};

⚠️ 함수를 실행하는 것과 함수를 값으로 할당하는 것
함수를 출력하면 함수코드가 나온다.

//함수 선언
function return_num (){
  return 3;
}
//함수를 변수에 할당할 수 있다.
let function1 = return_num;

alert(function1); 		//함수 코드가 출력된다.

alert(function1()); 	//함수의 반환값인 3이 출력된다. 

👉 실행화면

📖 콜백함수

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이다.

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

function showNo(){
  alert("비동의")
}

function ask(question, Ok,No){		//인수로 함수를 전달받음.
  if(confirm(question)){
    Ok();							//인수로 받은 함수를 호출
  }else No();
  return;
}

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

콜백함수를 사용함으로써 한 테스크가 끝나고 나서 함수 B가 실행되는 것을 보장할 수 있다.

📖 익명함수

익명함수는 함수명이 없는 함수로 변수에 할당해서 사용한다.
콜백함수에 함수명 대신 함수코드를 전달하거나, 함수표현식에 쓰인다.

✍️ 함수표현식의 익명함수

let function1 = function (){
  return 3;
};

✍️ 콜백함수의 익명함수

function ask(question, Ok,No){
  if(confirm(question)){
    Ok();
  }else No();
  return;
}

ask(
  "동의하십니까?",
  function (){alert("동의")},
  function(){alert("비동의")}
  );

🤔 함수선언문 vs 함수 표현식

함수 생성 타이밍
자바스크립트 엔진이 언제 함수를 생성해서 언제 사용가능한지에 차이점이 있다.

함수 선언문 방식

• 스크립트 실행 전 초기화 단계에서 함수를 생성한다.
  👉 스크립트 실행전 정의되기 때문에 스크립트 어디에서나 사용할 수 있다.

함수 표현식 방식

• 스크립트 실행하면서 함수 표현식을 만났을 때 함수를 생성한다.
  👉 함수 표현식방식의 함수는 함수 표현식 전에 사용할 수 없다.

⚠️ 예시코드

• ❌ 익명함수를 변수에 할당하는 것은 호이스팅 적용안됨.

orange();

let orange = function(){
  alert("오렌지 좋아!")
} //실행 오류 js0805.js:63 Uncaught ReferenceError: Cannot access 'orange' before initialization

• ⭕ 함수 선언문에는 호이스팅 적용됨.

orange();

function orange(){
  alert("오렌지 좋아!")
}

더 알아보기

스코프(범위)
엄격 모드에서 함수 선언문이 코드 블록내에 위치하면 블록밖에서는 접근할 수 없다.
따라서 블록 밖에서 블록내 선언된 함수를 사용하고 싶을 때는 함수를 할당해서 사용할 수 있다.

❌ 실행오류

"use strict";
{
  function orange(){
  alert("오렌지 좋아!")
  }
  orange(); // 실행가능
}

orange();	//실행오류

⭕ 실행가능

let orange1;
{
  function orange(){
  alert("오렌지 좋아!")
  }
  orange1 = orange;
}

orange1();	//실행가능

❤️‍🔥마무리하면서❤️‍🔥

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