매일메일 "자바스크립트 함수에 대해서 아는대로 설명해주세요."

자바스크립트 함수 ♾️

1️⃣ 일급 객체

자바스크립트에서 함수는 값처럼 취급 가능하고, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로 사용 가능하다.

const sayHello = function() { return 'Hello'; };
console.log(sayHello()); // 'Hello'

const executeFunction = function(fn) {
  return fn();
};
console.log(executeFunction(sayHello)); // 'Hello'

2️⃣ 익명 함수와 함수 표현식

자바스크립트에서는 익명 함수를 정의할 수 있다.

const add = function(a, b) {
  return a + b;
};
console.log(add(2, 3)); // 5

3️⃣ 호이스팅

호이스팅은 함수 선언식을 통해서 선언한 함수가 함수 선언 이전에 호출 가능하게 해준다.
하지만 함수 선언식과 다르게 함수 표현식은 변수에 할당된 후에 사용 가능하다.

console.log(declaredFunction()); // 'Declared Function'
function declaredFunction() {
  return 'Declared Function';
}

// 함수 표현식은 할당 후에만 사용할 수 있음
const expressedFunction = function() {
  return 'Expressed Function';
};
console.log(expressedFunction()); // 'Expressed Function'

4️⃣ 클로저

클로저는 함수가 자신이 선언된 환경을 기억하고 그 환경에 접근할 수 있는 기능이다.

function outer() {
  const outerVar = 'I am outer!';
  
  return function inner() {
    return outerVar; // 외부 변수에 접근 가능
  };
}
const innerFunction = outer();
console.log(innerFunction()); // 'I am outer!'

5️⃣ 고차 함수

자바스크립트에서는 함수가 일급 객체이기 때문에 고차 함수, 즉 다른 함수를 인자로 받거나 반환하는 함수를 정의할 수 있다.

function multiplyBy(factor) {
  return function(num) {
    return num * factor;
  };
}
const double = multiplyBy(2);
console.log(double(5)); // 10

6️⃣ 화살표 함수

화살표 함수를 사용하면 더 간결하게 코드를 작성할 수 있다.
특히 this 바인딩에서 기존 함수와 다른 동작을 한다.
화살표 함수는 선언된 위치의 this 값을 유지하기 때문에, 일반 함수와 다르게 this를 바인딩할 필요가 없다.

const obj = {
  value: 42,
  method: function() {
    setTimeout(() => {
      console.log(this.value); // 42 (Arrow 함수는 obj의 this를 유지)
    }, 1000);
  }
};
obj.method();

method는 일반 함수로 정의.

this는 obj를 가리킴. (obj.method()이기 때문에)

setTimeout 안에 화살표 함수.

✅ 화살표 함수는 자신만의 this를 만들지 않음.
그래서 이 안에서의 this는 method 함수의 this와 같음

즉, obj를 그대로 가리키고 있으니까 this.value는 42

⁉️ 근데 왜 this는 obj를 가리키는 것일까?
1. 여기서 obj.method()라고 객체를 통해 함수를 호출
2. 이 경우에 자바스크립트는 함수가 obj라는 객체의 속성(method)로 실행되었다고 판단
3. 따라서 이 함수 안에서 this는 obj

"객체의 속성으로 들어 있는 함수를 호출하면, 그 함수 안의 this는 그 객체를 가리킨다!"