함수 표현식(1)

자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급되지 않는다.

우선은 이전에 배웠던 함수 선언(Function Declaration), 함수 선언문 방식으로 함수를 만들어보자.

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

이전에는 이러한 형식으로 하였지만
오늘 배울 함수 표현식으로 해당 선언을 해보자면

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

함수를 만듦과 동시에 변수에 할당하였다.
함수가 어떤 방식으로 만들어졌는지에 대해서는 관계없이 함수는 일단 값이기에 변수에 할당을 할 수 있는 것이다.
위 예시에서는 함수가 sayHi라는 변수에 저장이 된 것이다.

또한 함수는 값이라고 말했는데 그 값인 함수를 alert와 같은 동작으로도 연결할 수 있다.

function sayHi(){
  alert('Hello');
}
alert( sayHi );//'Hello'가 아닌 함수코드를 출력 함.
//alert(sayHi()); 로 했다면 우선 함수를 실행하여 'Hello'를 출력하고 함수를 정의하지 못하여 'undefined'를 출력한다.

이처럼 된다. 만약 저 함수를 실행시키고자 했었다면 alert로 할 필요가 없다. 자바스크립트에서는 함수 이름 뒤에 ();를 붙여야 함수가 올바르게 호출된다. ex) sayhi();

앞서 말했듯 자바스크립트에서 함수는 값이다. 따라서 함수는 값처럼 취급할 수 있으며 위 코드에선 함수 소스 코드가 문자형으로 바뀌어 출력되는 결과가 나왔다.

다만 함수는 일반 다른 값처럼 그냥 호출하는 것이 아닌 함수명();으로 호출하는 점 때문에 일반적인 값과는 조금 다른 특별한 종류의 값으로 기억하면 된다.

하지만 본질은 값이기 때문에 값으로 할 수 있는 일을 함수로도 할 수 있다.
변수를 복사하여 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수도 있다.

function sayHi() {   // (1) 함수 생성
  alert( "Hello" );
}

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

func(); // Hello     // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!
sayHi(); // Hello    //     본래 함수도 정상적으로 실행됩니다.

출처 본문에서 남긴 번호별 설명은 아래와 같다.

(1)에서 함수 선언 방식을 이용해 함수를 생성합니다. 생성한 함수는 sayHi라는 변수에 저장됩니다.
(2) 에선 sayHi를 새로운 변수 func에 복사합니다. 이때 sayHi 다음에 괄호가 없다는 점에 유의하시기 바랍니다. 괄호가 있었다면 func = sayHi() 가 되어 sayHi 함수 그 자체가 아니라, 함수 호출 결과(함수의 반환 값) 가 func에 저장되었을 겁니다.
이젠 sayHi() 와 func()로 함수를 호출할 수 있게 되었습니다.

함수sayHi()는 아래와 같이 함수 표현식을 사용해 정의할 수도 있습니다.

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

let func = sayHi;
// ...

함수 표현식 끝에 세미 콜론 ; 이 붙는 이유

function sayHi() {
  // ...
}

let sayHi = function() {
  // ...
};

선언문 형식에서는 없는데 표현식에서는 있는 이유는

• if { ... }, for { }, function f { } 같이 중괄호로 만든 코드 블록 끝엔 ;이 없어도 된다.
• 함수 표현식은 let sayHi = ...;과 같은 구문 안에서 값의 역할을 한다. 코드 블록이 아니고 값처럼 취급되어 변수에 할당된다. 모든 구문의 끝엔 세미 콜론 ;을 붙이는 게 좋습니다. 함수 표현식에 쓰인 세미 콜론은 함수 표현식 때문에 붙여진 게 아니라, 구문의 끝이기 때문에 붙여졌다.

마치며

오늘은 개인적으로 조금 이후의 내용이 복잡하다 생각하여 나의 주관적인 생각으로 정리하여 다음 업로드를 해야겠다.
또한 오늘은 이전의 내용도 복습을 진행 해야겠다.

출처

내용 : https://ko.javascript.info/intro
썸네일 제작 : https://www.canva.com/