JavaScript 함수: 정의, 호출 및 값 반환

소개

JavaScript 에서 함수는 기본적인 구성 요소 중 하나입니다. 함수는 한 번 작성하여 여러 번 실행할 수 있는 재사용 가능한 코드 블록입니다. 함수를 사용하면 코드를 구성하고, 가독성을 높이며, 반복을 피할 수 있습니다.

이 실습에서는 JavaScript 에서 함수를 생성하고 사용하는 기본 사항을 배우게 됩니다. 두 숫자를 더하는 간단한 함수를 만들고, 함수를 정의하고, 데이터를 전달하고, 결과를 다시 받고, 해당 결과를 표시하는 방법을 배우게 됩니다.

이 단계에서는 첫 번째 함수를 정의합니다. 함수는 function 키워드 다음에 이름, 괄호 () 세트, 그리고 중괄호 {}로 둘러싸인 코드 블록 (함수 본문) 을 사용하여 정의됩니다.

먼저 WebIDE 왼쪽의 파일 탐색기에서 script.js 파일을 찾아 엽니다. 모든 JavaScript 코드는 이 파일에 작성할 것입니다.

이제 script.js에 다음 코드를 추가하여 addNumbers라는 함수를 정의합니다.

function addNumbers() {
  // Code will go here
}

이 코드는 빈 함수를 생성합니다. 아직 아무것도 하지 않지만 유효한 함수 정의입니다. addNumbers라는 이름은 나중에 이 함수를 참조할 때 사용됩니다.

이 단계에서는 함수에 매개변수를 추가합니다. 매개변수는 함수가 호출될 때 받을 데이터를 위한 자리 표시자와 같습니다. 함수 정의 내의 괄호 () 안에 쉼표로 구분하여 정의합니다.

addNumbers 함수를 수정하여 더하려는 두 개의 숫자를 받도록 하겠습니다. 이 매개변수들을 num1과 num2라고 명명하겠습니다.

script.js 파일을 다음 코드로 업데이트하세요.

function addNumbers(num1, num2) {
  // Code will go here
}

이제 addNumbers 함수는 두 개의 값을 받도록 설정되었습니다. 함수 내부에서 num1과 num2를 함수에 전달된 값을 보유하는 변수로 사용할 수 있습니다.

이 단계에서는 함수가 작업을 수행하고 결과를 반환하도록 합니다. return 문은 함수가 출력해야 하는 값을 지정하는 데 사용됩니다. JavaScript 가 return 문에 도달하면 함수 실행이 중지되고 지정된 값이 함수가 호출된 곳으로 반환됩니다.

함수에 두 매개변수를 더하고 결과를 반환하는 로직을 추가해 보겠습니다.

script.js 파일을 업데이트하세요. 함수 중괄호 안에 return 문을 추가합니다.

function addNumbers(num1, num2) {
  return num1 + num2;
}

이제 addNumbers 함수가 실행되면 num1과 num2의 합을 계산하고 해당 값을 반환합니다.

이 단계에서는 함수를 호출하여 실행합니다. 함수를 정의하는 것만으로는 실행되지 않습니다. 함수를 실행하고 결과를 얻으려면 함수를 "호출" 또는 "실행"해야 합니다. 함수를 호출할 때 정의한 매개변수에 대한 실제 값, 즉 인수를 제공합니다.

함수에서 반환된 값은 나중에 사용하기 위해 변수에 저장할 수 있습니다.

script.js 파일에 함수 정의 아래에 다음 줄을 추가하여 인수 5와 10으로 addNumbers 함수를 호출합니다.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

이 코드에서 addNumbers(5, 10)은 함수를 호출합니다. 값 5는 num1 매개변수로 전달되고, 10은 num2 매개변수로 전달됩니다. 함수는 15를 반환하며, 이 값은 sum 변수에 저장됩니다.

마지막 단계에서는 함수 호출 결과를 표시합니다. 웹 개발에서 변수 값이나 코드 출력을 확인하는 일반적인 방법은 console.log()를 사용하는 것입니다. 이 함수는 웹 브라우저의 개발자 콘솔에 메시지를 출력합니다.

script.js 파일 끝에 다음 줄을 추가하여 sum 변수의 값을 기록합니다.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

console.log(sum);

출력을 보려면:

script.js 파일이 저장되었는지 확인합니다.
LabEx 인터페이스 상단의 Web 8080 탭으로 전환합니다.
브라우저의 개발자 도구를 엽니다. 일반적으로 페이지에서 마우스 오른쪽 버튼을 클릭하고 "검사 (Inspect)"를 선택하거나 F12 키를 눌러 열 수 있습니다.
개발자 도구 패널에서 콘솔 (Console) 탭을 클릭합니다.

콘솔에 숫자 15가 출력되는 것을 볼 수 있습니다. 이것이 addNumbers 함수에서 반환된 결과입니다.

숫자 15 를 보여주는 콘솔 출력