FrontEnd/Javascript

자스의 함수

NandaNanda 2024. 1. 23. 10:49

출처: https://poiemaweb.com/js-function

출처: https://codingfarm.tistory.com/308

 

자바스크립트의 함수는 객체(일급 객체, First-class object)이다. 다른 객체와 구분될 수 있는 특징은 호출할 수 있다는 것이다. 함수도 객체이므로 다른 값들처럼 사용할 수 있다. 즉, 변수나 객체, 배열 등에 저장할 수 있고 다른 함수에 전달되는 인수로도 사용할 수 있으며 함수의 반환값이 될 수도 있다.

함수를 정의하는 방식은 3가지가 있다.

  • 함수 선언문
  • 함수 표현식
  • Function 생성자 함수

1.1 함수 선언문

함수 선언문(Function declaration) 방식으로 정의한 함수는 function 키워드와 이하의 내용으로 구성된다.

1.2 함수 표현식

자바스크립트의 함수는 일급 객체이므로 아래와 같은 특징이 있다.

  1. 무명의 리터럴로 표현이 가능하다.
  2. 변수나 자료 구조(객체, 배열…)에 저장할 수 있다.
  3. 함수의 파라미터로 전달할 수 있다.
  4. 반환값(return value)으로 사용할 수 있다.

함수의 일급객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는데 이러한 방식을 함수 표현식(Function expression)이라 한다.

함수 선언문으로 정의한 함수 square()를 함수 표현식으로 정의하면 아래와 같다.

// 함수 표현식
var square = function(number) {
  return number * number;
};

함수 표현식 방식으로 정의한 함수는 함수명을 생략할 수 있다. 이러한 함수를 익명 함수(anonymous function)이라 한다. 함수 표현식에서는 함수명을 생략하는 것이 일반적이다.

// 기명 함수 표현식(named function expression)
var foo = function multiply(a, b) {
  return a * b;
};

// 익명 함수 표현식(anonymous function expression)
var bar = function(a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

함수는 일급객체이기 때문에 변수에 할당할 수 있는데 이 변수는 함수명이 아니라 할당된 함수를 가리키는 참조값을 저장하게 된다. 함수 호출시 함수명이 아니라 함수를 가리키는 변수명을 사용하여야 한다.

var foo = function(a, b) {
  return a * b;
};

var bar = foo;

console.log(foo(10, 10)); // 100
console.log(bar(10, 10)); // 100

변수 bar와 변수 foo는 동일한 익명 함수의 참조값을 갖는다.

함수가 할당된 변수를 사용해 함수를 호출하지 않고 기명 함수의 함수명을 사용해 호출하게 되면 에러가 발생한다. 이는 함수 표현식에서 사용한 함수명은 외부 코드에서 접근 불가능하기 때문이다. (사실은 함수 선언문의 경우도 마찬가지이다.)

함수 표현식과 함수 선언문에서 사용한 함수명은 함수 몸체에서 자신을 재귀적 호출(Recursive function call)하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자의 역할을 한다.

함수 선언문으로 정의한 함수 square의 경우, 함수명으로 호출할 수 있었는데 이는 자바스크립트 엔진에 의해 아래와 같은 함수 표현식으로 형태가 변경되었기 때문이다.

(내정리. 함수 리터럴 방식이란 객체방식이 아닌 함수 그 자체를 값(데이터)으로 정의하는 것. 함수 표현식으로 함수를 정의할 때 함수 리터럴 방식을 사용함. 함수 선언문도 (내부적으로 자바스크립트 엔진이 기명 함수 표현식으로 변형하므로) 결국 함수 리터럴 방식을 사용하는 것이다. 추가적으로 "리터럴방식은 자바스크립트 엔진에 의해서 객체방식으로 자동변환되어 실행된다." 이는 본문의 아래에서 확인할 수 있다.

)

즉,

var hello = function(name){
    alert(name + "님 환영합니다.");
}  ==>>이것이 함수 리터럴 방식. 함수 그 자체가 데이터, 값이므로 리터럴이고 이 '값'을 변수에 저장하고 있으므로 함수 표현식이다. 즉, 함수표현식은 함수리터럴 방식을 사용한다.

var hello2 = new Function("name", "alert(name+'님 환영합니다.');");
hello2("honggildong");  ==>>이것이 함수 객체방식(Function이란 예약어 사용)