자바스크립트 함수 선언과 호출. 매개변수와 인자를 활용한 효과적인 코드 작성법 - 자바스크립트 #5

자바스크립트 함수에 대한 개념과, 선언 및 호출 방법을 설명하기 위해 작성되었습니다.

자바스크립트 함수 선언과 호출

 

자바스크립트 함수 선언과 호출

함수는 특정 작업을 수행하기 위해 설계된 코드 블록입니다. 쉽게 말해, 함수는 입력을 받아 처리하고 결과를 출력하는 '작은 프로그램'이라고 생각할 수 있습니다.

함수의 기본 구조는 다음과 같습니다:

function 함수이름(매개변수1, 매개변수2, ...) { // 실행할 코드 return 결과; // 선택적 }

예를 들어, 두 숫자를 더하는 간단한 함수를 만들어 보겠습니다:

function 더하기(a, b) { return a + b; } let 결과 = 더하기(5, 3); console.log(결과); // 출력: 8

이 예시에서 '더하기'라는 함수는 두 개의 매개변수 a와 b를 받아, 그 둘을 더한 결과를 반환합니다.

반응형

  함수의 중요성

함수는 프로그래밍에서 매우 중요한 역할을 합니다. 그 이유는 다음과 같습니다.

1) 코드 재사용: 같은 코드를 여러 번 작성하는 대신, 함수로 만들어 필요할 때마다 호출할 수 있습니다. 

function 인사말(이름) { console.log(`안녕하세요, ${이름}님!`); } 인사말("철수"); // 출력: 안녕하세요, 철수님! 인사말("영희"); // 출력: 안녕하세요, 영희님! 인사말("민수"); // 출력: 안녕하세요, 민수님!

 

2) 모듈화: 큰 프로그램을 작은 조각으로 나누어 관리할 수 있게 해 줍니다. 

function 사용자입력받기() { // 사용자로부터 입력을 받는 코드 } function 데이터처리하기(데이터) { // 입력받은 데이터를 처리하는 코드 } function 결과출력하기(결과) { // 처리된 결과를 출력하는 코드 } function 메인프로그램() { let 입력 = 사용자입력받기(); let 처리결과 = 데이터처리하기(입력); 결과출력하기(처리결과); } 메인프로그램();

3) 추상화: 복잡한 작업을 간단한 인터페이스로 표현할 수 있게 해줍니다. 

function 데이터베이스에서사용자정보가져오기(사용자ID) { // 복잡한 데이터베이스 연결 및 쿼리 실행 코드 // ... return 사용자정보; } let 사용자 = 데이터베이스에서사용자정보가져오기("user123");

이 함수를 사용하는 개발자는 내부의 복잡한 로직을 알 필요 없이 간단히 함수를 호출하여 원하는 결과를 얻을 수 있습니다.

 

4) 가독성 향상: 잘 이름 지어진 함수는 코드의 의도를 명확하게 전달합니다.

function 윤년인지확인하기(년도) { return (년도 % 4 === 0 && 년도 % 100 !== 0) || (년도 % 400 === 0); } if (윤년인지확인하기(2024)) { console.log("2024년은 윤년입니다."); }

이렇게 함수를 사용하면, 복잡한 조건문을 직접 보지 않고도 코드의 의도를 쉽게 이해할 수 있습니다.

 

함수는 자바스크립트 프로그래밍의 기본 구성 요소입니다. 효과적으로 함수를 사용하면 더 깔끔하고, 효율적이며, 유지보수가 쉬운 코드를 작성할 수 있습니다.

 

기본적인 함수 선언과 호출

  함수 선언 방법

자바스크립트에서 함수를 선언하는 가장 기본적인 방법은 'function' 키워드를 사용하는 것입니다. 이를 '함수 선언문'이라고 합니다.

• 기본 구조:

function 함수이름(매개변수1, 매개변수2, ...) { // 함수 본문 return 반환값; // 선택사항 }

• 예시:

function 인사하기(이름) { console.log(`안녕하세요, ${이름}님!`); }

이 함수는 '인사하기'라는 이름을 가지며, '이름'이라는 하나의 매개변수를 받습니다.

  함수 호출 방법

함수를 호출(실행)하려면 함수의 이름을 쓰고 괄호를 붙입니다. 매개변수가 있는 경우 괄호 안에 인자를 넣어줍니다.

• 기본 구조:

함수이름(인자1, 인자2, ...);

• 예시:

인사하기("철수"); // 출력: 안녕하세요, 철수님!

함수가 값을 반환하는 경우, 그 값을 변수에 할당하거나 다른 표현식의 일부로 사용할 수 있습니다.

function 제곱하기(숫자) { return 숫자 * 숫자; } let 결과 = 제곱하기(4); console.log(결과); // 출력: 16 console.log(제곱하기(3) + 제곱하기(4)); // 출력: 25

 

  매개변수와 인자

매개변수(parameter)는 함수 선언 시 괄호 안에 정의되는 변수입니다. 인자(argument)는 함수 호출 시 실제로 전달되는 값입니다.

function 합계구하기(a, b) { // a와 b는 매개변수 return a + b; } let 결과 = 합계구하기(5, 3); // 5와 3은 인자 console.log(결과); // 출력: 8

자바스크립트의 함수는 매우 유연해서, 선언된 매개변수의 개수와 다른 개수의 인자를 전달할 수 있습니다.

• 매개변수보다 적은 인자를 전달할 경우:

function 세개의합(a, b, c) { return a + b + c; } console.log(세개의합(1, 2)); // 출력: NaN // c는 undefined가 되어 숫자 + undefined = NaN이 됩니다.

이를 방지하기 위해 기본값을 설정할 수 있습니다.

function 세개의합(a, b, c = 0) { return a + b + c; } console.log(세개의합(1, 2)); // 출력: 3

• 매개변수보다 많은 인자를 전달할 경우:

function 두개의합(a, b) { return a + b; } console.log(두개의합(1, 2, 3, 4)); // 출력: 3 // 추가 인자는 무시됩니다.

모든 전달된 인자에 접근하고 싶다면 'arguments' 객체나 나머지 매개변수(rest parameter)를 사용할 수 있습니다.

function 모든인자의합(...numbers) { return numbers.reduce((sum, num) => sum + num, 0); } console.log(모든인자의합(1, 2, 3, 4, 5)); // 출력: 15

이 예제에서 '...numbers'는 나머지 매개변수로, 전달된 모든 인자를 배열로 받습니다.

 

자, 내용이 너무 길어지므로, 이번에는 여기까지만 하고, 다음 글에서 함수 반환과 함수 표현식에 대해 정리해 보도록 하겠습니다.