Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript 함수 사용법 완벽 가이드: 선언부터 화살표 함수까지

JavaScript 함수는 재사용할 수 있는 코드 블록입니다. 함수를 활용하면 코드를 더욱 모듈화할 수 있으며, 객체 지향 프로그래밍에서도 필수적인 요소입니다. 함수는 선언문 또는 표현식을 통해 정의할 수 있습니다.

JavaScript를 배우고 있다면 함수는 반드시 알아야 할 핵심 개념입니다. 프로그래밍 언어를 조금이라도 다뤄본 분이라면, 함수가 복잡한 프로그램의 기본 구성 요소라는 것을 알고 있을 겁니다. 하지만 함수가 실제로 어떻게 동작하는지는 잘 모르는 경우가 많습니다.

함수를 사용하면 공통적으로 필요한 코드를 한 번만 작성해 두고, 필요할 때마다 호출하여 재사용할 수 있습니다. 즉, 같은 코드를 여러 번 반복해서 작성할 필요가 없어집니다.

함수는 특정 동작을 수행하고 값을 반환할 수 있는 코드 블록입니다. 필요에 맞게 자유롭게 커스터마이징할 수 있으며, 이를 통해 코드의 효율성과 모듈성을 크게 높일 수 있습니다.

이번 튜토리얼에서는 함수의 기본기를 다룹니다. 함수를 정의하는 방법, 함수를 호출하는 방법, 그리고 함수가 실제로 유용하게 쓰이는 상황까지 차근차근 살펴보겠습니다.

JavaScript 함수 정의 방법

JavaScript에서 함수를 정의하는 방법은 크게 두 가지입니다. 바로 선언문(function declaration)과 표현식(function expression)입니다. 먼저 선언문 방식부터 시작해 보겠습니다.

함수 선언문(Function Declaration)

함수 선언문은 이름이 있는 함수를 정의하는 방식입니다. 이 방식으로 함수를 정의하려면 코드를 function 키워드로 시작하고, 그 뒤에 함수 이름을 붙이면 됩니다. 아래 예제를 확인해 보세요.

function nameOfYourFunction() {
	// 함수 코드
}

함수 이름은 변수와 동일한 규칙을 따릅니다. 문자, 밑줄(_), 숫자를 사용할 수 있으며, 일반적으로 카멜 케이스(camelCase)로 작성합니다. 함수 이름 뒤에는 괄호 ()를 붙이는데, 이 안에는 선택적으로 매개변수를 넣을 수 있습니다. 매개변수에 대해서는 뒤에서 자세히 다루겠습니다.

for문이나 if문처럼 함수의 실제 코드는 중괄호 {} 안에 작성합니다. 다음은 콘솔에 Google을 출력하는 함수의 예제입니다.

function printGoogle() {
	console.log("Google");
}

printGoogle() 함수 내부에는 console.log() 문이 포함되어 있으며, 이 코드는 함수가 호출될 때 실행됩니다. 하지만 함수를 직접 호출하기 전까지는 아무 일도 일어나지 않습니다. 함수를 호출하려면 다음과 같이 작성합니다.

printGoogle();

이제 전체 코드를 하나로 합쳐서 함수를 선언하고 호출해 보겠습니다.

// printGoogle() 함수 선언
function printGoogle() {
	console.log("Google");
}

// printGoogle() 함수 호출
printGoogle();

이 코드를 실행하면 콘솔에 Google이 출력됩니다. printGoogle() 함수는 마지막 줄에서 호출되며, 호출되는 순간 결과를 반환합니다.

이제 출력 코드가 함수 안에 들어갔기 때문에, printGoogle() 함수를 원하는 만큼 몇 번이든 호출할 수 있습니다.

함수 표현식(Function Expression)

함수를 선언하는 또 다른 방법은 함수 표현식을 만드는 것입니다. 함수를 변수에 할당하는 방식으로 구현합니다.

앞선 예제와 동일한 상황을 예로 들어 보겠습니다. 함수를 독립적으로 선언하는 대신, 변수에 할당할 수도 있습니다.

const google = function printGoogle() {
	console.log("Google");
}

이 표현식을 호출하려면 google() 코드를 실행하고 싶은 위치에 추가하면 됩니다.

함수 매개변수(Parameter)

이제 함수를 선언하는 두 가지 방법을 모두 알았으니, 함수를 커스터마이징하는 방법을 살펴보겠습니다. 앞서 작성한 코드는 콘솔에 Google을 출력하는 함수였습니다.

Facebook처럼 다른 회사 이름을 출력하려면 코드를 수정해야 합니다. 만약 웹사이트 방문자가 좋아하는 회사 이름을 입력하면 그 이름을 콘솔에 출력하는 기능을 만들고 싶다면, 현재 함수로는 불가능합니다.

