자바스크립트 함수

윤장호·2025년 3월 11일

매일메일

목록 보기
14/90
post-thumbnail

일급 객체

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

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

호이스팅

함수 선언식을 통해 선언한 함수는 코드가 실행되기 전에 호이스팅되어, 함수 선언 이전에 호출할 수 있습니다.
반면, 함수 표현식은 변수에 할당된 후에 사용할 수 있습니다.

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

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

클로저

자바스크립트 함수로는 클로저를 구현할 수 있습니다.
클로저는 함수가 자신이 선언된 환경(스코프)을 기억하고, 해당 환경에 접근할 수 있는 특징입니다.
이를 통해 함수는 자신이 선언된 당시 스코프 내의 변수를 참조할 수 있습니다.

function outer() {
  const outerVar = 'I am outer!';
  
  return function inner() {
    return outerVar; // 외부 변수에 접근 가능
  };
}
const innerfunction = outer();
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();
profile
프론트엔드 개발자

0개의 댓글