7.2. 프로그램언어 자바스크립트(JavaScript)의 함수 호출

by

프로그램언어 자바스크립트(JavaScript)의 호출 가능한 객체

프로그램언어 자바스크립트(JavaScript)의 호출 가능한 객체는 함수와 메소드를 포함한 객체입니다. 호출 가능한 객체는 함수로 호출될 수 있는 객체를 말하며, 함수는 객체이기 때문에 호출 가능한 객체로 간주됩니다. 호출 가능한 객체는 함수 객체와 메소드를 가지고 있어서 다양한 기능을 수행할 수 있습니다.

예를 들어, 다음은 호출 가능한 객체의 예제 코드입니다:


// 호출 가능한 객체 생성
let myObject = {
  myMethod: function() {
    console.log("This is a method inside an object.");
  }
};// 객체의 메소드 호출
myObject.myMethod();

프로그램언어 자바스크립트(JavaScript)에서의 함수 표현식

자바스크립트에서 함수 표현식은 함수를 변수에 할당하여 사용하는 방식을 말합니다. 함수 표현식은 함수를 선언과 동시에 변수에 할당하여 사용할 수 있어 유연성이 높고, 익명 함수(이름이 없는 함수)를 만들 수 있습니다.

예를 들어, 다음과 같이 함수 표현식을 사용할 수 있습니다.


// 익명 함수 표현식
var greet = function() {
    return "Hello, World!";
};// 기명 함수 표현식
var calculate = function add(a, b) {
    return a + b;
};

프로그램언어 자바스크립트(JavaScript)의 화살표 함수

자바스크립트(JavaScript)의 화살표 함수(arrow function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 표현 방식입니다. 화살표 함수는 function 키워드 대신 => 기호를 사용하여 함수를 정의합니다. 이를 통해 코드를 간결하게 작성할 수 있고, this의 동작 방식이 일반 함수와 다르게 동작하여 유용하게 활용됩니다.

화살표 함수의 기본 구조는 다음과 같습니다.


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

위 예제에서는 add라는 함수를 화살표 함수로 정의하였습니다. 화살표 함수는 (a, b)와 같이 매개변수를 정의하고 => 뒤에 중괄호 {}를 사용하여 함수의 몸체를 작성합니다. 이후 return을 통해 값을 반환할 수 있습니다.

만약 함수가 단일 표현식만을 포함하고 있는 경우 중괄호 {}와 return을 생략할 수 있습니다.


const multiply = (a, b) => a * b;

화살표 함수는 this의 바인딩이 lexical하게 동작합니다. 즉, 화살표 함수 내부에서 this를 사용할 경우, 화살표 함수가 정의된 곳의 this를 가리킵니다. 이는 일반 함수에서의 this 동작과 다르게 동작하므로 주의가 필요합니다.

아래는 화살표 함수와 일반 함수의 this 동작 차이를 보여주는 예제 코드입니다.


function Counter() {
  this.count = 0;
  
  // 일반 함수
  this.incrementRegular = function() {
    setInterval(function() {
      this.count++; // this가 Counter 객체를 가리키지 않음
      console.log(this.count);
    }, 1000);
  };
  
  // 화살표 함수
  this.incrementArrow = function() {
    setInterval(() => {
      this.count++; // this가 Counter 객체를 가리킴
      console.log(this.count);
    }, 1000);
  };
}const counter = new Counter();
counter.incrementRegular(); // NaN이 출력됨
counter.incrementArrow(); // 1, 2, 3, ...

프로그램언어 자바스크립트(JavaScript)에서의 고차 함수

프로그램언어 자바스크립트(JavaScript)에서의 고차 함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 말합니다. 이러한 고차 함수를 사용하면 코드의 재사용성을 높이고 함수형 프로그래밍의 개념을 적용할 수 있습니다.

예를 들어, 아래의 예제 코드는 고차 함수를 사용하여 두 숫자를 더하는 함수를 생성하는 예시입니다.


function createAdder(num1) {
  return function(num2) {
    return num1 + num2;
  };
}const add5 = createAdder(5);
console.log(add5(3)); // 출력: 8

프로그램언어 자바스크립트(JavaScript)의 함수 스코프와 클로저

프로그램언어 자바스크립트(JavaScript)의 함수 스코프와 클로저에 대해 알아보겠습니다.

함수 스코프는 변수의 유효 범위를 의미합니다. 자바스크립트에서는 함수가 선언된 위치에 따라 변수의 스코프가 결정됩니다. 함수 내에서 선언된 변수는 해당 함수 내에서만 접근이 가능하고 외부에서는 접근할 수 없습니다. 이를 이해하기 위해 예제 코드를 살펴봅시다.


function greet() {
  var message = 'Hello';
  console.log(message);
}greet();
console.log(message); // 에러 발생: message는 greet 함수 내에서만 유효

위 예제에서 message 변수는 greet 함수 내에서 선언되었기 때문에 greet 함수 내에서만 접근 가능합니다. 함수 외부에서 message에 접근하려고 하면 에러가 발생합니다.

이어서 클로저에 대해 알아봅시다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합입니다. 클로저를 이용하면 함수 내부에서 선언된 변수를 외부에서도 활용할 수 있습니다. 다음은 클로저를 사용한 예제 코드입니다.


function outer() {
  var outerVar = 'I am outer';  function inner() {
    var innerVar = 'I am inner';
    console.log(outerVar + ' - ' + innerVar);
  }  return inner;
}var innerFunc = outer();
innerFunc(); // 'I am outer - I am inner' 출력

위 예제에서 outer 함수는 inner 함수를 반환하고 있습니다. inner 함수는 outer 함수 내부의 outerVar 변수에 접근할 수 있습니다. 이처럼 클로저를 활용하면 함수 외부에서 함수 내부의 변수에 접근할 수 있어 유용하게 활용할 수 있습니다.

Leave a Comment