[JS] 함수 선언문 / 함수 표현식 / 콜백 함수(call back)

함수 선언문

function 함수명(매개 변수) {
                  ...
}

 

 

호출

함수명(인수);

 

function sayHi() {
  alert( "Hello" );
}
// 선언

sayHi();
// 호출

 

 

---

 

함수 표현식

: 함수를 생성해서 변수에 저장함

let 변수 = function( ) {
              ...
};

 

 

• 함수를 실행하고⭕ 전달하면 👉 함수의 반환값(return)을 전달
• 함수를 실행하지 않고 ❌ 전달하면 👉 함수 본문을 전달

function sayHi() {
   return 'hello'
}

const a = sayHi() // 'hello'
// 함수 실행 O -> 함수 값이 저장됨

const b = sayHi // function
// 함수 실행 X -> 함수 자체가 저장됨 

const c = function() {
   return 'hello'
}

*결론: b = c

 

 

---

 

함수 선언문  vs  함수 표현식

(1) 문법

• 함수 선언문
  : 주요 코드들 중간에 독자적인 구문 형태로 존재
  
  
• 함수 표현식
  :할당 표현식 내부에 생성

(2) 함수 생성 시기

• 함수 선언문
  : 스크립트를 실행하기 전, (미리 함수 선언문을 찾고) 함수 생성
  => 선언문의 위치에 상관없이 어디서든 사용 가능 O
  
  
• 함수 표현식
  : 스크립트 실행 흐름이 해당 함수에 도달했을 때, 함수 생성
  => 표현식이 선언된 후에 사용 가능 O
  (함수가 선언되기 전에는 접근 불가능)

 

 

 

(3) 스코프 (변수의 범위)

• 함수 선언문
  : 선언문이 코드 블럭 내에 위치하면 어디서든 접근 가능 O
  (코드 블럭 밖에서는 접근 불가능)

let age = prompt("나이를 알려주세요.", 18);

// 조건에 따라 함수를 선언함
if (age < 18) {
  function welcome() {
    alert("안녕!");
  }

} else {
  function welcome() {
    alert("안녕하세요!");
  }
}

// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined

 

 

• 함수 표현식
  : 코드 블럭 밖에서 변수를 선언하고, 해당 변수에 함수를 할당하면 코드 블럭 밖에서 사용 가능 O

let age = prompt("나이를 알려주세요.", 18);
let welcome;

if (age < 18) {
  welcome = function() {
    alert("안녕!");
  };

} else {
  welcome = function() {
    alert("안녕하세요!");
  };
}

welcome(); // 제대로 동작합니다.

 

---

 

콜백 함수(call back)

: 나중에 (조건에 의해) 실행되는 함수

• 함수의 인수로 함수 본문이 전달되고 그 인수를 인자가 받아서 함수 내부에서 호출해서 사용하는 것
• 함수 이름이 있어도 되고 없어도 됨
• 함수 내부의 값을 외부로 꺼내서 쓰기 위해 사용 (비동기 통신에 사용)

function ask(질문, yes, no) {

  if (질문 === true) {
    yes() // 콜백 함수
  } else {
    no()
  }
}

function showOk() {
  return 'ok'
}

function showCancel() {
  return 'no'
}

ask('동의하시겠습니까?', showOk, showCancel);
ask('동의하시겠습니까?', function(){return 'ok'}, function(){return 'no'}}); // 이렇게도 가능
ask('동의하시겠습니까?', () => 'ok', () => 'no'); // 화살표 함수 버전

 

 

예시 2

let cb = function (isActive, success, fail) {
  if (isActive) {
    success()
  } else {
    fail()
  }
};


cb (false, 
  function(){
    console.log('성공');
  }, 
  function(){
    console.log('실패');
  }
)

 

 

예시 3

function movePage(url, success, fail) {
  if (url === 'https://www.naver.com') {
    success(url) // 주소('https://www.naver.com') 변수를 전달

  } else {
    fail()
  }
}


movePage (
  'https://www.naver.com',

  function(site){
    console.log(`현재 입력하신 url은 ${site}입니다. 3초 뒤 해당 사이트로 이동합니다.`);
  }, 
  // 위의 success()에서 인수로 전달된 url을 받아서 변수 site로 사용한다.

  function(){
    console.log('잘못된 url입니다.');
  }
)

 

---

 

즉시 실행 함수 표현식(Immediately Invoked Function Expression)

: 함수가 선언됨과 동시에 실행되는 것

(function () {
       ...
})()

 

• 매개변수, 인자를 받을 수 있다.
• ✨ 즉시 실행할건데 왜 함수로 만드는가?
  👉 스코프(범위)를 보호하기 위해 (= encapsulation(캡슐화))
  - var는 블록 스코프 X, 함수 스코프 O ➡ var의 스코프를 보호하기 위해 사용됨

 

예시

const MASTER = (function (tiger){

  tiger.alert()
  // 인자로 받은 window를 tiger로 쓸 수 있음

  let uuid = 'asdfg'
  // uuid라는 변수가 보호됨

  return {
    getKey() {
      return uuid
    },
    setKey(value) {
      uuid = value
    }
  }
})(window)


uuid = 'asdfgjdjd'
// uuid 변수 수정 불가능

 

 

---

 

함수

 

함수 표현식