그래서 매개변수(parameter)가 필요합니다. JS 함수에 name 매개변수를 추가하면 어떤 이름이든 콘솔에 출력할 수 있습니다. 아래 예제를 확인해 보세요.

function printCompany(name) {
	console.log(`My favorite company is ${name}!`);
}

함수 이름은 printCompany()이고, 매개변수는 name입니다. 매개변수는 함수 내부 어디에서든 참조할 수 있습니다. 위 예제에서는 name 매개변수를 사용해 console.log()에 출력되는 내용을 동적으로 변경합니다.

하지만 아직 name 값이 정의되지 않았습니다. 매개변수를 정의하려면 함수를 호출할 때 값을 전달해야 합니다. 좋아하는 회사가 Snapchat이라면, 함수를 호출하면서 인수(argument)로 회사 이름을 전달하면 됩니다.

예제:

// "Snapchat"을 "name"으로 전달하여 printCompany() 함수 호출
printCompany("Snapchat");

이 코드를 실행하면 다음과 같이 출력됩니다.

My favorite company is Snapchat!

예제에서 printCompany() 함수를 호출하면서 괄호 안에 이름을 전달했습니다. 이제 같은 함수를 여러 번 재사용하면서 서로 다른 이름을 계속 전달할 수 있습니다.

참고로 매개변수는 원하는 만큼 여러 개 사용할 수 있으며, 선언된 순서대로 참조됩니다. 여러 매개변수를 활용하는 예제는 아래에서 소개합니다.

반환값(Return Value)

지금까지의 예제에서는 값을 반환하지 않고 콘솔에 텍스트를 출력하는 데 그쳤습니다. 하지만 함수에 매개변수를 전달해 처리한 후, return 문을 기반으로 값을 반환할 수도 있습니다.

다음은 두 숫자를 더한 결과를 반환하는 함수의 예제입니다.

function addNumbers(first, second) {
	return first + second;
}

addNumbers(1, 2);

이 프로그램에서 함수가 호출되고 두 숫자가 전달됩니다. 함수가 실행되면(위 예제의 마지막 줄) 3이라는 결과가 반환됩니다. 매개변수 목록은 쉼표로 구분합니다.

이 프로그램은 first와 second라는 매개변수 이름으로 1과 2를 더한 후, 그 결과를 코드에 반환합니다. 반환값을 눈으로 확인하고 싶다면 addNumbers(1, 2) 호출 부분을 console.log()로 감싸면 됩니다.

화살표 함수(Arrow Function)

ECMAScript 6(ES6)부터는 화살표 함수(arrow function)라는 더 간결한 함수 정의 방식이 도입되었습니다. 화살표 함수는 => 표현식으로 나타냅니다.

화살표 함수는 함수 표현식의 한 종류입니다. 예제를 통해 화살표 함수가 실제로 어떻게 동작하는지 살펴보겠습니다.

const addNumbers = (first, second) => {
	return first + second;
}

addNumbers(10, 15);

function 키워드 대신 화살표 기호를 사용해 함수를 선언한다는 것을 나타냅니다. 화살표 함수와 일반 함수 사이에는 몇 가지 미묘한 차이점(this 바인딩 등)이 있지만, 대부분의 일반적인 사용 사례에서는 크게 신경 쓰지 않아도 됩니다.

매개변수가 하나뿐이라면 괄호를 생략할 수 있습니다. 반대로 매개변수가 없다면, 매개변수가 선언될 위치에 빈 괄호 ()를 반드시 작성해야 합니다.

마무리

지금까지 JavaScript 함수의 기본기를 모두 살펴봤습니다. 이 튜토리얼에서는 함수 선언문, 함수 표현식, 함수에서 값 반환하기, 그리고 화살표 함수까지 폭넓게 다뤘습니다.

정리하자면, 함수는 특정 동작을 수행하고 값을 반환할 수 있는 코드 블록입니다. 프로그램 전체에서 여러 번 실행해야 하는 코드가 있다면 함수가 매우 유용합니다.

필요할 때마다 여러 줄의 코드를 반복해서 작성하는 대신, 해당 코드를 함수에 담아두고 필요할 때 함수를 호출하면 됩니다. 이때 함수에 필요한 값을 인수로 전달할 수도 있습니다.

이 글의 핵심 요약:

  • 함수는 특정 코드 라인을 실행하도록 설계된 하위 프로그램입니다.
  • 함수는 호출될 때만 실행됩니다. 이를 함수 호출(invoking)이라고 합니다.
  • 함수에 값을 전달하면 함수 내부에서 그 값을 사용할 수 있습니다.
  • 함수는 값을 반환할 수 있습니다.