자바스크립트 함수 래퍼런스

 

 

'함수'에 대해 배우실 때 많은 혼란을 느끼실 수 있습니다. 본 가이드에서는 여러분이 쉽게 이해할 수 있도록 자바스크립트 함수의 선언과 표현에 대해 깊고 자세하게 설명하겠습니다.

함수 선언식 (Function Declaration)

함수 선언식은 함수의 이름과 매개변수, 본문을 정의하는 방식입니다. 이 방식은 함수의 호이스팅이라는 특징을 가지며, 아래와 같이 작성됩니다.

    function calculateDistance(x1, y1, x2, y2) {
      var dx = x2 - x1;
      var dy = y2 - y1;
      return Math.sqrt(dx * dx + dy * dy);
    }
    

위 예제에서는 두 점 간의 거리를 계산하는 함수를 선언하였습니다.

함수 표현식 (Function Expression)

함수 표현식은 함수를 변수에 할당하는 방식입니다. 이는 익명 함수를 사용하여 표현할 수 있으며, 아래와 같이 작성됩니다.

    var calculateArea = function(radius) {
      return Math.PI * radius * radius;
    };
    

위 예제에서는 원의 넓이를 계산하는 함수를 표현하였습니다.

익명함수 (Anonymous Function)

익명함수는 이름이 없는 함수로, 특정 작업을 처리할 때 일회용으로 사용되곤 합니다. 아래 예제에서는 배열의 각 요소에 특정 연산을 적용하는 함수를 익명함수로 정의하였습니다.

var numbers = [1, 2, 3, 4, 5];
numbers.map(function(number) {
  return number * 2;
});

즉시실행함수 (Immediately Invoked Function Expression, IIFE)

즉시실행함수는 함수를 선언함과 동시에 실행하는 패턴으로, 변수의 스코프를 제한하거나 코드를 모듈화하는 데 유용합니다. 아래 예제에서는 즉시실행함수를 사용하여 변수 'secret'을 외부에서 접근할 수 없게 만들었습니다.

(function() {
  var secret = 'I am hidden!';
  console.log(secret); // Outputs: 'I am hidden!'
})();

console.log(secret); // Error: secret is not defined

Arrow Function (화살표 함수)

Arrow Function은 간결한 문법으로 함수를 표현할 수 있는 ES6의 특징입니다. 기존 함수와 달리 this의 값이 lexical하게 결정되므로, 특정 객체와의 바인딩이 필요할 때 유용합니다. 아래 예제에서는 배열의 각 요소를 제곱하는 함수를 화살표 함수로 작성하였습니다.

var numbers = [1, 2, 3, 4, 5];
var squared = numbers.map(number => number * number);

또한, 화살표 함수는 this의 값이 상위 스코프의 this 값을 따르는 특징이 있습니다. 이는 객체의 메서드로 사용될 때 유용합니다.

var person = {
  name: 'John',
  sayHello: () => {
    console.log('Hello, ' + this.name);
  }
};

person.sayHello(); // Outputs: 'Hello, undefined'

위 예제에서는 this가 상위 스코프의 this 값을 따르므로, person 객체의 name 프로퍼티에 접근할 수 없습니다. 따라서 화살표 함수는 객체의 메서드로 사용할 때 주의가 필요합니다.