[javascript]자바스크립트 함수표현식

rondido·2022년 9월 1일
JavaScript자바스크립트함수함수 표현식
0

Javascript

목록 보기
11/21

함수 표현식

  • 자바스크립트는 함수를 특별한 종류의 값으로 취급. 다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급
function sayHi(){
	console.log("Hello");
}
  • 함수 표현식을 사용하여 함수를 생성
let sayHi = function(){
	console.log('Hello");
};

  • 함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당, 함수가 어떤 방식으로 만들어졌는지에 관계없이 함수는 값이고, 따라서 변수에 할당

  • 자바스크립트는 SayHi 옆에 괄호가 없기 때문에 함수는 실행, 어떤 언어에선 괄호 없이 함수 이름만 언급해도 함수가 실행 하지만 자바스크립트는 괄호가 있어야만 함수가 호출

  • 자바스크립트에서 함수는 값이다. 따라서 함수를 값처럼 취급, 아래 코드에서는 함수 소스 코드가 그대로 출력

  • 함수는 sayHi()처럼 호출할 수 있다는 점 때문에 일반적인 값과는 조금 다름.

function sayHi() {
    console.log( "Hello" );
  }
  
  console.log( sayHi ); //function:sayHi

function sayHi() { // (1)함수 생성
    console.log( "Hello" );
  }

  let func = sayHi; // (2) 함수 복사

  func(); //Hello 출력 (3) 복사한 함수를 실행(정상적으로 실행)
  sayHi(); //Hello 출력 본래 함수도 정상적으로 실행

  1. (1)에서 함수 선언 방식을 이용해 함수를 생성. 생성한 함수는 sayHi()라는 변수에 저장

  2. (2)에선 sayHi()를 새로운 변수 func에 복사 이때 sayHi 다음에 괄호가 없다는 점에 유의

  3. 이젠 sayHi()와 func()로 함수를 호출

function sayHi() { // (1)함수 생성
    console.log( "Hello" );
  }

  let func = sayHi(); // (2) 함수 복사

  func(); //Hello 출력 (3) 복사한 함수를 실행(정상적으로 실행)
  sayHi(); //Hello 출력 본래 함수도 정상적으로 실행
  • 위 코드처럼 실행 시 error 발생(func is not a function)
  • 끝에 세미콜론은 왜 있나요?
function sayHi() {
  // ...
}

let sayHi = function() {
  // ...
};
  • if {...}, for{}, function f {} 같이 중괄호로 만든 코드 블록 끝엔 ;가 없다.
  • 함수 표현식은 let sayHi = ...;과 같은 구문 안에서 값의 역할 코드 블록이 아니고 값처럼 취급되어 변수에 할당, 모든 구문의 끝엔 세미 클론 ;를 붙이는 게 좋음

★ 콜백 함수★

  • 함수를 값처럼 전달하는 예시, 함수 표현식에 관한 예시

  • 매개변수가 3개 있는 함수, ask(question, yes, no)를 작성

  • question

    • 질문

  • yes

    • yes 라고 답한 경우 실행

  • no

    • no 라고 답한 경우 실행

  • 함수는 반드시 question을 해야 하고, 사용자의 답변에 따라 yes() 나 no()를 호출



function ask(question, yes, no) {
    if (confirm(question)) yes()
    else no();
  }
  
  function showOk() {
    alert( "동의하셨습니다." );
  }
  
  function showCancel() {
    alert( "취소 버튼을 누르셨습니다." );
  }
  
  // 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
  ask("동의하십니까?", showOk, showCancel);
  • 함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불립니다.
  • 함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출"하는 것이 콜백함수의 개념 위 예시에서는 사용자가 "yes"라고 대답한 경우 showOK가 콜백이 되고, "no"라고 대답할 경우 showCancel가 콜백
  • 콜백함수는 동기 처리를 비동기 처리 방식으로 할 때 많이 사용
  • 함수는 "동작"을 나타내는 값
    • 문자열이나 숫자 등의 일반적인 값들은 데이터
    • 함수는 하나의 동작을 나타냅니다
    • 동작을 대변하는 값인 함수를 변수 간 전달하고,동작이 필요할 때 이값을 실행

함수 표현식 vs 함수 선언문

  • 함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태
// 함수 선언문
function sum(a, b) {
  return a + b;
}
  • 함수 표현식: 함수는 표현식이나 구문 구성 내부에 생성 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 "할당 표현식" 우측에 생성
// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

  • 자바스크립트 엔진이 언제 함수를 생성하는지에 차이

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

  • 스크립트가 실행되고, 실행 흐름이 let sum=function..의 우측(함수 표현식)에 도달 했을때 함수가 생성 이때 이후부터 해당 함수를 사용(할당,호출 등)할 수 있습니다.

  • 하지만 함수 선언문은 다르다.

  • 함수 선언문은 함수 선언문이 정의되기전에도 호출 가능

  • 따라서 전역 함수 선언문은 스크립트 어디에 있느냐에 상관없이 호출 가능

  • 이게 가능한 이유는 자바스크립트의 내부 알고리즘 때문. 자바스크립트는 스크립트를 실행되기 전, 준비 단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성 스크립트가 진짜 실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성

  • 스크립트는 함수 선언문이 모두 처리된 이후에서야 실행됩니다. 따라서 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있는 것입니다.

sayHi("John"); // Hello, John

function sayHi(name) {
  console.log( `Hello, ${name}` );
}
sayHi("John"); // error! (Cannot access 'sayHi' before initialization)

let sayHi = function(name) {  // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};
  • 세번째 차이점은, 스코프
  • 엄격 모드에서 함수 선언문이 코드 블록 내에서 위치하면 해당 함수는 블록 내 어디서든 접근 하지만 블록 밖에서는 함수에 접근하지 못한다.
  • 런타임에 그 값을 알 수 있는 변수 age가 있고, 이 변수의 값에 따라 함수 welcome()을 다르게 정의해야하는 상황 그리고 함수 welcome()은 나중에 사용해야 하는 상황이라고 가정
let age = prompt("나이를 알려주세요.", 18);

// 조건에 따라 함수를 선언함
if (age < 18) {

  function welcome() {
    alert("안녕!");
  }

} else {

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

}

// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined
  • 함수 선언문은 함수가 선언된 코드 블록 안에서만 유효하기 때문에 이런 에러가 발생합니다.
let age = 16; // 16을 저장했다 가정합시다.

if (age < 18) {
  welcome();               // \   (실행)
                           //  |
  function welcome() {     //  |
    alert("안녕!");        //  |  함수 선언문은 함수가 선언된 블록 내
  }                        //  |  어디에서든 유효합니다
                           //  |
  welcome();               // /   (실행)

} else {

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

// 여기는 중괄호 밖이기 때문에
// 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.

welcome(); // Error: welcome is not defined
  • 함수 표현식을 사용하면 가능합니다. if문 밖에 선언한 변수 welcome에 함수 표현식으로 만든 함수를 할당하면 되죠.
let age = prompt("나이를 알려주세요.", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

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

}

welcome(); // 제대로 동작합니다.
  • 함수 선언문과 함수 표현식 중 무엇을 선택해야 하나요?
    • 제 경험에 따르면 함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는게 좋습니다.
      함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있습니다.
    • 함수 선언문을 사용하면 가독성도 좋아집니다. 코드에서 let f = function(...) {...}보다 function f(...){...}을 더 찾는게 더 쉽죠.

위 내용은 javascript.info사이트에서 공부한 내용을 정리
자세한 내용은 아래 링크를 참고하세요
https://ko.javascript.info/function-expressions

profile
rondido
개발 옆차기
이전 포스트

[javascript]자바스크립트 함수

다음 포스트

[javascript]자바스크립트 화살표 함수 기본

0개의 댓글