[매일메일] 자바스크립트 함수의 특징 (FE.250101)

일급 객체

자바스크립트에서 함수는 값(value)처럼 취급될 수 있음

변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 return값으로 사용할 수 있음

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

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

 

익명 함수와 함수 표현식

자바스크립트에서 익명 함수(이름 없는 함수)를 정의할 수 있음

함수 표현식에서 주로 사용되며, 필요에 따라 함수에 이름을 지정하지 않아도 됨

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

(이 블로그의 다른 글: 함수 선언문과 함수 표현식의 차이점? https://developer-dreamer.tistory.com/152)

 

호이스팅

함수 선언식을 통해 선언한 함수는 코드가 실행되기 전 호이스팅 됨. 선언 전에 호출할 수 있음

함수 표현식은 변수에 할당된 후 사용할 수 있음

(이 블로그의 다른 글: 자바스크립트의 호이스팅 https://developer-dreamer.tistory.com/113)

 

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

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

 

 

클로저

클로저: 함수가 자신이 선언된 환경(scope)을 기억하고, 해당 환경에 접근할 수 있는 기능 혹은 특징

함수는 자신이 선언된 당시 스코프 내의 변수를 참조할 수 있음

(이 블로그에 관련 글: 클로저란? https://developer-dreamer.tistory.com/155)

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

 

 

고차 함수

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

함수형 프로그래밍 패턴을 가능하게 함

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

 

 

화살표 함수

간결한 문법을 제공하고, this 바인딩에서 기존 함수와 다른 동작을 함

화살표 함수는 선언된 위치의 this 값을 유지하므로, 일반 함수와 달리 별도로 this를 바인딩할 필요가 없음

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

 

(이 블로그 관련 글: 자바 스크립트 ES6 버전이란? > 화살표 함수 도입 https://developer-dreamer.tistory.com/149)

---

 

출처

1. 매일메일. 250114. 자바스크립트 함수에 대해서 아는대로 설명해주세요. 33번. https://maeil-mail.kr