[JavaScript] 함수 정의(함수 선언문, 함수 표현식, Function 생성자, 화살표 함수)

함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것을 의미한다.

 

자바스크립트에서는 함수를 크게 4가지 방법으로 정의한다.

 

함수 선언문

자바스크립트에서 함수를 선언할 때 가장 일반적으로 사용하는 방식

function(a, b) {
	return a + b
}

 

함수 표현식

다음 예제처럼 함수는 표현식으로도 사용할 수 있다.

const sum = function (a, b) {
	return a + b
}

sum(10, 24) // 24

💡 일급 객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

 

함수는 다른 함수의 매개변수나 반환값이 될 수 있고 위 예제처럼 할당도 가능하다. -> 일급 객체가 되이 위한 조건을 함수는 모두 갖췄음!

 

함수 선언문과 표현식의 차이

호이스팅과 관련하여 함수 선언문과 함수 표현식의 큰 차이가 있다.

 

함수 선언문

hello() // hello

function hello() {
	console.log('hello')
}

hello() // hello

hello 함수 코드가 중간에 있음에도 불구하고 정상적으로 출력이 된다. 이는 함수에 대한 선언을 실행 전에 미리 메모리에 등록하는 작업인 호이스팅 때문에 코드 순서 상관없이 정상 출력이 되는 것이다.

 

반면 함수 표현식을 보자

 

함수 표현식

console.log(typeof hello === 'undefine') // true

hello() // Uncaught TypeError: hello is not a function

var hello = function () {
	console.log('hello')
}

hello()

함수 선언문과 다르게 hello에 undefined가 남아있는 걸 볼 수 있다.

함수 실행을 하기 전(런타임 전)에 hello 변수에 undefined로 초기화가 된 것이다.

할당문이 실행되는 시점인 런타임 시점에 함수가 할당 되어 두번째 hello()에는 정상 출력이 된다.

 

Function 생성자

const add = new function('a', 'b', 'return a + b')

add(10, 24) // 34

Function 생성자를 이용하여 함수를 만들 수도 있는데 이 방법은 일반적으로 잘 사용하지 않는다.

 

그 이유는 예제 코드에서 보이다시피.

매개변수와 함수의 몸통을 모두 문자열로 작성해야 하며, 이 방법은 코드의 양 길어진다면 복잡해질 것이다.

이 방식으로 했을 때는 함수의 클로저 또한 생성할 수 없다.

화살표 함수

화살표 함수는 ES6에서 새로 도입된 함수 생성 방식이다.

const add = (a, b) => {
	return a + b
}

const add = (a, b) => a + b

 

화살표 함수는 일반 함수와 몇 가지 차이점이 있다.

 

1. constructor 사용 불가

const Car = (name) => {
	this.name = name
}

// Uncaught TypeError: Car is not a constructor
const MyCar = new Car('하이')

화살표 함수에서는 constructor를 사용할 수 없다. 즉, 생성자 함수로 사용 불가능!!!

 

2. arguments 존재 X

function hello() {
	console.log(arguments)
}

// Arguments(3) [1, 2, 3, calle: f, Symbol(Symbol.iterator): f]
hello(1, 2, 3)

const hi = () => {
	console.log(arguments)
}

// Uncaught ReferenceError: arguments is not defined
hi(1, 2, 3)

화살표 함수에서는 arguments가 존재하지 않는다.

 

3. this 바인딩이 없음⭐️⭐️⭐️

가장 큰 차이점은 this 바인딩에서 볼 수 있다.

 

자바스크립트 바인딩 관련해서 포스트를 따로 하도록 하겠다..

일단 여기서 쓰이는 것만 간단하게 설명하자면

일반 함수 -> 동적 바인딩
화살표 함수 -> 정적 바인딩

 

위처럼 분류할 수 있는데

 

일반함수는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는데

this는 언제나 상위 스코프의 this를 가리킨다. 즉, Lexical this를 가진다. (Lexical scope랑 비슷한 개념)

 

 

일반 함수(동적 바인딩)

function TraditionalFunctionExample() {
  this.value = 42;

  this.getValue = function() {
    console.log('Traditional Function:', this.value); // 'this'는 호출하는 객체에 바인딩됩니다.
  }
}

const obj1 = new TraditionalFunctionExample();
obj1.getValue(); // Traditional Function: 42

const obj2 = {
  value: 100,
  getValue: obj1.getValue
};

obj2.getValue(); // Traditional Function: 100 ('this'는 obj2에 바인딩됩니다.)

 

화살표 함수(정적 바인딩)

function ArrowFunctionExample() {
  this.value = 42;

  this.getValue = () => {
    console.log('Arrow Function:', this.value); // 'this'는 ArrowFunctionExample의 컨텍스트에 바인딩됩니다.
  }
}

const obj3 = new ArrowFunctionExample();
obj3.getValue(); // Arrow Function: 42

const obj4 = {
  value: 100,
  getValue: obj3.getValue
};

obj4.getValue(); // Arrow Function: 42 ('this'는 여전히 ArrowFunctionExample의 컨텍스트를 유지합니다.)