JavaScript에서 Function을 만드는 방법 : JS 함수 작성법은 어떻게 변화해왔는가?

JavaScript에서 function은 코드를 하나의 논리적 단위로 묶어서 재사용 가능한 코드 조각을 만드는 데 사용됩니다. function은 다음과 같은 방법으로 작성할 수 있습니다.

 

함수 선언문 방식 (Function Declaration)

함수 선언문 방식은 다음과 같은 형식으로 작성하는 함수입니다. 모든 언어들에 있는 일반적인 함수 작성 방식입니다.

function 함수명(매개변수1, 매개변수2, ...) {
  // 함수 내용
}

 

예를 들어, 두 개의 수를 더하는 함수를 선언하면 다음과 같습니다.

function add(a, b) {
  return a + b;
}

 

함수를 호출할 때는 함수명과 매개변수를 넘겨줍니다.

let result = add(1, 2);
console.log(result); // 3

 

함수 표현식 방식 (Function Expression)

함수 표현식은 다음과 같은 형식으로 작성하는 함수 작성법입니다. 

let 함수명 = function(매개변수1, 매개변수2, ...) {
  // 함수 내용
};

 

예를 들어, 두 개의 수를 빼는 함수를 표현식으로 작성하면 다음과 같습니다.

let subtract = function(a, b) {
  return a - b;
};

 

 

함수를 호출할 때는 함수명을 사용하지 않고 변수명을 사용합니다. 즉, 함수가 변수처럼 설정되는 방식입니다.

let result = subtract(3, 2);
console.log(result); // 1

 

화살표 함수 방식 (Arrow Function)

ES6에서는 화살표 함수를 도입하여 함수를 간결하게 작성할 수 있습니다. 화살표 함수는 다음과 같은 형식으로 작성합니다.

let 함수명 = (매개변수1, 매개변수2, ...) => {
  // 함수 내용
};

 

예를 들어, 세 개의 수를 곱하는 화살표 함수를 작성하면 다음과 같습니다.

let multiply = (a, b, c) => a * b * c;

 

함수를 호출할 때도 함수명을 사용하지 않고 변수명을 사용합니다.

let result = multiply(2, 3, 4);
console.log(result); // 24

 

함수 작성법의 변화

ES6 이전에는 함수를 선언할 때 function 키워드와 함께 함수 이름을 사용하였습니다. 그 대표적인 것이 함수 선언문 방식입니다. 이러한 함수 선언문 방식은 호이스팅(Hoisting)이 발생하여 함수 선언문 이전에 함수를 호출할 수 있게 되어 버그를 발생시키는 경우가 있었습니다.

 

ES6에서는 함수 표현식과 화살표 함수가 도입되면서 이러한 문제점을 해결하였습니다. 함수 표현식은 변수에 함수를 할당하는 방식으로 작성하기 때문에 호이스팅이 발생하지 않습니다. 또한, 화살표 함수는 짧은 코드를 간결하게 작성할 수 있어서 함수형 프로그래밍을 지향하는 자바스크립트에서 인기가 있습니다.

 

ES6에서는 함수 작성법에 위와 같은 변화 뿐만 아니라, 템플릿 리터럴(Template Literal), 매개변수 기본값(Default Parameter), 나머지 매개변수(Rest Parameter), 전개 연산자(Spread Operator) 등의 기능이 추가되어 더욱 강력한 함수 작성이 가능해졌습니다.

 

템플릿 리터럴

문자열을 보다 쉽게 작성할 수 있는 방법입니다. Kotlin의 Template literal과 같은 기능입니다. 다만 템플릿 리터럴은 ``을 사용할 때만 사용할 수 있다는 단점이 있습니다. ""나 '' 속의 String에는 템플릿 리터럴을 사용할 수 없습니다.

let name = "John";
console.log(`Hello, ${name}!`);

 

매개변수 기본값

매개변수에 값을 지정하지 않았을 때 기본값을 설정할 수 있는 문법입니다. 기본값을 설정할 수 있도록 함으로써 확장성을 증가시켰습니다.

function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(2, 3)); // 6
console.log(multiply(2)); // 2

 

나머지 매개변수

매개변수를 배열 형태로 받을 수 있는 문법입니다. 이는 많은 언어들에서 이미 지원했는데 JavaScript는 나중에 지원하게 된 기능입니다. 왜 이전에 추가되지 않았는지 궁금하네요.

function sum(...numbers) {
  let result = 0;
  for (let number of numbers) {
    result += number;
  }
  return result;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

 

전개 연산자

배열이나 객체를 펼칠 수 있는 문법입니다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

let obj1 = { x: 1, y: 2 };
let obj2 = { z: 3 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { x: 1, y: 2, z: 3 }

 

글을 마치며

이처럼 ES6에서는 함수 작성법이 보다 강력하고 간결하게 변경되었습니다. 새로운 기능을 적극 활용하여 자바스크립트에서 보다 강력한 함수를 작성할 수 있습니다. 이번 글을 잘 보고 좋은 코드를 만드시길 바랍니다.